mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-13 03:27:39 +03:00
Improved the (User|Admin) Settings screens
This commit is contained in:
djmaze
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,15 +59,20 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: @rlLowMargin;
|
||||
left: 0;
|
||||
right: @rlLowMargin;
|
||||
td {
|
||||
padding: 4px 8px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-settings-subscreen {
|
||||
margin: 50px @rlLowMargin @rlLowMargin 0;
|
||||
overflow-y: auto;
|
||||
z-index: 2;
|
||||
scroll-behavior: smooth;
|
||||
padding:20px;
|
||||
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
|
||||
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
|
|
@ -74,17 +80,11 @@
|
|||
border-radius: @rlMainBorderRadius;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 4px 8px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
<div class="b-settings b-admin-right">
|
||||
<div class="b-toolbar g-ui-user-select-none">
|
||||
<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
|
||||
<i class="icon-spinner" style="margin: 10px" data-bind="style: {'visibility': adminManLoadingVisibility }"></i>
|
||||
<h4>SnappyMail - <span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span></h4>
|
||||
<a class="btn btn-logout fontastic" data-bind="click: logoutClick">⏻</a>
|
||||
</div>
|
||||
<div class="b-content">
|
||||
<div id="rl-settings-subscreen"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-admin-about">
|
||||
<div class="form-horizontal">
|
||||
<div class="legend" data-i18n="TAB_ABOUT/LEGEND_ABOUT"></div>
|
||||
<div class="row" style="min-width: 800px;">
|
||||
|
|
@ -30,4 +29,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-admin-branding">
|
||||
<div class="form-horizontal">
|
||||
<div class="legend" data-i18n="TAB_BRANDING/LEGEND_BRANDING"></div>
|
||||
<div class="control-group">
|
||||
|
|
@ -36,4 +35,3 @@
|
|||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="b-admin-general">
|
||||
<div class="row" data-bind="visible: !contactsSupported">
|
||||
<div class="alert span8" style="margin-top: 10px;">
|
||||
<h4 data-i18n="TAB_CONTACTS/ALERT_NOTICE"></h4>
|
||||
<br />
|
||||
<div data-i18n="[html]TAB_CONTACTS/HTML_ALERT_DOES_NOT_SUPPORTED"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,7 +79,6 @@ host=127.0.0.1;port=5432;dbname=snappymail
|
|||
<div class="controls">
|
||||
<div class="alert">
|
||||
<h4 data-i18n="TAB_CONTACTS/ALERT_NOTICE"></h4>
|
||||
<br />
|
||||
<div data-i18n="[html]TAB_CONTACTS/HTML_ALERT_DO_NOT_USE_THIS_DATABASE"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,4 +94,3 @@ host=127.0.0.1;port=5432;dbname=snappymail
|
|||
</div>
|
||||
<div class="alert span8" data-bind="text: testContactsErrorMessage, visible: '' !== testContactsErrorMessage()"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<div class="b-admin-domains g-ui-user-select-none">
|
||||
<div class="legend">
|
||||
<span data-i18n="TAB_DOMAINS/LEGEND_DOMAINS"></span>
|
||||
<i class="icon-spinner" style="margin: 5px" data-bind="visible: domains.loading"></i>
|
||||
</div>
|
||||
<div>
|
||||
<a class="btn" data-bind="click: createDomain">
|
||||
<i class="fontastic">✚</i>
|
||||
<span data-i18n="TAB_DOMAINS/BUTTON_ADD_DOMAIN"></span>
|
||||
|
|
@ -42,5 +40,3 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-admin-general">
|
||||
<div class="row" data-bind="visible: weakPassword">
|
||||
<div class="alert alert-warning span8" style="margin-top: 10px;">
|
||||
<h4 data-i18n="TAB_GENERAL/ALERT_WARNING"></h4>
|
||||
|
|
@ -129,4 +128,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-admin-general">
|
||||
<div class="form-horizontal">
|
||||
<div class="legend" data-i18n="TAB_LOGIN/LEGEND_LOGIN_SCREEN"></div>
|
||||
<div class="control-group">
|
||||
|
|
@ -35,4 +34,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
<div class="b-admin-packages">
|
||||
|
||||
<div class="legend">
|
||||
<span data-i18n="TABS_LABELS/LABEL_PACKAGES_NAME"></span>
|
||||
<i class="icon-spinner" style="margin: 5px" data-bind="visible: packages.loading"></i>
|
||||
|
|
@ -42,5 +40,3 @@
|
|||
<div data-bind="template: { name: 'AdminSettingsPackagesTable', data: {f: packagesAvailableForInstallation} }"></div>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="g-ui-user-select-none">
|
||||
<div class="legend" data-i18n="TAB_SECURITY/LEGEND_SECURITY"></div>
|
||||
<div class="form-horizontal">
|
||||
<div class="control-group">
|
||||
|
|
@ -88,4 +87,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-settings-accounts g-ui-user-select-none">
|
||||
<div data-bind="visible: allowAdditionalAccount">
|
||||
<div class="legend">
|
||||
<span data-i18n="SETTINGS_ACCOUNTS/LEGEND_ACCOUNTS"></span>
|
||||
|
|
@ -53,4 +52,3 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<div class="b-settings-contacts">
|
||||
<div class="form-horizontal g-ui-user-select-none">
|
||||
<div class="form-horizontal">
|
||||
<div class="legend" data-i18n="GLOBAL/CONTACTS"></div>
|
||||
<div class="control-group">
|
||||
<div class="controls" data-bind="component: {
|
||||
|
|
@ -46,4 +45,3 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-settings-filters g-ui-user-select-none">
|
||||
<div class="form-horizontal">
|
||||
<div class="legend">
|
||||
<span data-i18n="SETTINGS_FILTERS/LEGEND_FILTERS"></span>
|
||||
|
|
@ -38,4 +37,3 @@
|
|||
<i class="fontastic">✚</i>
|
||||
<span data-i18n="SETTINGS_FILTERS/BUTTON_ADD_SCRIPT"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-settings-folders">
|
||||
<div class="legend">
|
||||
<span data-i18n="SETTINGS_FOLDERS/LEGEND_FOLDERS"></span>
|
||||
|
||||
|
|
@ -32,4 +31,3 @@
|
|||
<table class="table table-hover list-table" data-bind="i18nUpdate: folderList">
|
||||
<tbody data-bind="template: { name: 'SettingsFolderItem', foreach: folderList }"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-settings-general g-ui-user-select-none">
|
||||
<div class="form-horizontal">
|
||||
<div class="legend" data-i18n="SETTINGS_GENERAL/LEGEND_GENERAL"></div>
|
||||
<div class="control-group">
|
||||
|
|
@ -132,4 +131,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
<div class="b-settins-left">
|
||||
<div class="b-content">
|
||||
<nav data-bind="foreach: menu">
|
||||
<nav class="b-content" 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: leftPanelDisabled.toggle()"></div>
|
||||
<div class="b-footer">
|
||||
<a class="btn buttonResize" data-bind="click: leftPanelDisabled.toggle()">
|
||||
<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-settings-open-pgp g-ui-user-select-none">
|
||||
<div class="legend">OpenPGP</div>
|
||||
<button class="btn" data-bind="click: addOpenPgpKey">
|
||||
<i class="icon-list-add"></i>
|
||||
|
|
@ -58,4 +57,3 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<div class="b-settings b-settins-right">
|
||||
<div class="b-toolbar btn-toolbar" style="margin-top: 2px;">
|
||||
<div class="btn-toolbar">
|
||||
<!-- ko if: isMobile() -->
|
||||
<div class="btn-group" style="margin-left: -1px">
|
||||
<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
|
||||
|
|
@ -10,5 +9,4 @@
|
|||
<span data-i18n="GLOBAL/BACK"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="b-content" id="rl-settings-subscreen"></div>
|
||||
</div>
|
||||
<div id="rl-settings-subscreen"></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-settings-security">
|
||||
<div class="form-horizontal" data-bind="visible: capaAutoLogout">
|
||||
<div class="legend" data-i18n="SETTINGS_SECURITY/LEGEND_SECURITY"></div>
|
||||
<div class="control-group">
|
||||
|
|
@ -16,4 +15,3 @@
|
|||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="b-settings-themes g-ui-user-select-none">
|
||||
<div class="legend">
|
||||
<span data-i18n="SETTINGS_THEMES/LEGEND_THEMES"></span>
|
||||
<span data-bind="saveTrigger: themeTrigger"></span>
|
||||
|
|
@ -32,4 +31,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,10 +73,9 @@
|
|||
|
||||
.well,
|
||||
#rl-popups > dialog,
|
||||
.b-settins-right .b-content,
|
||||
#rl-settings-subscreen,
|
||||
.messageList,
|
||||
.messageView,
|
||||
.b-admin-right .b-content,
|
||||
#V-PopupsCompose .b-attachment-place {
|
||||
background-color: #000;
|
||||
border-color: #555;
|
||||
|
|
@ -132,7 +131,7 @@ dialog header, dialog footer,
|
|||
background-color: #111;
|
||||
}
|
||||
|
||||
.b-admin-about .rl-logo {
|
||||
#V-Settings-About .rl-logo {
|
||||
filter: drop-shadow(0 0 1px #FFF);
|
||||
}
|
||||
|
||||
|
|
@ -141,6 +140,7 @@ dialog header, dialog footer,
|
|||
}
|
||||
|
||||
.tabs [id^="tab"]:checked + label {
|
||||
background: linear-gradient(#555 0%, #000 100%);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue