From 91b4ff16bd1e9a9fbf892217f88607e3c5902a3a Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Fri, 24 Feb 2023 11:45:26 +0100
Subject: [PATCH] Reduce/simplify CSS footprint
---
dev/Screen/AbstractSettings.js | 5 +-
dev/Screen/User/Settings.js | 2 +-
dev/Stores/User/Settings.js | 4 +-
dev/Styles/Admin/Layout.less | 22 +++----
dev/Styles/Languages.less | 2 +-
dev/Styles/Ui.less | 1 -
dev/Styles/User/AdvancedSearch.less | 2 +-
dev/Styles/User/Contacts.less | 2 +-
dev/Styles/User/FolderList.less | 21 +++----
dev/Styles/User/Layout.less | 37 +++++-------
dev/Styles/User/MessageList.less | 60 +++++++++----------
dev/Styles/User/MessageView.less | 16 +++--
dev/Styles/User/OpenPgpKey.less | 6 +-
dev/Styles/User/Settings.less | 21 +++----
dev/Styles/_End.less | 2 +-
.../app/libraries/snappymail/http/csp.php | 3 +
.../app/templates/Views/Admin/AdminPane.html | 1 -
.../templates/Views/User/MailMessageList.html | 4 +-
.../Views/User/PopupsOpenPgpImport.html | 4 +-
.../Views/User/PopupsOpenPgpKey.html | 6 +-
.../templates/Views/User/SettingsPane.html | 1 -
.../v/0.0.0/themes/BlackWood/styles.css | 2 +-
.../v/0.0.0/themes/BlurredDark/styles.css | 2 +-
snappymail/v/0.0.0/themes/LoveDark/styles.css | 2 +-
.../v/0.0.0/themes/NightShine/styles.css | 2 +-
.../v/0.0.0/themes/SnowDarkV1/styles.css | 2 +-
.../v/0.0.0/themes/SquaresDark/styles.css | 2 +-
.../v/0.0.0/themes/StripesDark/styles.css | 2 +-
28 files changed, 102 insertions(+), 134 deletions(-)
diff --git a/dev/Screen/AbstractSettings.js b/dev/Screen/AbstractSettings.js
index 4b8c9d6c6..351453faa 100644
--- a/dev/Screen/AbstractSettings.js
+++ b/dev/Screen/AbstractSettings.js
@@ -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) {
diff --git a/dev/Screen/User/Settings.js b/dev/Screen/User/Settings.js
index 11a87eca6..1bd88707e 100644
--- a/dev/Screen/User/Settings.js
+++ b/dev/Screen/User/Settings.js
@@ -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
diff --git a/dev/Stores/User/Settings.js b/dev/Stores/User/Settings.js
index 600403eea..39b91edae 100644
--- a/dev/Stores/User/Settings.js
+++ b/dev/Stores/User/Settings.js
@@ -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);
diff --git a/dev/Styles/Admin/Layout.less b/dev/Styles/Admin/Layout.less
index f3be4c0aa..f541d78e7 100644
--- a/dev/Styles/Admin/Layout.less
+++ b/dev/Styles/Admin/Layout.less
@@ -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;
}
diff --git a/dev/Styles/Languages.less b/dev/Styles/Languages.less
index 69a962767..ae5b95eb7 100644
--- a/dev/Styles/Languages.less
+++ b/dev/Styles/Languages.less
@@ -34,7 +34,7 @@
}
}
-@media screen and (max-width: 733px) {
+@media screen and (max-width: 480px) {
#V-PopupsLanguages label {
width: 100%;
}
diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less
index 7d617bdd5..13013e962 100644
--- a/dev/Styles/Ui.less
+++ b/dev/Styles/Ui.less
@@ -1,5 +1,4 @@
-#rl-settings-subscreen,
.g-ui-user-select-none {
user-select: none;
-webkit-touch-callout: none;
diff --git a/dev/Styles/User/AdvancedSearch.less b/dev/Styles/User/AdvancedSearch.less
index cac4a1c1f..005e02f57 100644
--- a/dev/Styles/User/AdvancedSearch.less
+++ b/dev/Styles/User/AdvancedSearch.less
@@ -10,7 +10,7 @@
margin-right:1em;
}
-@media screen and (max-width: 410px) {
+@media screen and (max-width: 480px) {
#advancedsearchform label {
width: 100%;
}
diff --git a/dev/Styles/User/Contacts.less b/dev/Styles/User/Contacts.less
index b577739f8..67857248e 100644
--- a/dev/Styles/User/Contacts.less
+++ b/dev/Styles/User/Contacts.less
@@ -203,7 +203,7 @@
}
}
-@media screen and (max-width: 900px) {
+@media screen and (max-width: @maxMobileWidth) {
#V-PopupsContacts {
width: 100%;
}
diff --git a/dev/Styles/User/FolderList.less b/dev/Styles/User/FolderList.less
index 00786aa19..a05c97293 100644
--- a/dev/Styles/User/FolderList.less
+++ b/dev/Styles/User/FolderList.less
@@ -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;
- }
}
diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less
index 129ac5338..4f6bf4487 100644
--- a/dev/Styles/User/Layout.less
+++ b/dev/Styles/User/Layout.less
@@ -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;
}
}
diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less
index b8a494051..4073e835f 100644
--- a/dev/Styles/User/MessageList.less
+++ b/dev/Styles/User/MessageList.less
@@ -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;
diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less
index 916ecbdaf..b9a90741b 100644
--- a/dev/Styles/User/MessageView.less
+++ b/dev/Styles/User/MessageView.less
@@ -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;
}
diff --git a/dev/Styles/User/OpenPgpKey.less b/dev/Styles/User/OpenPgpKey.less
index c318b157d..c7404e6ab 100644
--- a/dev/Styles/User/OpenPgpKey.less
+++ b/dev/Styles/User/OpenPgpKey.less
@@ -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;
-
}
}
diff --git a/dev/Styles/User/Settings.less b/dev/Styles/User/Settings.less
index 257401640..aba093cfc 100644
--- a/dev/Styles/User/Settings.less
+++ b/dev/Styles/User/Settings.less
@@ -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;
}
diff --git a/dev/Styles/_End.less b/dev/Styles/_End.less
index 00d0219b0..ee0cb55a4 100644
--- a/dev/Styles/_End.less
+++ b/dev/Styles/_End.less
@@ -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;
diff --git a/snappymail/v/0.0.0/app/libraries/snappymail/http/csp.php b/snappymail/v/0.0.0/app/libraries/snappymail/http/csp.php
index 5141fce03..5f49b1101 100644
--- a/snappymail/v/0.0.0/app/libraries/snappymail/http/csp.php
+++ b/snappymail/v/0.0.0/app/libraries/snappymail/http/csp.php
@@ -50,6 +50,9 @@ class CSP
foreach ($this->directives as $directive => $sources) {
$params[] = $directive . ' ' . \implode(' ', \array_unique($sources));
}
+// if (empty($this->directives['frame-ancestors'])) {
+// $params[] = "frame-ancestors 'none';";
+// }
return \implode('; ', $params);
}
diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
index dc46592eb..d9f410e46 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
@@ -3,4 +3,3 @@
SnappyMail -
⏻
-
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
index f454239c2..b49b95dd1 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
@@ -1,6 +1,6 @@
-