Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-30 04:29:21 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reduce/simplify CSS footprint

Browse source
This commit is contained in:
the-djmaze 2023-02-24 11:45:26 +01:00
parent b03d35bc7a
commit 91b4ff16bd
28 changed files with 102 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

5
dev/Screen/AbstractSettings.js
View file

@ -2,7 +2,7 @@ import ko from 'ko';
import { pString } from 'Common/Utils';
import { settings } from 'Common/Links';
import { createElement, elementById } from 'Common/Globals';
import { createElement/*, elementById*/ } from 'Common/Globals';
import { AbstractScreen } from 'Knoin/AbstractScreen';
import { i18nToNodes } from 'Common/Translator';
@ -29,7 +29,8 @@ export class AbstractSettingsScreen extends AbstractScreen {
);
if (RoutedSettingsViewModel) {
const vmPlace = elementById('rl-settings-subscreen');
// const vmPlace = elementById('V-SettingsPane') || elementById('V-AdminPane);
const vmPlace = this.viewModels[1].__dom;
if (RoutedSettingsViewModel.__vm) {
settingsScreen = RoutedSettingsViewModel.__vm;
} else if (vmPlace) {

2
dev/Screen/User/Settings.js
View file

@ -22,7 +22,7 @@ import { SettingsPaneUserView } from 'View/User/Settings/Pane';
export class SettingsUserScreen extends AbstractSettingsScreen {
constructor() {
super([SystemDropDownUserView, SettingsMenuUserView, SettingsPaneUserView]);
super([SettingsMenuUserView, SettingsPaneUserView, SystemDropDownUserView]);
const views = [
UserSettingsGeneral

4
dev/Stores/User/Settings.js
View file

@ -53,8 +53,8 @@ export const SettingsUserStore = new class {
const toggleLayout = () => {
const value = ThemeStore.isMobile() ? 0 : self.layout();
$htmlCL.toggle('rl-side-preview-pane', Layout.SidePreview === value);
$htmlCL.toggle('rl-bottom-preview-pane', Layout.BottomPreview === value);
$htmlCL.toggle('sm-msgView-side', Layout.SidePreview === value);
$htmlCL.toggle('sm-msgView-bottom', Layout.BottomPreview === value);
fireEvent('rl-layout', value);
};
self.layout.subscribe(toggleLayout);

22
dev/Styles/Admin/Layout.less
View file

@ -39,6 +39,14 @@
height: calc(100% - 50px - @rlLowMargin);
margin: 50px @rlLowMargin 0 0;
background-color: var(--settings-bg-clr, #fff);
border: 1px solid var(--border-color, #aaa);
border-radius: var(--border-radius, 5px);
box-shadow: var(--smMainShadow);
overflow-y: auto;
padding: 20px;
scroll-behavior: smooth;
> .b-toolbar {
color: #fff;
display: flex;
@ -61,17 +69,6 @@
padding-right: 12px;
}
#rl-settings-subscreen {
background-color: var(--settings-bg-clr, #fff);
border: 1px solid var(--border-color, #aaa);
border-radius: var(--border-radius, 5px);
box-shadow: var(--smMainShadow);
height: 100%;
overflow-y: auto;
padding: 20px;
scroll-behavior: smooth;
}
/* desktop */
@media screen and (min-width: @maxMobileWidth + 1px) {
.toggleLeft {
@ -93,9 +90,6 @@
#V-AdminPane {
margin-right: 0;
}
#rl-settings-subscreen {
padding: 10px;
}

2
dev/Styles/Languages.less
View file

@ -34,7 +34,7 @@
}
}
@media screen and (max-width: 733px) {
@media screen and (max-width: 480px) {
#V-PopupsLanguages label {
width: 100%;
}

1
dev/Styles/Ui.less
View file

@ -1,5 +1,4 @@
#rl-settings-subscreen,
.g-ui-user-select-none {
user-select: none;
-webkit-touch-callout: none;

2
dev/Styles/User/AdvancedSearch.less
View file

@ -10,7 +10,7 @@
margin-right:1em;
}
@media screen and (max-width: 410px) {
@media screen and (max-width: 480px) {
#advancedsearchform label {
width: 100%;
}

2
dev/Styles/User/Contacts.less
View file

@ -203,7 +203,7 @@
}
}
@media screen and (max-width: 900px) {
@media screen and (max-width: @maxMobileWidth) {
#V-PopupsContacts {
width: 100%;
}

21
dev/Styles/User/FolderList.less
View file

@ -208,24 +208,19 @@
/**/
}
.btn {
&.buttonCompose {
max-height: 2em;
max-width: fit-content;
overflow: hidden;
width: calc(100% - 48px);
}
#rl-left .buttonCompose {
max-height: 2em;
max-width: fit-content;
overflow: hidden;
width: calc(100% - 48px);
}
html.rl-left-panel-disabled {
.buttonComposeText{
.buttonComposeText,
.buttonContacts {
display: none;
}
.btn.buttonCompose {
#rl-left .buttonCompose {
width: auto;
}
.btn.buttonContacts {
margin-top: 10px !important;
margin-left: 0 !important;
}
}

37
dev/Styles/User/Layout.less
View file

@ -152,13 +152,14 @@ html.rl-left-panel-disabled {
}
}
.resizer {
display: none;
}
@media screen and (max-width: @maxMobileWidth) {
#rl-app {
#V-SettingsPane {
margin-right: 0;
}
#rl-settings-subscreen {
padding: 10px;
}
}
@ -181,9 +182,7 @@ html.rl-left-panel-disabled {
line-height: 2.5;
}
.hide-mobile,
#rl-left .resizer,
#rl-right .resizer {
.hide-mobile {
display: none !important;
}
}
@ -195,44 +194,36 @@ html.rl-left-panel-disabled {
display: none !important;
}
.rl-bottom-preview-pane #rl-right {
.sm-msgView-bottom #rl-right {
flex-direction: column;
}
.resizer {
background: #aaa;
background: rgba(255,255,255,0.5);
display: none;
opacity: 0;
position: absolute;
bottom: 0;
right: 0;
z-index: 102;
}
.resizer:hover {
opacity: 1;
}
#rl-left > .resizer,
.rl-side-preview-pane #V-MailMessageList .resizer {
html:not(.rl-left-panel-disabled) #rl-left > .resizer,
.sm-msgView-side #V-MailMessageList .resizer {
cursor: ew-resize;
cursor: col-resize;
right: 0;
display: block;
top: 0;
bottom: 0;
width: 5px;
}
.rl-bottom-preview-pane #V-MailMessageList .resizer {
.sm-msgView-bottom #V-MailMessageList .resizer {
cursor: ns-resize;
cursor: row-resize;
bottom: 0;
left: 0;
right: 0;
height: 5px;
}
html:not(.rl-left-panel-disabled) #rl-left > .resizer,
#V-MailMessageList .resizer {
display: block;
}
html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) #rl-right .resizer {
display: none !important;
left: 0;
height: 5px;
}
}

60
dev/Styles/User/MessageList.less
View file

@ -1,6 +1,8 @@
#V-MailMessageList {
position: relative;
height: 100%;
width: 100%;
}
#V-MailMessageList.focused .messageList {
@ -357,27 +359,15 @@
}
}
html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
.message-selected #V-MailMessageList {
display: none;
}
#V-MailMessageList {
height: 100%;
width: 100%;
}
html:not(.sm-msgView-bottom):not(.sm-msgView-side) .message-selected #V-MailMessageList {
display: none;
}
@media screen and (max-width: @maxMobileWidth) {
#V-MailMessageList .btn-toolbar:not(.hasChecked) .onCheckedShow {
#V-MailMessageList .btn-toolbar:not(.hasChecked) .onCheckedShow,
#V-MailMessageList .hasChecked .onCheckedHide {
display: none;
}
#V-MailMessageList .hasChecked {
.buttonCompose,
.onCheckedHide,
.sortFolder {
display: none;
}
}
}
@media screen and (min-width: @maxMobileWidth + 1px) {
@ -396,23 +386,29 @@ html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
}
}
.rl-side-preview-pane #V-MailMessageList {
height: 100%;
}
.rl-side-preview-pane #V-MailMessageList .messageList {
max-width: 50vw;
min-width: 320px;
overflow: auto;
resize: horizontal;
width: 35vw;
.sm-msgView-side #V-MailMessageList {
width: unset;
.messageList {
max-width: 50vw;
min-width: 320px;
overflow: auto;
resize: horizontal;
width: 35vw;
}
}
.rl-bottom-preview-pane #V-MailMessageList .messageList {
height: 35vh;
max-height: 50vh;
min-height: 200px;
overflow: auto;
resize: vertical;
.sm-msgView-bottom #V-MailMessageList {
height: unset;
width: unset;
.messageList {
height: 35vh;
max-height: 50vh;
min-height: 200px;
overflow: auto;
resize: vertical;
}
}
}
@ -437,7 +433,7 @@ html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
top: 0;
}
.rl-side-preview-pane, .rl-mobile {
.sm-msgView-side, .rl-mobile {
.messageListItem > div + div {
flex-wrap: wrap;

16
dev/Styles/User/MessageView.less
View file

@ -33,7 +33,7 @@
#V-MailMessageView .top-toolbar {
color: #fff;
padding: 10px 0;
visibility: hidden;
visibility: visible;
}
.messageView {
@ -461,21 +461,19 @@
}
}
html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
html:not(.sm-msgView-bottom):not(.sm-msgView-side) {
#rl-right:not(.message-selected) #V-MailMessageView {
display: none;
}
}
html.sm-msgView-side {
#V-MailMessageView .top-toolbar {
padding-left: 1px;
visibility: visible;
}
.messageView {
border: 1px solid var(--border-color, #aaa);
box-shadow: var(--smMainShadow);
visibility: hidden;
}
}
html.rl-bottom-preview-pane {
html.sm-msgView-bottom {
#V-MailMessageView .top-toolbar {
display: none;
}

6
dev/Styles/User/OpenPgpKey.less
View file

@ -3,9 +3,10 @@
}
#V-PopupsOpenPgpKey {
.key-viewer {
pre {
margin: 0;
max-height: 500px;
padding: 0;
overflow: auto;
}
}
@ -13,9 +14,8 @@
#V-PopupsOpenPgpImport {
max-width: 645px;
.inputKey {
textarea {
font-family: var(--fontMono);
width: 600px;
}
}

21
dev/Styles/User/Settings.less
View file

@ -32,8 +32,16 @@
#V-SettingsPane {
height: calc(100% - 50px - @rlLowMargin);
margin: 50px @rlLowMargin 0 0;
padding:20px;
width: 100%;
background-color: var(--settings-bg-clr, #fff);
border: 1px solid var(--border-color, #aaa);
border-radius: var(--border-radius, 5px);
box-shadow: var(--smMainShadow);
overflow-y: auto;
scroll-behavior: smooth;
.btn-toolbar {
position: absolute;
top: 8px;
@ -46,18 +54,7 @@
}
}
#rl-settings-subscreen {
background-color: var(--settings-bg-clr, #fff);
border: 1px solid var(--border-color, #aaa);
border-radius: var(--border-radius, 5px);
box-shadow: var(--smMainShadow);
height: 100%;
overflow-y: auto;
padding:20px;
scroll-behavior: smooth;
}
.firefox-drag #rl-settings-subscreen,
.firefox-drag #V-SettingsPane,
.firefox-drag .modal-body {
overflow: hidden;
}

2
dev/Styles/_End.less
View file

@ -19,7 +19,7 @@
white-space: nowrap;
z-index: 2001;
}
@media only screen and (max-width: 600px) {
@media screen and (max-width: @maxMobileWidth) {
[data-rainloopErrorTip]::before {
min-width: 60vw;
white-space: normal;