Settings menus:

- remove .disabled, never used
- cleanup/simplify code
This commit is contained in:
djmaze 2021-04-22 16:02:12 +02:00
parent a624d43602
commit 75c879836c
20 changed files with 33 additions and 111 deletions

View file

@ -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
}); });
} }
}); });

View file

@ -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);
}
} }
} }

View file

@ -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);
}
} }
} }

View file

@ -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 };

View file

@ -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) {

View file

@ -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>

View file

@ -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">

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;