Improved the (User|Admin) Settings screens

This commit is contained in:
djmaze 2021-11-07 21:19:48 +01:00
parent 6170de5aee
commit 5b0dd471bc
37 changed files with 948 additions and 1009 deletions

View file

@ -2,7 +2,7 @@ import ko from 'ko';
import { inFocus, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils';
import { Scope } from 'Common/Enums';
import { keyScope, Settings } from 'Common/Globals';
import { keyScope, Settings, leftPanelDisabled } from 'Common/Globals';
import { ViewType } from 'Knoin/Knoin';
class AbstractView {
@ -102,6 +102,7 @@ export class AbstractViewLeft extends AbstractView
constructor(templateID)
{
super(templateID, ViewType.Left);
this.leftPanelDisabled = leftPanelDisabled;
}
}

View file

@ -2,7 +2,7 @@ import ko from 'ko';
import { pString } from 'Common/Utils';
import { settings } from 'Common/Links';
import { doc, elementById } from 'Common/Globals';
import { elementById } from 'Common/Globals';
import { AbstractScreen } from 'Knoin/AbstractScreen';
@ -33,11 +33,12 @@ export class AbstractSettingsScreen extends AbstractScreen {
} else {
const vmPlace = elementById('rl-settings-subscreen');
if (vmPlace) {
settingsScreen = new RoutedSettingsViewModel();
viewModelDom = Element.fromHTML('<div hidden=""></div>');
viewModelDom = Element.fromHTML('<div id="V-Settings-'
+ (RoutedSettingsViewModel.name.replace(/(User|Admin)Settings/,''))
+ '" class="g-ui-user-select-none" hidden=""></div>');
vmPlace.append(viewModelDom);
settingsScreen = new RoutedSettingsViewModel();
settingsScreen.viewModelDom = viewModelDom;
RoutedSettingsViewModel.__dom = viewModelDom;
@ -78,7 +79,7 @@ export class AbstractSettingsScreen extends AbstractScreen {
);
});
doc.querySelector('#rl-content .b-settings .b-content').scrollTop = 0;
elementById('rl-settings-subscreen').scrollTop = 0;
// --
}, 1);
}

View file

@ -1,5 +1,5 @@
.b-admin-about {
#V-Settings-About {
.rl-logo {
display: inline-block;
width: 250px;

View file

@ -1,4 +1,4 @@
.b-admin-branding {
#V-Settings-Branding {
}

View file

@ -1,5 +1,4 @@
.b-admin-general {
#V-Settings-General {
}

View file

@ -49,7 +49,8 @@
left: @rlLeftWidth;
}
.b-admin-right {
#V-AdminPane {
height: 100%;
.b-toolbar {
position: absolute;
@ -67,23 +68,6 @@
flex-grow: 1;
}
}
.b-content {
position: absolute;
top: 50px + @rlLowMargin;
bottom: @rlLowMargin;
left: 0;
right: @rlLowMargin;
overflow-y: auto;
z-index: 2;
background-color: #fff;
border: 1px solid @rlMainDarkColor;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
}
}
.btn.btn-logout {
@ -92,7 +76,18 @@
}
#rl-settings-subscreen {
margin: (50px + @rlLowMargin) @rlLowMargin @rlLowMargin 0;
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
background-color: #fff;
border: 1px solid @rlMainDarkColor;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
}
/* desktop */

View file

@ -1,5 +1,5 @@
.b-admin-packages {
#V-Settings-Packages {
.alert {
width: 650px;

View file

@ -153,10 +153,6 @@ html.rl-side-preview-pane {
}
}
#rl-settings-subscreen {
padding:20px;
}
.dropdown-menu {
max-height: 60vh;
max-width: 90vw;

View file

@ -1,5 +1,5 @@
.b-settins-left {
#V-SettingsMenu {
.b-footer {
position: absolute;
@ -46,9 +46,10 @@
}
}
.b-settins-right {
#V-SettingsPane {
height: 100%;
.b-toolbar {
.btn-toolbar {
position: absolute;
top: 0;
right: 0;
@ -58,33 +59,32 @@
color: #fff;
}
.b-content {
position: absolute;
top: 50px;
bottom: @rlLowMargin;
left: 0;
right: @rlLowMargin;
overflow-y: auto;
z-index: 2;
scroll-behavior: smooth;
background-color: #fff;
border: 1px solid @rlMainDarkColor;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
}
td {
padding: 4px 8px;
line-height: 30px;
}
}
#rl-settings-subscreen {
margin: 50px @rlLowMargin @rlLowMargin 0;
overflow-y: auto;
scroll-behavior: smooth;
padding:20px;
box-sizing: border-box;
height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
background-color: #fff;
border: 1px solid @rlMainDarkColor;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
}
html.rl-mobile #rl-settings-subscreen > * {
margin-right: 15px;
}
.firefox-drag .b-settins-right .b-content,
.firefox-drag #rl-settings-subscreen,
.firefox-drag .modal-body {
overflow: hidden;
}

View file

@ -1,5 +1,5 @@
.b-settings-accounts {
#V-Settings-Accounts {
.account-name {
display: inline-block;

View file

@ -5,7 +5,7 @@
}
#V-PopupsSieveScript .filter-item,
.b-settings-filters .script-item {
#V-Settings-Filters .script-item {
white-space: nowrap;
}

View file

@ -1,5 +1,5 @@
.b-settings-folders {
#V-Settings-Folders {
.folders-list-error {
margin: 10px 0;

View file

@ -1,5 +1,5 @@
.b-settings-general {
#V-Settings-General {
.editMainIdentity {
border-bottom: 1px dashed #555;
cursor: pointer;

View file

@ -1,5 +1,5 @@
.b-settings-open-pgp {
V-Settings-OpenPgp {
td + td {
width: 1%;

View file

@ -113,7 +113,7 @@ class MessageOpenPgpPopupView extends AbstractViewPopup {
this.privateKeys(privateKeys);
if (this.viewModelDom) {
const el = this.viewModelDom.querySelector('.key-list__item');
const el = this.querySelector('.key-list__item');
el && el.click();
}
}

View file

@ -1,7 +1,7 @@
import ko from 'ko';
import { Scope } from 'Common/Enums';
import { leftPanelDisabled, moveAction } from 'Common/Globals';
import { moveAction } from 'Common/Globals';
import { mailBox, settings } from 'Common/Links';
import { setFolderHash } from 'Common/Cache';
import { addComputablesTo } from 'Common/Utils';
@ -34,8 +34,6 @@ export class MailFolderList extends AbstractViewLeft {
this.foldersListWithSingleInboxRootFolder = ko.observable(false);
this.leftPanelDisabled = leftPanelDisabled;
this.allowContacts = AppUserStore.allowContacts();
addComputablesTo(this, {

View file

@ -1,4 +1,3 @@
import { leftPanelDisabled } from 'Common/Globals';
import { settings, mailbox } from 'Common/Links';
import { getFolderInboxName } from 'Common/Cache';
@ -11,8 +10,6 @@ export class MenuSettingsUserView extends AbstractViewLeft {
constructor(screen) {
super('SettingsMenu');
this.leftPanelDisabled = leftPanelDisabled;
this.menu = screen.menu;
}