mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-28 11:39:21 +03:00
Improved the (User|Admin) Settings screens
This commit is contained in:
parent
6170de5aee
commit
5b0dd471bc
37 changed files with 948 additions and 1009 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
.b-admin-about {
|
||||
#V-Settings-About {
|
||||
.rl-logo {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
.b-admin-branding {
|
||||
#V-Settings-Branding {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
.b-admin-general {
|
||||
#V-Settings-General {
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
.b-admin-packages {
|
||||
#V-Settings-Packages {
|
||||
|
||||
.alert {
|
||||
width: 650px;
|
||||
|
|
|
|||
|
|
@ -153,10 +153,6 @@ html.rl-side-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
#rl-settings-subscreen {
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
max-height: 60vh;
|
||||
max-width: 90vw;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
.b-settings-accounts {
|
||||
#V-Settings-Accounts {
|
||||
|
||||
.account-name {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
}
|
||||
|
||||
#V-PopupsSieveScript .filter-item,
|
||||
.b-settings-filters .script-item {
|
||||
#V-Settings-Filters .script-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
.b-settings-folders {
|
||||
#V-Settings-Folders {
|
||||
|
||||
.folders-list-error {
|
||||
margin: 10px 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
.b-settings-general {
|
||||
#V-Settings-General {
|
||||
.editMainIdentity {
|
||||
border-bottom: 1px dashed #555;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
.b-settings-open-pgp {
|
||||
V-Settings-OpenPgp {
|
||||
|
||||
td + td {
|
||||
width: 1%;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue