diff --git a/README.md b/README.md index 9c5838765..563b33d36 100644 --- a/README.md +++ b/README.md @@ -90,8 +90,8 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill * Replaced *Ajax with *Fetch classes because we use the Fetch API, not jQuery.ajax * Replaced knockoutjs 3.4 with a modified 3.5.1 * Replaced knockout-sortable with native HTML5 drag&drop -* Replaced simplestatemanager with @media -* Replaced inputosaurus to native +* Replaced simplestatemanager with CSS @media +* Replaced inputosaurus with own code * Replaced keymaster with own shortcuts handler * Removed pikaday * Removed underscore @@ -113,23 +113,23 @@ RainLoop 1.15 vs SnappyMail |js/* |RainLoop |Snappy | |--------------- |--------: |--------: | -|admin.js |2.158.025 | 119.262 | -|app.js |4.215.733 | 526.403 | -|boot.js | 672.433 | 4.842 | -|libs.js | 647.679 | 232.286 | +|admin.js |2.158.025 | 119.231 | +|app.js |4.215.733 | 535.140 | +|boot.js | 672.433 | 4.713 | +|libs.js | 647.679 | 227.645 | |polyfills.js | 325.908 | 0 | |serviceworker.js | 0 | 285 | -|TOTAL |8.019.778 | 883.078 | +|TOTAL |8.019.778 | 887.014 | |js/min/* |RainLoop |Snappy |RL gzip |SM gzip |RL brotli |SM brotli | |--------------- |--------: |--------: |------: |------: |--------: |--------: | -|admin.min.js | 255.514 | 60.784 | 73.899 | 17.359 | 60.674 | 15.396 | -|app.min.js | 516.000 | 254.960 |140.430 | 73.405 |110.657 | 61.490 | -|boot.min.js | 66.456 | 2.630 | 22.553 | 1.375 | 20.043 | 1.189 | -|libs.min.js | 574.626 | 128.347 |177.280 | 46.608 |151.855 | 41.481 | +|admin.min.js | 255.514 | 61.142 | 73.899 | 17.432 | 60.674 | 15.454 | +|app.min.js | 516.000 | 261.321 |140.430 | 75.153 |110.657 | 63.151 | +|boot.min.js | 66.456 | 2.521 | 22.553 | 1.356 | 20.043 | 1.165 | +|libs.min.js | 574.626 | 120.243 |177.280 | 44.101 |151.855 | 39.263 | |polyfills.min.js | 32.608 | 0 | 11.315 | 0 | 10.072 | 0 | -|TOTAL |1.445.204 | 446.721 |425.477 |138.747 |353.301 |119.556 | -|TOTAL (no admin) |1.189.690 | 385.937 |351.061 |121.388 |292.627 |104.160 | +|TOTAL |1.445.204 | 445.227 |425.477 |138.042 |353.301 |119.033 | +|TOTAL (no admin) |1.189.690 | 384.085 |351.061 |120.610 |292.627 |103.579 | For a user its around 65% smaller and faster than traditional RainLoop. @@ -137,6 +137,8 @@ For a user its around 65% smaller and faster than traditional RainLoop. * Solve jQuery removed "features" with native css code * Cleanup unused css +* Themes work in mobile mode +* Bugfix invalid/conflicting css rules * Removed html.no-css * Removed dev/Styles/Cmd.less * Removed dev/Styles/Scroll.less @@ -153,14 +155,15 @@ For a user its around 65% smaller and faster than traditional RainLoop. * Removed vendors/jquery-nanoscroller/nanoscroller.css * Removed vendors/jquery-letterfx/jquery-letterfx.min.css * Removed vendors/Progress.js/minified/progressjs.min.css +* Removed gulp-autoprefixer |css/* |RainLoop |Snappy |RL gzip |SM gzip |SM brotli | |------------ |-------: |-------: |------: |------: |--------: | -|app.css | 340.334 | 167.876 | 46,959 | 26.292 | 22.129 | -|app.min.css | 274.791 | 136.861 | 39.618 | 23.066 | 19.978 | -|boot.css | | 2.534 | | 837 | 668 | -|boot.min.css | | 2.055 | | 732 | 560 | +|app.css | 340.334 | 158.923 | 46,959 | 25.624 | 21.575 | +|app.min.css | 274.791 | 130.398 | 39.618 | 22.404 | 19.536 | +|boot.css | | 1.820 | | 786 | 626 | +|boot.min.css | | 1.476 | | 698 | 548 | ### Squire vs CKEditor diff --git a/dev/App/Abstract.js b/dev/App/Abstract.js index 3f868ee55..b5dd1bb22 100644 --- a/dev/App/Abstract.js +++ b/dev/App/Abstract.js @@ -121,7 +121,7 @@ export class AbstractApp { initOnStartOrLangChange(); if (mobile) { - $htmlCL.add('rl-mobile'); + $htmlCL.toggle('rl-mobile', mobile); leftPanelDisabled(true); } else { window.addEventListener('resize', () => leftPanelDisabled(767 >= window.innerWidth)); diff --git a/dev/Styles/@Boot.css b/dev/Styles/@Boot.css index 80d4d3b9b..f6490ef18 100644 --- a/dev/Styles/@Boot.css +++ b/dev/Styles/@Boot.css @@ -11,7 +11,7 @@ body { } #rl-loading, #rl-loading-error { - color: var(--loading-color); + color: var(--loading-color, #000); text-shadow: var(--loading-text-shadow); font-size: 30px; line-height: 130%; @@ -30,7 +30,7 @@ body { .e-spinner .e-bounce { animation: bouncedelay 1.4s infinite ease-in-out; - background-color: var(--loading-color, #333); + background-color: var(--loading-color, #000); border-radius: 100%; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); display: inline-block; diff --git a/dev/Styles/Admin.less b/dev/Styles/Admin.less index dbd493f99..2945b501f 100644 --- a/dev/Styles/Admin.less +++ b/dev/Styles/Admin.less @@ -43,7 +43,7 @@ cursor: default; background-color: transparent; - color: var(--settings-menu-disabled-color, #888); + color: var(--settings-menu-disabled-color, #666); padding: 4px 10px; @@ -53,17 +53,17 @@ .e-item.selectable .e-link { cursor: pointer; - color: var(--settings-menu-color); + color: var(--settings-menu-color, #333); } .e-item.selectable { &:hover .e-link{ - background-color: var(--settings-menu-hover-bg-color, #555); - color: var(--settings-menu-hover-color, #fff); + background-color: var(--settings-menu-hover-bg-color, #333); + color: var(--settings-menu-hover-color, #eee); } &.selected .e-link { - background-color: var(--settings-menu-selected-bg-color, #555); - color: var(--settings-menu-selected-color, #fff); + background-color: var(--settings-menu-selected-bg-color, #333); + color: var(--settings-menu-selected-color, #eee); } } } diff --git a/dev/Styles/FolderList.less b/dev/Styles/FolderList.less index d0b458cec..bcf7938e4 100644 --- a/dev/Styles/FolderList.less +++ b/dev/Styles/FolderList.less @@ -86,7 +86,7 @@ line-height: 34px; background-color: transparent; vertical-align: middle; - color: var(--folders-disabled-color, grey); + color: var(--folders-disabled-color, #666); cursor: not-allowed; font-size: 14px; @@ -130,17 +130,17 @@ &.selectable { - color: var(--folders-color, #000); + color: var(--folders-color, #333); cursor: pointer; &:hover { - background-color: var(--folders-hover-bg-color, #555); - color: var(--folders-hover-color, #fff); + background-color: var(--folders-hover-bg-color, #333); + color: var(--folders-hover-color, #eee); } &.droppableHover { - background-color: var(--folders-drop-bg-color, #555); - color: var(--folders-drop-color, #fff); + background-color: var(--folders-drop-bg-color, #333); + color: var(--folders-drop-color, #eee); } &.droppableHover * { @@ -148,13 +148,13 @@ } &.focused { - background-color: var(--folders-focused-bg-color, #555); - color: var(--folders-focused-color, #fff); + background-color: var(--folders-focused-bg-color, #333); + color: var(--folders-focused-color, #eee); } &.selected { - background-color: var(--folders-selected-bg-color, #555); - color: var(--folders-selected-color, #fff); + background-color: var(--folders-selected-bg-color, #333); + color: var(--folders-selected-color, #eee); } } diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less index f30a2f492..87638efa8 100644 --- a/dev/Styles/Layout.less +++ b/dev/Styles/Layout.less @@ -384,7 +384,7 @@ html.rl-bottom-preview-pane { left: 0; right: 5px; box-shadow: none; - background-color: var(--message-bg-color); + background-color: var(--message-bg-color, #fff); } } } diff --git a/dev/Styles/Login.less b/dev/Styles/Login.less index 4e5b241ae..f7d93b06b 100644 --- a/dev/Styles/Login.less +++ b/dev/Styles/Login.less @@ -26,7 +26,7 @@ .desc { font-size: 30px; - color: var(--loading-color); + color: var(--loading-color, #000); text-shadow: var(--loading-text-shadow); } } @@ -34,7 +34,7 @@ .loginForm { background-color: var(--login-bg-color, rgba(0, 0, 0, .5)); border: var(--login-border, 1px solid rgba(255, 255, 255, .2)); - border-radius: var(--login-border-radius); + border-radius: var(--login-border-radius, 7px); box-shadow: var(--login-box-shadow); margin: 0; } @@ -206,7 +206,7 @@ right: 0; bottom: 0; background: var(---spinner-bg, rgba(0,0,0,.3)); - border-radius: var(--login-border-radius); + border-radius: var(--login-border-radius, 7px); z-index: 1051; border-radius: 8px; } diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less index e6015e714..1b03d2a7e 100644 --- a/dev/Styles/Main.less +++ b/dev/Styles/Main.less @@ -15,9 +15,8 @@ html, body { body { background-color: var(--main-bg-color, #e3e3e3); - background-image: var(--main-bg-image); background-size: var(--main-bg-size); - color: var(--main-color, #000); + color: var(--main-color, #333); -webkit-touch-callout: none; @@ -28,6 +27,15 @@ body { right: 0; } +/* +.rl-mobile / .no-mobile +*/ +@media screen and (min-width: 1000px) { + body { + background-image: var(--main-bg-image); + } +} + textarea { resize: none; } @@ -39,9 +47,6 @@ option:disabled { *, select:focus { outline: none; -} - -html.mobile *, html.rl-mobile * { -webkit-tap-highlight-color: rgba(0,0,0,0); } diff --git a/dev/Styles/Settings.less b/dev/Styles/Settings.less index 8630ffaac..9a0850ea3 100644 --- a/dev/Styles/Settings.less +++ b/dev/Styles/Settings.less @@ -52,7 +52,7 @@ cursor: default; background-color: transparent; - color: var(--settings-menu-disabled-color, #888); + color: var(--settings-menu-disabled-color, #666); padding: 4px 10px; @@ -62,17 +62,17 @@ .e-item.selectable .e-link { cursor: pointer; - color: var(--settings-menu-color); + color: var(--settings-menu-color, #333); } .e-item.selectable { &:hover .e-link{ - background-color: var(--settings-menu-hover-bg-color, #555); - color: var(--settings-menu-hover-color, #fff); + background-color: var(--settings-menu-hover-bg-color, #333); + color: var(--settings-menu-hover-color, #eee); } &.selected .e-link { - background-color: var(--settings-menu-selected-bg-color, #555); - color: var(--settings-menu-selected-color, #fff); + background-color: var(--settings-menu-selected-bg-color, #333); + color: var(--settings-menu-selected-color, #eee); } } } diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index d6e6ea46f..1bab8d0b2 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -31,19 +31,19 @@ .e-link { text-decoration: none; cursor: pointer; - color: var(--dropdown-menu-color); - background-color: var(--dropdown-menu-background-color); + color: var(--dropdown-menu-color, #333); + background-color: var(--dropdown-menu-bg-color, #fff); } .e-item.selected > .e-link { - background-color: var(--dropdown-menu-selected-background-color, #eee) !important; + background-color: var(--dropdown-menu-selected-bg-color, #eee) !important; } .e-item:not(.disabled) > .e-link:focus, .e-item:not(.disabled) > .e-link:hover { - background-color: var(--dropdown-menu-hover-background-color, #555); + background-color: var(--dropdown-menu-hover-bg-color, #444); background-image: none; - color: var(--dropdown-menu-hover-color, #fff); + color: var(--dropdown-menu-hover-color, #eee); } .e-item.disabled > .e-link { diff --git a/dev/boot.js b/dev/boot.js index 12e1794e4..451c746fc 100644 --- a/dev/boot.js +++ b/dev/boot.js @@ -4,7 +4,6 @@ const doc = document, eId = id => doc.getElementById(id), - htmlCL = doc.documentElement.classList, app = eId('rl-app'), options = app && app.dataset.boot && JSON.parse(app.dataset.boot) || {}, @@ -171,8 +170,6 @@ Storage('local'); // init section setInterval(setTimestamp, 60000); // 1m -htmlCL.add(options.mobileDevice ? 'mobile' : 'no-mobile'); - [eId('app-css'),eId('app-theme-link')].forEach(css => css.href = css.dataset.href); loadScript('./?/' diff --git a/snappymail/v/0.0.0/app/libraries/RainLoop/Actions.php b/snappymail/v/0.0.0/app/libraries/RainLoop/Actions.php index da9b2d292..32c71cd66 100644 --- a/snappymail/v/0.0.0/app/libraries/RainLoop/Actions.php +++ b/snappymail/v/0.0.0/app/libraries/RainLoop/Actions.php @@ -1016,7 +1016,7 @@ class Actions 'folderSpecLimit' => (int)$oConfig->Get('labs', 'folders_spec_limit', 50), 'faviconStatus' => (bool)$oConfig->Get('labs', 'favicon_status', true), 'listPermanentFiltered' => '' !== \trim(Api::Config()->Get('labs', 'imap_message_list_permanent_filter', '')), - 'themes' => $this->GetThemes($bMobile, false), + 'themes' => $this->GetThemes(), 'languages' => $this->GetLanguages(false), 'languagesAdmin' => $this->GetLanguages(true), 'attachmentsActions' => $aAttachmentsActions @@ -1097,7 +1097,7 @@ class Actions 'ParentEmail' => '', 'InterfaceAnimation' => true, 'UserBackgroundName' => '', - 'UserBackgroundHash' => '', + 'UserBackgroundHash' => '' ); if (0 < \strlen($sAuthAccountHash)) { @@ -1282,7 +1282,7 @@ class Actions } } - $sTheme = $this->ValidateTheme($sTheme, $bMobile); + $sTheme = $this->ValidateTheme($sTheme); $sStaticCache = $this->StaticCache(); $aResult['Theme'] = $sTheme; @@ -2082,7 +2082,7 @@ class Actions $aResult[] = Enumerations\Capa::TEMPLATES; } - if ($oConfig->Get('webmail', 'allow_themes', false) && !$bMobile) { + if ($oConfig->Get('webmail', 'allow_themes', false)) { $aResult[] = Enumerations\Capa::THEMES; } @@ -2233,14 +2233,10 @@ class Actions return './?/Css/0/' . ($bAdmin ? 'Admin' : 'User') . '/-/' . $sTheme . '/-/' . $this->StaticCache() . '/Hash/-/'; } - public function ValidateTheme(string $sTheme, bool $bMobile = false): string + public function ValidateTheme(string $sTheme): string { - if ($bMobile) { - return 'Mobile'; - } - - return \in_array($sTheme, $this->GetThemes($bMobile)) ? - $sTheme : $this->Config()->Get('themes', 'default', $bMobile ? 'Mobile' : 'Default'); + return \in_array($sTheme, $this->GetThemes()) ? + $sTheme : $this->Config()->Get('themes', 'default', 'Default'); } public function ValidateLanguage(string $sLanguage, string $sDefault = '', bool $bAdmin = false, bool $bAllowEmptyResult = false): string @@ -2296,22 +2292,16 @@ class Actions /** * @staticvar array $aCache */ - public function GetThemes(bool $bMobile = false, bool $bIncludeMobile = true): array + public function GetThemes(): array { - if ($bMobile) { - return array('Mobile'); - } - - static $aCache = array('full' => null, 'mobile' => null); - if ($bIncludeMobile && \is_array($aCache['full'])) { - return $aCache['full']; - } else if ($bIncludeMobile && \is_array($aCache['mobile'])) { - return $aCache['mobile']; + static $aCache = array(); + if ($aCache) { + return $aCache; } $bClear = false; $bDefault = false; - $sList = array(); + $aCache = array(); $sDir = APP_VERSION_ROOT_PATH . 'themes'; if (\is_dir($sDir)) { $rDirH = \opendir($sDir); @@ -2322,8 +2312,8 @@ class Actions $bDefault = true; } else if ('Clear' === $sFile) { $bClear = true; - } else if ($bIncludeMobile || 'Mobile' !== $sFile) { - $sList[] = $sFile; + } else { + $aCache[] = $sFile; } } } @@ -2337,7 +2327,7 @@ class Actions if ($rDirH) { while (($sFile = \readdir($rDirH)) !== false) { if ('.' !== $sFile[0] && \is_dir($sDir . '/' . $sFile) && \file_exists($sDir . '/' . $sFile . '/styles.less')) { - $sList[] = $sFile . '@custom'; + $aCache[] = $sFile . '@custom'; } } @@ -2345,19 +2335,18 @@ class Actions } } - $sList = \array_unique($sList); - \sort($sList); + $aCache = \array_unique($aCache); + \sort($aCache); if ($bDefault) { - \array_unshift($sList, 'Default'); + \array_unshift($aCache, 'Default'); } if ($bClear) { - \array_push($sList, 'Clear'); + \array_push($aCache, 'Clear'); } - $aCache[$bIncludeMobile ? 'full' : 'mobile'] = $sList; - return $sList; + return $aCache; } /** @@ -2445,7 +2434,7 @@ class Actions \header('Location: ' . $sUrl); } - public function GetLanguageAndTheme(bool $bAdmin = false, bool $bMobile = false): array + public function GetLanguageAndTheme(bool $bAdmin = false): array { $sTheme = $this->Config()->Get('webmail', 'theme', 'Default'); @@ -2470,7 +2459,7 @@ class Actions } $sLanguage = $this->ValidateLanguage($sLanguage, '', $bAdmin); - $sTheme = $this->ValidateTheme($sTheme, $bMobile); + $sTheme = $this->ValidateTheme($sTheme); return array($sLanguage, $sTheme); } diff --git a/snappymail/v/0.0.0/app/libraries/RainLoop/Service.php b/snappymail/v/0.0.0/app/libraries/RainLoop/Service.php index a264d2147..246b10160 100644 --- a/snappymail/v/0.0.0/app/libraries/RainLoop/Service.php +++ b/snappymail/v/0.0.0/app/libraries/RainLoop/Service.php @@ -267,17 +267,17 @@ class Service '{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr', '{{BaseAppManifestLink}}' => $this->staticPath('manifest.json'), '{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot.min.css'), - '{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8') + '{{BaseCssClass}}' => ($bMobileDevice ? 'mobile' : 'no-mobile') . ($bMobile ? ' rl-mobile' : ''), + '{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8'), + '{{RainloopBootData}}' => \json_encode(array( + 'admin' => $bAdmin, + 'language' => $sLanguage, + 'theme' => $sTheme, + 'mobile' => $bMobile, + 'mobileDevice' => $bMobileDevice + )) ); - $aTemplateParameters['{{RainloopBootData}}'] = \json_encode(array( - 'admin' => $bAdmin, - 'language' => $sLanguage, - 'theme' => $sTheme, - 'mobile' => $bMobile, - 'mobileDevice' => $bMobileDevice - )); - $aTemplateParameters['{{BaseHash}}'] = \md5( \implode('~', array( $bAdmin ? '1' : '0', diff --git a/snappymail/v/0.0.0/app/libraries/RainLoop/ServiceActions.php b/snappymail/v/0.0.0/app/libraries/RainLoop/ServiceActions.php index b04980e94..d86440e89 100644 --- a/snappymail/v/0.0.0/app/libraries/RainLoop/ServiceActions.php +++ b/snappymail/v/0.0.0/app/libraries/RainLoop/ServiceActions.php @@ -625,18 +625,13 @@ class ServiceActions $sThemeFile = ($bCustomTheme ? APP_INDEX_ROOT_PATH : APP_VERSION_ROOT_PATH).'themes/'.$sRealTheme.'/styles.less'; - $sThemeValuesFile = APP_VERSION_ROOT_PATH.'app/templates/Themes/values.less'; - $sThemeTemplateFile = APP_VERSION_ROOT_PATH.'app/templates/Themes/template.less'; - - if (\is_file($sThemeFile) && \is_file($sThemeTemplateFile) && \is_file($sThemeValuesFile)) + if (\is_file($sThemeFile)) { $aResult[] = '@base: "' . ($bCustomTheme ? Utils::WebPath() : Utils::WebVersionPath()) . 'themes/'.$sRealTheme.'/";'; - $aResult[] = \file_get_contents($sThemeValuesFile); $aResult[] = \file_get_contents($sThemeFile); - $aResult[] = \file_get_contents($sThemeTemplateFile); } $aResult[] = $this->Plugins()->CompileCss($bAdmin); diff --git a/snappymail/v/0.0.0/app/templates/Index.html b/snappymail/v/0.0.0/app/templates/Index.html index 40e631ace..bfc8768a8 100644 --- a/snappymail/v/0.0.0/app/templates/Index.html +++ b/snappymail/v/0.0.0/app/templates/Index.html @@ -1,5 +1,5 @@ - +