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({
route: SettingsViewModel.__rlSettingsData.Route,
label: SettingsViewModel.__rlSettingsData.Label,
selected: ko.observable(false),
disabled: false
selected: ko.observable(false)
});
}
});

View file

@ -26,43 +26,26 @@
.b-admin-menu {
.e-item {
overflow: hidden;
text-decoration: none;
}
.e-link {
position: relative;
a {
color: var(--settings-menu-color, #333);
cursor: pointer;
display: block;
font-size: 18px;
height: 30px;
line-height: 29px;
cursor: pointer;
font-size: 18px;
z-index: 1;
cursor: default;
background-color: transparent;
color: var(--settings-menu-disabled-color, #666);
overflow: hidden;
padding: 4px 10px;
text-decoration: none;
}
.e-item.selectable .e-link {
cursor: pointer;
color: var(--settings-menu-color, #333);
a:focus, a:hover {
background-color: var(--settings-menu-hover-bg-color, #333);
color: var(--settings-menu-hover-color, #eee);
}
.e-item.selectable {
&:hover .e-link{
background-color: var(--settings-menu-hover-bg-color, #333);
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);
}
a.selected {
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 {
.e-item {
overflow: hidden;
text-decoration: none;
}
.e-link {
position: relative;
a {
background-color: transparent;
color: var(--settings-menu-color, #333);
cursor: pointer;
display: block;
font-size: 18px;
height: 30px;
line-height: 29px;
font-size: 18px;
z-index: 1;
cursor: default;
background-color: transparent;
color: var(--settings-menu-disabled-color, #666);
overflow: hidden;
padding: 4px 10px;
text-decoration: none;
}
.e-item.selectable .e-link {
cursor: pointer;
color: var(--settings-menu-color, #333);
a:focus, a:hover {
background-color: var(--settings-menu-hover-bg-color, #333);
color: var(--settings-menu-hover-color, #eee);
}
.e-item.selectable {
&:hover .e-link{
background-color: var(--settings-menu-hover-bg-color, #333);
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);
}
a.selected {
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';
class MenuSettingsAdminView extends AbstractViewLeft {
@ -16,11 +13,6 @@ class MenuSettingsAdminView extends AbstractViewLeft {
link(route) {
return '#/' + route;
}
onBuild(dom) {
shortcuts.add('arrowup,arrowdown', '', Scope.Settings,
settingsMenuKeysHandler(dom.querySelectorAll('.b-admin-menu .e-item')));
}
}
export { MenuSettingsAdminView };

View file

@ -1,9 +1,7 @@
import { Scope } from 'Common/Enums';
import { leftPanelDisabled } from 'Common/Globals';
import { settings, mailbox } from 'Common/Links';
import { getFolderInboxName } from 'Common/Cache';
import { settingsMenuKeysHandler } from 'Knoin/Knoin';
import { AbstractViewLeft } from 'Knoin/AbstractViews';
import { ThemeStore } from 'Stores/Theme';
@ -23,12 +21,9 @@ export class MenuSettingsUserView extends AbstractViewLeft {
onBuild(dom) {
dom.addEventListener('click', event =>
ThemeStore.isMobile()
&& event.target.closestWithin('.b-settings-menu .e-item.selectable', dom)
&& event.target.closest('.b-settings-menu a', dom)
&& leftPanelDisabled(true)
);
shortcuts.add('arrowup,arrowdown', '', Scope.Settings,
settingsMenuKeysHandler(dom.querySelectorAll('.b-settings-menu .e-item')));
}
link(route) {

View file

@ -1,17 +1,7 @@
<div class="b-admin-left g-ui-user-select-none">
<div class="b-toolbar"></div>
<div class="b-admin-left">
<div class="b-content opacity-on-panel-disabled">
<div class="b-admin-menu" data-bind="foreach: menu">
<!-- ko if: disabled -->
<span class="e-item disabled">
<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>
<nav class="b-admin-menu" data-bind="foreach: menu">
<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
</nav>
</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-settings-menu" data-bind="foreach: menu">
<!-- ko if: disabled -->
<span class="e-item disabled">
<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>
<nav class="b-settings-menu" data-bind="foreach: menu">
<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
</nav>
</div>
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
<div class="b-footer">

View file

@ -37,7 +37,6 @@
// SETTINGS
--settings-menu-color: #fff;
--settings-menu-disabled-color: #aaa;
--settings-menu-selected-color: #fff;
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
--settings-menu-hover-color: #fff;

View file

@ -38,7 +38,6 @@
// SETTINGS
--settings-menu-color: #fff;
--settings-menu-disabled-color: #aaa;
--settings-menu-selected-color: #fff;
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
--settings-menu-hover-color: #fff;

View file

@ -38,7 +38,6 @@
// SETTINGS
--settings-menu-color: #fff;
--settings-menu-disabled-color: #aaa;
--settings-menu-selected-color: #fff;
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
--settings-menu-hover-color: #fff;

View file

@ -37,7 +37,6 @@
// SETTINGS
--settings-menu-color: #fff;
--settings-menu-disabled-color: #aaa;
--settings-menu-selected-color: #fff;
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
--settings-menu-hover-color: #fff;

View file

@ -36,7 +36,6 @@
// SETTINGS
--settings-menu-color: #333;
--settings-menu-disabled-color: #999;
--settings-menu-selected-color: #eee;
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
--settings-menu-hover-color: #eee;

View file

@ -37,7 +37,6 @@
// SETTINGS
--settings-menu-color: #fff;
--settings-menu-disabled-color: #aaa;
--settings-menu-selected-color: #fff;
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
--settings-menu-hover-color: #fff;

View file

@ -37,7 +37,6 @@
// SETTINGS
--settings-menu-color: #fff;
--settings-menu-disabled-color: #aaa;
--settings-menu-selected-color: #fff;
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
--settings-menu-hover-color: #fff;

View file

@ -36,7 +36,6 @@
// SETTINGS
--settings-menu-color: #333;
--settings-menu-disabled-color: #999;
--settings-menu-selected-color: #eee;
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
--settings-menu-hover-color: #eee;

View file

@ -37,7 +37,6 @@
// SETTINGS
--settings-menu-color: #fff;
--settings-menu-disabled-color: #aaa;
--settings-menu-selected-color: #fff;
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
--settings-menu-hover-color: #fff;

View file

@ -36,7 +36,6 @@
// SETTINGS
--settings-menu-color: #fff;
--settings-menu-disabled-color: #999;
--settings-menu-selected-color: #fff;
--settings-menu-selected-bg-color: rgba(255,255,255,0.3);
--settings-menu-hover-color: #fff;

View file

@ -38,7 +38,6 @@
// SETTINGS
--settings-menu-color: #333;
--settings-menu-disabled-color: #999;
--settings-menu-selected-color: #333;
--settings-menu-selected-bg-color: rgba(255,255,255,0.5);
--settings-menu-hover-color: #333;

View file

@ -36,7 +36,6 @@
// SETTINGS
--settings-menu-color: #333;
--settings-menu-disabled-color: #999;
--settings-menu-selected-color: #eee;
--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
--settings-menu-hover-color: #eee;

View file

@ -44,7 +44,6 @@
// SETTINGS
--settings-menu-color: #333;
--settings-menu-disabled-color: #666;
--settings-menu-selected-color: #eee;
--settings-menu-selected-bg-color: #333;
--settings-menu-hover-color: #eee;