mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-07 16:37:02 +03:00
Settings menus:
- remove .disabled, never used - cleanup/simplify code
This commit is contained in:
parent
a624d43602
commit
75c879836c
20 changed files with 33 additions and 111 deletions
|
|
@ -126,8 +126,7 @@ export class AbstractSettingsScreen extends AbstractScreen {
|
||||||
this.menu.push({
|
this.menu.push({
|
||||||
route: SettingsViewModel.__rlSettingsData.Route,
|
route: SettingsViewModel.__rlSettingsData.Route,
|
||||||
label: SettingsViewModel.__rlSettingsData.Label,
|
label: SettingsViewModel.__rlSettingsData.Label,
|
||||||
selected: ko.observable(false),
|
selected: ko.observable(false)
|
||||||
disabled: false
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -26,43 +26,26 @@
|
||||||
|
|
||||||
.b-admin-menu {
|
.b-admin-menu {
|
||||||
|
|
||||||
.e-item {
|
a {
|
||||||
overflow: hidden;
|
color: var(--settings-menu-color, #333);
|
||||||
text-decoration: none;
|
cursor: pointer;
|
||||||
}
|
|
||||||
|
|
||||||
.e-link {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 29px;
|
line-height: 29px;
|
||||||
cursor: pointer;
|
overflow: hidden;
|
||||||
font-size: 18px;
|
|
||||||
z-index: 1;
|
|
||||||
cursor: default;
|
|
||||||
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--settings-menu-disabled-color, #666);
|
|
||||||
|
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.e-item.selectable .e-link {
|
a:focus, a:hover {
|
||||||
cursor: pointer;
|
background-color: var(--settings-menu-hover-bg-color, #333);
|
||||||
color: var(--settings-menu-color, #333);
|
color: var(--settings-menu-hover-color, #eee);
|
||||||
}
|
}
|
||||||
|
|
||||||
.e-item.selectable {
|
a.selected {
|
||||||
&:hover .e-link{
|
background-color: var(--settings-menu-selected-bg-color, #333);
|
||||||
background-color: var(--settings-menu-hover-bg-color, #333);
|
color: var(--settings-menu-selected-color, #eee);
|
||||||
color: var(--settings-menu-hover-color, #eee);
|
|
||||||
}
|
|
||||||
&.selected .e-link {
|
|
||||||
background-color: var(--settings-menu-selected-bg-color, #333);
|
|
||||||
color: var(--settings-menu-selected-color, #eee);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -36,42 +36,27 @@
|
||||||
|
|
||||||
.b-settings-menu {
|
.b-settings-menu {
|
||||||
|
|
||||||
.e-item {
|
a {
|
||||||
overflow: hidden;
|
background-color: transparent;
|
||||||
text-decoration: none;
|
color: var(--settings-menu-color, #333);
|
||||||
}
|
cursor: pointer;
|
||||||
|
|
||||||
.e-link {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 29px;
|
line-height: 29px;
|
||||||
font-size: 18px;
|
overflow: hidden;
|
||||||
z-index: 1;
|
|
||||||
cursor: default;
|
|
||||||
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--settings-menu-disabled-color, #666);
|
|
||||||
|
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.e-item.selectable .e-link {
|
a:focus, a:hover {
|
||||||
cursor: pointer;
|
background-color: var(--settings-menu-hover-bg-color, #333);
|
||||||
color: var(--settings-menu-color, #333);
|
color: var(--settings-menu-hover-color, #eee);
|
||||||
}
|
}
|
||||||
|
|
||||||
.e-item.selectable {
|
a.selected {
|
||||||
&:hover .e-link{
|
background-color: var(--settings-menu-selected-bg-color, #333);
|
||||||
background-color: var(--settings-menu-hover-bg-color, #333);
|
color: var(--settings-menu-selected-color, #eee);
|
||||||
color: var(--settings-menu-hover-color, #eee);
|
|
||||||
}
|
|
||||||
&.selected .e-link {
|
|
||||||
background-color: var(--settings-menu-selected-bg-color, #333);
|
|
||||||
color: var(--settings-menu-selected-color, #eee);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,3 @@
|
||||||
import { Scope } from 'Common/Enums';
|
|
||||||
|
|
||||||
import { settingsMenuKeysHandler } from 'Knoin/Knoin';
|
|
||||||
import { AbstractViewLeft } from 'Knoin/AbstractViews';
|
import { AbstractViewLeft } from 'Knoin/AbstractViews';
|
||||||
|
|
||||||
class MenuSettingsAdminView extends AbstractViewLeft {
|
class MenuSettingsAdminView extends AbstractViewLeft {
|
||||||
|
|
@ -16,11 +13,6 @@ class MenuSettingsAdminView extends AbstractViewLeft {
|
||||||
link(route) {
|
link(route) {
|
||||||
return '#/' + route;
|
return '#/' + route;
|
||||||
}
|
}
|
||||||
|
|
||||||
onBuild(dom) {
|
|
||||||
shortcuts.add('arrowup,arrowdown', '', Scope.Settings,
|
|
||||||
settingsMenuKeysHandler(dom.querySelectorAll('.b-admin-menu .e-item')));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { MenuSettingsAdminView };
|
export { MenuSettingsAdminView };
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
import { Scope } from 'Common/Enums';
|
|
||||||
import { leftPanelDisabled } from 'Common/Globals';
|
import { leftPanelDisabled } from 'Common/Globals';
|
||||||
import { settings, mailbox } from 'Common/Links';
|
import { settings, mailbox } from 'Common/Links';
|
||||||
import { getFolderInboxName } from 'Common/Cache';
|
import { getFolderInboxName } from 'Common/Cache';
|
||||||
|
|
||||||
import { settingsMenuKeysHandler } from 'Knoin/Knoin';
|
|
||||||
import { AbstractViewLeft } from 'Knoin/AbstractViews';
|
import { AbstractViewLeft } from 'Knoin/AbstractViews';
|
||||||
|
|
||||||
import { ThemeStore } from 'Stores/Theme';
|
import { ThemeStore } from 'Stores/Theme';
|
||||||
|
|
@ -23,12 +21,9 @@ export class MenuSettingsUserView extends AbstractViewLeft {
|
||||||
onBuild(dom) {
|
onBuild(dom) {
|
||||||
dom.addEventListener('click', event =>
|
dom.addEventListener('click', event =>
|
||||||
ThemeStore.isMobile()
|
ThemeStore.isMobile()
|
||||||
&& event.target.closestWithin('.b-settings-menu .e-item.selectable', dom)
|
&& event.target.closest('.b-settings-menu a', dom)
|
||||||
&& leftPanelDisabled(true)
|
&& leftPanelDisabled(true)
|
||||||
);
|
);
|
||||||
|
|
||||||
shortcuts.add('arrowup,arrowdown', '', Scope.Settings,
|
|
||||||
settingsMenuKeysHandler(dom.querySelectorAll('.b-settings-menu .e-item')));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
link(route) {
|
link(route) {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,7 @@
|
||||||
<div class="b-admin-left g-ui-user-select-none">
|
<div class="b-admin-left">
|
||||||
<div class="b-toolbar"></div>
|
|
||||||
<div class="b-content opacity-on-panel-disabled">
|
<div class="b-content opacity-on-panel-disabled">
|
||||||
<div class="b-admin-menu" data-bind="foreach: menu">
|
<nav class="b-admin-menu" data-bind="foreach: menu">
|
||||||
<!-- ko if: disabled -->
|
<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
|
||||||
<span class="e-item disabled">
|
</nav>
|
||||||
<span class="e-link" data-bind="attr: { 'data-i18n': label }"></span>
|
|
||||||
</span>
|
|
||||||
<!-- /ko -->
|
|
||||||
<!-- ko ifnot: disabled -->
|
|
||||||
<a class="e-item selectable" href="#" data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route) }">
|
|
||||||
<span class="e-link" data-bind="attr: { 'data-i18n': label }"></span>
|
|
||||||
</a>
|
|
||||||
<!-- /ko -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,8 @@
|
||||||
<div class="b-settins-left g-ui-user-select-none">
|
<div class="b-settins-left">
|
||||||
<div class="b-content opacity-on-panel-disabled">
|
<div class="b-content opacity-on-panel-disabled">
|
||||||
<div class="b-settings-menu" data-bind="foreach: menu">
|
<nav class="b-settings-menu" data-bind="foreach: menu">
|
||||||
<!-- ko if: disabled -->
|
<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
|
||||||
<span class="e-item disabled">
|
</nav>
|
||||||
<span class="e-link" data-bind="attr: { 'data-i18n': label }"></span>
|
|
||||||
</span>
|
|
||||||
<!-- /ko -->
|
|
||||||
<!-- ko ifnot: disabled -->
|
|
||||||
<a class="e-item selectable" href="#" data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route) }">
|
|
||||||
<span class="e-link" data-bind="attr: { 'data-i18n': label }"></span>
|
|
||||||
</a>
|
|
||||||
<!-- /ko -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
|
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
|
||||||
<div class="b-footer">
|
<div class="b-footer">
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #fff;
|
--settings-menu-color: #fff;
|
||||||
--settings-menu-disabled-color: #aaa;
|
|
||||||
--settings-menu-selected-color: #fff;
|
--settings-menu-selected-color: #fff;
|
||||||
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
||||||
--settings-menu-hover-color: #fff;
|
--settings-menu-hover-color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #fff;
|
--settings-menu-color: #fff;
|
||||||
--settings-menu-disabled-color: #aaa;
|
|
||||||
--settings-menu-selected-color: #fff;
|
--settings-menu-selected-color: #fff;
|
||||||
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
|
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
|
||||||
--settings-menu-hover-color: #fff;
|
--settings-menu-hover-color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #fff;
|
--settings-menu-color: #fff;
|
||||||
--settings-menu-disabled-color: #aaa;
|
|
||||||
--settings-menu-selected-color: #fff;
|
--settings-menu-selected-color: #fff;
|
||||||
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
|
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
|
||||||
--settings-menu-hover-color: #fff;
|
--settings-menu-hover-color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #fff;
|
--settings-menu-color: #fff;
|
||||||
--settings-menu-disabled-color: #aaa;
|
|
||||||
--settings-menu-selected-color: #fff;
|
--settings-menu-selected-color: #fff;
|
||||||
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
||||||
--settings-menu-hover-color: #fff;
|
--settings-menu-hover-color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #333;
|
--settings-menu-color: #333;
|
||||||
--settings-menu-disabled-color: #999;
|
|
||||||
--settings-menu-selected-color: #eee;
|
--settings-menu-selected-color: #eee;
|
||||||
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
||||||
--settings-menu-hover-color: #eee;
|
--settings-menu-hover-color: #eee;
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #fff;
|
--settings-menu-color: #fff;
|
||||||
--settings-menu-disabled-color: #aaa;
|
|
||||||
--settings-menu-selected-color: #fff;
|
--settings-menu-selected-color: #fff;
|
||||||
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
||||||
--settings-menu-hover-color: #fff;
|
--settings-menu-hover-color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #fff;
|
--settings-menu-color: #fff;
|
||||||
--settings-menu-disabled-color: #aaa;
|
|
||||||
--settings-menu-selected-color: #fff;
|
--settings-menu-selected-color: #fff;
|
||||||
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
||||||
--settings-menu-hover-color: #fff;
|
--settings-menu-hover-color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #333;
|
--settings-menu-color: #333;
|
||||||
--settings-menu-disabled-color: #999;
|
|
||||||
--settings-menu-selected-color: #eee;
|
--settings-menu-selected-color: #eee;
|
||||||
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
||||||
--settings-menu-hover-color: #eee;
|
--settings-menu-hover-color: #eee;
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #fff;
|
--settings-menu-color: #fff;
|
||||||
--settings-menu-disabled-color: #aaa;
|
|
||||||
--settings-menu-selected-color: #fff;
|
--settings-menu-selected-color: #fff;
|
||||||
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
||||||
--settings-menu-hover-color: #fff;
|
--settings-menu-hover-color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #fff;
|
--settings-menu-color: #fff;
|
||||||
--settings-menu-disabled-color: #999;
|
|
||||||
--settings-menu-selected-color: #fff;
|
--settings-menu-selected-color: #fff;
|
||||||
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
|
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
|
||||||
--settings-menu-hover-color: #fff;
|
--settings-menu-hover-color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #333;
|
--settings-menu-color: #333;
|
||||||
--settings-menu-disabled-color: #999;
|
|
||||||
--settings-menu-selected-color: #333;
|
--settings-menu-selected-color: #333;
|
||||||
--settings-menu-selected-bg-color: rgba(255,255,255,0.5);
|
--settings-menu-selected-bg-color: rgba(255,255,255,0.5);
|
||||||
--settings-menu-hover-color: #333;
|
--settings-menu-hover-color: #333;
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #333;
|
--settings-menu-color: #333;
|
||||||
--settings-menu-disabled-color: #999;
|
|
||||||
--settings-menu-selected-color: #eee;
|
--settings-menu-selected-color: #eee;
|
||||||
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
|
||||||
--settings-menu-hover-color: #eee;
|
--settings-menu-hover-color: #eee;
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,6 @@
|
||||||
|
|
||||||
// SETTINGS
|
// SETTINGS
|
||||||
--settings-menu-color: #333;
|
--settings-menu-color: #333;
|
||||||
--settings-menu-disabled-color: #666;
|
|
||||||
--settings-menu-selected-color: #eee;
|
--settings-menu-selected-color: #eee;
|
||||||
--settings-menu-selected-bg-color: #333;
|
--settings-menu-selected-bg-color: #333;
|
||||||
--settings-menu-hover-color: #eee;
|
--settings-menu-hover-color: #eee;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue