diff --git a/dev/Stores/User/Message.js b/dev/Stores/User/Message.js index 4ce1bf0eb..f36fe51d6 100644 --- a/dev/Stores/User/Message.js +++ b/dev/Stores/User/Message.js @@ -2,7 +2,7 @@ import ko from 'ko'; import { Scope, Notification } from 'Common/Enums'; import { MessageSetAction } from 'Common/EnumsUser'; -import { doc, createElement, elementById } from 'Common/Globals'; +import { doc, $htmlCL, createElement, elementById } from 'Common/Globals'; import { isNonEmptyArray, pInt, pString, addObservablesTo, addSubscribablesTo } from 'Common/Utils'; import { plainToHtml } from 'Common/UtilsUser'; @@ -186,6 +186,8 @@ export const MessageUserStore = new class { } }, + listLoadingAnimation: value => $htmlCL.toggle('list-loading', value), + listLoading: value => this.listCompleteLoading(value || this.listIsNotCompleted()), diff --git a/dev/Styles/@Admin.less b/dev/Styles/@Admin.less index c8eb37181..83cab6e63 100644 --- a/dev/Styles/@Admin.less +++ b/dev/Styles/@Admin.less @@ -23,20 +23,19 @@ @import "Ui.less"; @import "Main.less"; -@import "LayoutAdmin.less"; @import "Components.less"; @import "Login.less"; @import "Ask.less"; @import "Languages.less"; -@import "Admin.less"; -@import "AdminGeneral.less"; -@import "AdminBranding.less"; -@import "AdminDomains.less"; -@import "AdminDomain.less"; -@import "AdminPackages.less"; -@import "AdminPlugin.less"; -@import "AdminAbout.less"; +@import "Admin/Layout.less"; +@import "Admin/General.less"; +@import "Admin/Branding.less"; +@import "Admin/Domains.less"; +@import "Admin/Domain.less"; +@import "Admin/Packages.less"; +@import "Admin/Plugin.less"; +@import "Admin/About.less"; @import "Animations.less"; diff --git a/dev/Styles/@Main.less b/dev/Styles/@Main.less index b46372da1..fb03732ad 100644 --- a/dev/Styles/@Main.less +++ b/dev/Styles/@Main.less @@ -24,45 +24,39 @@ @import "Ui.less"; @import "Main.less"; -@import "Layout.less"; @import "Components.less"; @import "Login.less"; @import "Ask.less"; @import "Languages.less"; -@import "SystemDropDown.less"; -@import "Shortcuts.less"; -@import "FolderList.less"; -/* -@import "FolderClear.less"; -@import "FolderCreate.less"; -@import "FolderSystem.less"; -@import "Account.less"; -*/ -@import "Filter.less"; -@import "Template.less"; -@import "OpenPgpKey.less"; -@import "Identity.less"; -@import "AdvancedSearch.less"; -@import "Attachmnets.less"; -@import "MessageList.less"; -@import "MessageView.less"; -@import "Contacts.less"; -@import "Compose.less"; -@import "EmailAddresses.less"; +@import "User/Layout.less"; +@import "User/SystemDropDown.less"; +@import "User/Shortcuts.less"; +@import "User/FolderList.less"; +@import "User/Filter.less"; +@import "User/Template.less"; +@import "User/OpenPgpKey.less"; +@import "User/Identity.less"; +@import "User/AdvancedSearch.less"; +@import "User/Attachmnets.less"; +@import "User/MessageList.less"; +@import "User/MessageView.less"; +@import "User/Contacts.less"; +@import "User/Compose.less"; +@import "User/EmailAddresses.less"; -@import "Settings.less"; -@import "SettingsGeneral.less"; -@import "SettingsAccounts.less"; -@import "SettingsTemplates.less"; -@import "SettingsOpenPGP.less"; -@import "SettingsFolders.less"; -@import "SettingsThemes.less"; -@import "SettingsFilters.less"; +@import "User/Settings.less"; +@import "User/SettingsGeneral.less"; +@import "User/SettingsAccounts.less"; +@import "User/SettingsTemplates.less"; +@import "User/SettingsOpenPGP.less"; +@import "User/SettingsFolders.less"; +@import "User/SettingsThemes.less"; +@import "User/SettingsFilters.less"; -@import "SquireUI.less"; +@import "User/SquireUI.less"; -@import "AnimationsUser.less"; +@import "User/Animations.less"; @import "Animations.less"; @import "_End.less"; diff --git a/dev/Styles/Account.less b/dev/Styles/Account.less deleted file mode 100644 index f233b3c39..000000000 --- a/dev/Styles/Account.less +++ /dev/null @@ -1,4 +0,0 @@ -.b-account-add-content { - .modal-header { - } -} diff --git a/dev/Styles/AdminAbout.less b/dev/Styles/Admin/About.less similarity index 100% rename from dev/Styles/AdminAbout.less rename to dev/Styles/Admin/About.less diff --git a/dev/Styles/AdminBranding.less b/dev/Styles/Admin/Branding.less similarity index 100% rename from dev/Styles/AdminBranding.less rename to dev/Styles/Admin/Branding.less diff --git a/dev/Styles/AdminDomain.less b/dev/Styles/Admin/Domain.less similarity index 94% rename from dev/Styles/AdminDomain.less rename to dev/Styles/Admin/Domain.less index 79ec859dc..4abc8f78a 100644 --- a/dev/Styles/AdminDomain.less +++ b/dev/Styles/Admin/Domain.less @@ -1,6 +1,6 @@ .b-domain-alias-content { &.modal { - width: 330px; + max-width: 330px; } .error-desc { @@ -11,7 +11,7 @@ .b-domain-content { &.modal { - width: 810px; + max-width: 810px; } .modal-body { diff --git a/dev/Styles/AdminDomains.less b/dev/Styles/Admin/Domains.less similarity index 100% rename from dev/Styles/AdminDomains.less rename to dev/Styles/Admin/Domains.less diff --git a/dev/Styles/AdminGeneral.less b/dev/Styles/Admin/General.less similarity index 100% rename from dev/Styles/AdminGeneral.less rename to dev/Styles/Admin/General.less diff --git a/dev/Styles/Admin.less b/dev/Styles/Admin/Layout.less similarity index 51% rename from dev/Styles/Admin.less rename to dev/Styles/Admin/Layout.less index e166a3cc5..59da0863c 100644 --- a/dev/Styles/Admin.less +++ b/dev/Styles/Admin/Layout.less @@ -1,7 +1,25 @@ +.UserBackground body { + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +#rl-left, #rl-right { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 0; + margin: 0; + border: 0; + z-index: 0; +} #rl-left { overflow: auto; padding-top: 50px + @rlLowMargin + 10px; + width: @rlLeftWidth; nav { a { @@ -26,6 +44,11 @@ } } +#rl-right { + z-index: 1; + left: @rlLeftWidth; +} + .b-admin-right { .b-toolbar { @@ -67,3 +90,56 @@ padding-left: 12px; padding-right: 12px; } + +#rl-popups > .rl-view-model { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1100; + overflow: auto; + background-color: rgba(0,0,0,0.3); +} + +#rl-settings-subscreen { + padding: 20px; +} + +/* desktop */ +@media screen and (min-width: 1000px) { + .toggleLeft { + display: none; + } +} + +/* desktop-large */ +@media screen and (min-width: 1401px) { + #rl-left { + width: @rlLeftWidth + 20; + } + + #rl-right { + left: @rlLeftWidth + 20; + } +} + +/* mobile and tablet */ +@media screen and (max-width: 999px) { + #rl-settings-subscreen { + padding: 10px; + } + + html:not(.rl-left-panel-disabled) #rl-right { + right: 5-@rlLeftWidth; + } + + html.rl-left-panel-disabled { + #rl-left { + width: 0 !important; + } + #rl-right { + left: 5px !important; + } + } +} diff --git a/dev/Styles/AdminPackages.less b/dev/Styles/Admin/Packages.less similarity index 100% rename from dev/Styles/AdminPackages.less rename to dev/Styles/Admin/Packages.less diff --git a/dev/Styles/AdminPlugin.less b/dev/Styles/Admin/Plugin.less similarity index 93% rename from dev/Styles/AdminPlugin.less rename to dev/Styles/Admin/Plugin.less index 94b45b005..9cda5bf21 100644 --- a/dev/Styles/AdminPlugin.less +++ b/dev/Styles/Admin/Plugin.less @@ -1,7 +1,7 @@ .b-plugin-content { &.modal { - width: 660px; + max-width: 660px; } .modal-body { diff --git a/dev/Styles/AdminPlugins.less b/dev/Styles/AdminPlugins.less deleted file mode 100644 index 35e2f916b..000000000 --- a/dev/Styles/AdminPlugins.less +++ /dev/null @@ -1,24 +0,0 @@ - -.b-admin-plugins-list-table { - max-width: 620px; /* span8 */ - - &.disabled { - opacity: 0.5; - } - - .disabled { - opacity: 0.5; - } -} - -.b-admin-plugin-property { - .help-block { - display: block; // account for any element using help-block - font-style: italic; - opacity: 0.5; - margin-bottom: 5px; - } - .controls { - width: 470px; - } -} diff --git a/dev/Styles/FolderClear.less b/dev/Styles/FolderClear.less deleted file mode 100644 index 8089f0de6..000000000 --- a/dev/Styles/FolderClear.less +++ /dev/null @@ -1,4 +0,0 @@ -.b-folder-clear-content { - .modal-header { - } -} diff --git a/dev/Styles/FolderCreate.less b/dev/Styles/FolderCreate.less deleted file mode 100644 index 2b2be8b48..000000000 --- a/dev/Styles/FolderCreate.less +++ /dev/null @@ -1,4 +0,0 @@ -.b-folder-create-content { - .modal-header { - } -} diff --git a/dev/Styles/FolderSystem.less b/dev/Styles/FolderSystem.less deleted file mode 100644 index 4a5f64d25..000000000 --- a/dev/Styles/FolderSystem.less +++ /dev/null @@ -1,4 +0,0 @@ -.b-folder-system-content { - .modal-header { - } -} diff --git a/dev/Styles/Languages.less b/dev/Styles/Languages.less index e84676baf..25dd109c9 100644 --- a/dev/Styles/Languages.less +++ b/dev/Styles/Languages.less @@ -1,16 +1,15 @@ .b-languages-content { &.modal { - width: 700px; + max-width: 700px; } - .lang-item { + label { display: inline-block; padding: 5px 15px; margin: 2px 5px; width: 180px; background-color: rgba(128, 128, 128, 0.1); - text-align: left; border: 1px solid transparent; border-radius: 3px; position: relative; @@ -26,7 +25,6 @@ } &.selected::after { content: "✔"; - color: #080; position: absolute; right: 4px; font-family: snappymail; @@ -39,7 +37,7 @@ } @media screen and (max-width: 999px) { - .b-languages-content .lang-item { + .b-languages-content label { width: calc(100% - 40px); } } diff --git a/dev/Styles/LayoutAdmin.less b/dev/Styles/LayoutAdmin.less deleted file mode 100644 index dafda8c50..000000000 --- a/dev/Styles/LayoutAdmin.less +++ /dev/null @@ -1,80 +0,0 @@ - -.UserBackground body { - background-size: contain; - background-repeat: no-repeat; - background-position: center; -} - -#rl-left, #rl-right { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - padding: 0; - margin: 0; - border: 0; - z-index: 0; -} - -#rl-left { - width: @rlLeftWidth; -} - -#rl-right { - z-index: 1; - left: @rlLeftWidth; -} - -#rl-popups > .rl-view-model { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1100; - overflow: auto; - background-color: rgba(0,0,0,0.3); -} - -#rl-settings-subscreen { - padding: 20px; -} - -/* desktop */ -@media screen and (min-width: 1000px) { - .toggleLeft { - display: none; - } -} - -/* desktop-large */ -@media screen and (min-width: 1401px) { - #rl-left { - width: @rlLeftWidth + 20; - } - - #rl-right { - left: @rlLeftWidth + 20; - } -} - -/* mobile and tablet */ -@media screen and (max-width: 999px) { - #rl-settings-subscreen { - padding: 10px; - } - - html:not(.rl-left-panel-disabled) #rl-right { - right: 5-@rlLeftWidth; - } - - html.rl-left-panel-disabled { - #rl-left { - width: 0 !important; - } - #rl-right { - left: 5px !important; - } - } -} diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less index 62ba75249..8600d1fd0 100644 --- a/dev/Styles/Main.less +++ b/dev/Styles/Main.less @@ -20,6 +20,11 @@ body { right: 0; } +html.list-loading body { +/* cursor: wait;*/ + cursor: progress; +} + html:not(.rl-mobile) { min-width: 700px; } @@ -32,10 +37,6 @@ html:not(.rl-mobile) { } } -textarea { - resize: none; -} - option:disabled { color: #aaa; cursor: not-allowed; diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index 86e39f5ca..8387e010f 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -16,32 +16,6 @@ } } -.e-paginator { - - .e-page { - - display: inline-block; - opacity: 0.5; - text-decoration: none; - font-size: 22px; - padding: 3px; - cursor: pointer; - - &:hover { - opacity: 0.8; - } - - &.current { - opacity: 1; - } - - &.current .e-page-number { - font-size: 115%; - text-decoration: underline; - } - } -} - .settings-save-trigger { display: inline-block; @@ -93,25 +67,6 @@ textarea + .settings-save-trigger { } } -.e-languages { - - margin-top: 8px; - color: #333; - - .flag-name { - - color: #333; - border-bottom: 1px dashed #333; - cursor: pointer; - padding: 2px 0; - - &:focus { - outline: 1px; - outline-style: dotted; - } - } -} - .e-action { cursor: pointer; } diff --git a/dev/Styles/AdvancedSearch.less b/dev/Styles/User/AdvancedSearch.less similarity index 84% rename from dev/Styles/AdvancedSearch.less rename to dev/Styles/User/AdvancedSearch.less index 5ffb11241..b32ac75d0 100644 --- a/dev/Styles/AdvancedSearch.less +++ b/dev/Styles/User/AdvancedSearch.less @@ -1,6 +1,6 @@ .b-advanced-search-content { &.modal { - width: 780px; + max-width: 780px; } .control-label { width: 110px; diff --git a/dev/Styles/AnimationsUser.less b/dev/Styles/User/Animations.less similarity index 92% rename from dev/Styles/AnimationsUser.less rename to dev/Styles/User/Animations.less index c465208b1..4f1a410f3 100644 --- a/dev/Styles/AnimationsUser.less +++ b/dev/Styles/User/Animations.less @@ -43,15 +43,6 @@ transition: opacity 0.3s linear; } - .messageList { - .messageListItem { - transition: max-height 400ms ease; - } - .listDragOver { - transition: all 400ms ease; - } - } - .b-list-content { .e-contact-item { transition: max-height 400ms ease; diff --git a/dev/Styles/Attachmnets.less b/dev/Styles/User/Attachmnets.less similarity index 100% rename from dev/Styles/Attachmnets.less rename to dev/Styles/User/Attachmnets.less diff --git a/dev/Styles/Compose.less b/dev/Styles/User/Compose.less similarity index 100% rename from dev/Styles/Compose.less rename to dev/Styles/User/Compose.less diff --git a/dev/Styles/Contacts.less b/dev/Styles/User/Contacts.less similarity index 100% rename from dev/Styles/Contacts.less rename to dev/Styles/User/Contacts.less diff --git a/dev/Styles/EmailAddresses.less b/dev/Styles/User/EmailAddresses.less similarity index 100% rename from dev/Styles/EmailAddresses.less rename to dev/Styles/User/EmailAddresses.less diff --git a/dev/Styles/Filter.less b/dev/Styles/User/Filter.less similarity index 100% rename from dev/Styles/Filter.less rename to dev/Styles/User/Filter.less diff --git a/dev/Styles/FolderList.less b/dev/Styles/User/FolderList.less similarity index 100% rename from dev/Styles/FolderList.less rename to dev/Styles/User/FolderList.less diff --git a/dev/Styles/Identity.less b/dev/Styles/User/Identity.less similarity index 91% rename from dev/Styles/Identity.less rename to dev/Styles/User/Identity.less index 2d1b25209..416f324df 100644 --- a/dev/Styles/Identity.less +++ b/dev/Styles/User/Identity.less @@ -1,7 +1,7 @@ .b-identity-content { &.modal { - width: 770px; + max-width: 770px; } .modal-body { diff --git a/dev/Styles/Layout.less b/dev/Styles/User/Layout.less similarity index 95% rename from dev/Styles/Layout.less rename to dev/Styles/User/Layout.less index 75d81edd8..0a2f88f13 100644 --- a/dev/Styles/Layout.less +++ b/dev/Styles/User/Layout.less @@ -371,3 +371,24 @@ html:not(.rl-mobile) .show-mobile { html.rl-mobile .width100-on-mobile { width: 100% !important; } + +.e-paginator { + + .e-page { + opacity: 0.5; + text-decoration: none; + font-size: 22px; + padding: 3px; + cursor: pointer; + + &:hover { + opacity: 0.8; + } + + &.current { + opacity: 1; + font-size: 25px; + cursor: default; + } + } +} diff --git a/dev/Styles/MessageList.less b/dev/Styles/User/MessageList.less similarity index 58% rename from dev/Styles/MessageList.less rename to dev/Styles/User/MessageList.less index 10bda6872..af2c0c547 100644 --- a/dev/Styles/MessageList.less +++ b/dev/Styles/User/MessageList.less @@ -198,215 +198,6 @@ html.rl-no-preview-pane { } } - .messageListItem { - - position: relative; - font-size: 12px; - overflow: hidden; - cursor: pointer; - - margin: 0; - padding: 5px 0; - border: 0; - border-bottom: 1px solid rgba(153, 153, 153, 0.2); - border-left: 6px solid #eee; - - z-index: 100; - - &.focused { - background-color: rgba(128, 128, 128, 0.1); - border-left-color: #ccc; - } - - .importantMark { - display: none; - - color:red; - margin-right:5px - } - - &.deleted-mark { - opacity: .7; - .subjectParent { - text-decoration: line-through; - } - } - - &.important .importantMark { - display: inline; - } - - &.new { - max-height: 0; - } - - &.deleted { - max-height: 0; - border-color: transparent !important; - } - - .checkboxMessage { - line-height: 12px; - padding: 0 8px 0 6px; - font-size: 16px; - } - - .flagParent { - padding: 0 10px 0 5px; - } - - time, .sizeParent { - margin: 0 5px; - opacity: 0.6; - font-size: 11px; - white-space: nowrap; - } - - .threadsParent { - position: relative; - } - - .attachmentParent { - position: relative; - margin: 2px 10px 0 5px; - color: #666; - text-shadow: 0 1px 0 #eee; - } - - .senderParent, .subjectParent { - overflow: hidden; - white-space: nowrap; - } - - .threadsCountParent { - display: inline; - overflow: hidden; - background-color: #eee; - padding: 1px 5px; - margin-right: 5px; - border: 1px solid #ccc; - border-radius: 5px; - } - - .threadsCountParent.lastSelected { - background-color: #999; - border-color: #999; - color: #fff; - } - - .threadsCountParent:hover { - border-color: #666; - } - - .subjectParent .emptySubjectText { - display: none; - font-style: italic; - opacity: 0.5; - } - - &.emptySubject .subjectParent { - .subject { - display: none; - } - .emptySubjectText { - display: inline; - } - } - - .sender, .subject { - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - } - - .threads-len { - .threads-len-data { - - border-radius: 6px; - padding: 2px 0 1px 4px; - border: 1px solid #ccc; - - &:hover { - background-color: rgba(127,127,127,0.3); - border-color: #666; - } - } - } - - .flagOff { - opacity: 0.5; - &:hover { - opacity: 1; - } - } - - .flagOn, .flagOnHalf { - color: orange; - } - - .replyFlag, .forwardFlag { - display: none; - margin-right: 0.25em; - } - - &.answered .replyFlag { - display: inline-block; - } - - &.forwarded .forwardFlag { - display: inline-block; - } - - &:not(.withAttachments) .attachmentParent { - display: none; - } - - &.hasUnseenSubMessage { - background-color: rgba(255, 255, 64, 0.15); - border-left-color: lighten(orange, 30%); - &.focused { - border-left-color: darken(orange, 10%); - } - } - - &.unseen { - background-color: rgba(255, 255, 64, 0.15); - border-left-color: orange; - .sender, .subjectParent { - font-weight: bold; - } - - &.focused { - border-left-color: darken(orange, 10%); - } - } - - &.checked { - border-left-color: lighten(#398CF2, 10%); - - &.focused { - border-left-color: darken(#398CF2, 5%); - } - } - - &.selected { - background-color: rgba(140, 200, 255, 0.3); - border-bottom-color: rgba(57, 140, 242, 0.2); - border-left-color: #398CF2; - z-index: 101; - - + .messageListItem { - border-bottom-color: rgba(57, 140, 242, 0.3); - } - } - - &:not(.flagged) .flagOn, - &:not(.hasFlaggedSubMessage) .flagOnHalf, - &.flagged .flagOff, &.hasFlaggedSubMessage .flagOff { - display: none; - } - } - &.message-focused { .b-message-list-wrapper { background-color: #000; @@ -415,17 +206,250 @@ html.rl-no-preview-pane { opacity: 0.97; } } +} - &.hideMessageListCheckbox { - .checkboxMessage, .checkboxCheckAll { - visibility: hidden; +.hideMessageListCheckbox { + .checkboxCheckAll { + visibility: hidden; + } + + .checkboxMessage { + display: none; + } +} + +.messageListItem { + display: flex; + flex-wrap: wrap; + + position: relative; + font-size: 12px; + overflow: hidden; + cursor: pointer; + + margin: 0; + padding: 5px 0; + border: 0; + border-bottom: 1px solid rgba(153, 153, 153, 0.2); + border-left: 6px solid #eee; + + z-index: 100; + + > * { + display: flex; + flex: 0 0 auto; + order: 0; + } + + &.focused { + background-color: rgba(128, 128, 128, 0.1); + border-left-color: #ccc; + } + + .importantMark { + display: none; + + color:red; + margin-right:5px + } + + &.deleted-mark { + opacity: .7; + .subjectParent { + text-decoration: line-through; + } + } + + &.important .importantMark { + display: inline; + } + + &.new { + max-height: 0; + } + + &.deleted { + max-height: 0; + border-color: transparent !important; + } + + .checkboxMessage { + line-height: 12px; + padding: 0 8px 0 6px; + font-size: 16px; + } + + .flagParent { + padding: 0 10px 0 5px; + } + + time, .sizeParent { + margin: 0 5px; + opacity: 0.6; + font-size: 11px; + white-space: nowrap; + } + + .threadsParent { + position: relative; + } + + .attachmentParent { + position: relative; + margin: 2px 10px 0 5px; + color: #666; + text-shadow: 0 1px 0 #eee; + } + + .senderParent, .subjectParent { + overflow: hidden; + white-space: nowrap; + } + + .threadsCountParent { + display: inline; + overflow: hidden; + background-color: #eee; + padding: 1px 5px; + margin-right: 5px; + border: 1px solid #ccc; + border-radius: 5px; + } + + .threadsCountParent.lastSelected { + background-color: #999; + border-color: #999; + color: #fff; + } + + .threadsCountParent:hover { + border-color: #666; + } + + .subjectParent .emptySubjectText { + display: none; + font-style: italic; + opacity: 0.5; + } + + &.emptySubject .subjectParent { + .subject { + display: none; + } + .emptySubjectText { + display: inline; + } + } + + .sender, .subject { + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + } + + .threads-len { + .threads-len-data { + + border-radius: 6px; + padding: 2px 0 1px 4px; + border: 1px solid #ccc; + + &:hover { + background-color: rgba(127,127,127,0.3); + border-color: #666; + } + } + } + + .flagOff { + opacity: 0.5; + &:hover { + opacity: 1; + } + } + + .flagOn, .flagOnHalf { + color: orange; + } + + .replyFlag, .forwardFlag { + display: none; + margin-right: 0.25em; + } + + &.answered .replyFlag { + display: inline-block; + } + + &.forwarded .forwardFlag { + display: inline-block; + } + + &:not(.withAttachments) .attachmentParent { + display: none; + } + + &.hasUnseenSubMessage { + background-color: rgba(255, 255, 64, 0.15); + border-left-color: lighten(orange, 30%); + &.focused { + border-left-color: darken(orange, 10%); + } + } + + &.unseen { + background-color: rgba(255, 255, 64, 0.15); + border-left-color: orange; + .sender, .subjectParent { + font-weight: bold; + } + + &.focused { + border-left-color: darken(orange, 10%); + } + } + + &.checked { + border-left-color: lighten(#398CF2, 10%); + + &.focused { + border-left-color: darken(#398CF2, 5%); + } + } + + &.selected { + background-color: rgba(140, 200, 255, 0.3); + border-bottom-color: rgba(57, 140, 242, 0.2); + border-left-color: #398CF2; + z-index: 101; + + + .messageListItem { + border-bottom-color: rgba(57, 140, 242, 0.3); + } + } + + &:not(.flagged) .flagOn, + &:not(.hasFlaggedSubMessage) .flagOnHalf, + &.flagged .flagOff, &.hasFlaggedSubMessage .flagOff { + display: none; + } +} + +html.rl-ctrl-key-pressed .messageListItem { + cursor: copy; +} + +@media screen and (min-width: 1000px) { + .messageList { + .listDragOver { + transition: all 400ms ease; } } } /* desktop-large */ @media screen and (min-width: 1401px) { - .messageList .messageListItem { + .messageListItem { font-size: 13px; time { font-size: 13px; @@ -448,18 +472,6 @@ html .messageList .line-loading { top: 0; } -.messageListItem { - - display: flex; - flex-wrap: wrap; - - > * { - display: flex; - flex: 0 0 auto; - order: 0; - } -} - .rl-side-preview-pane, .rl-mobile { .messageListItem { @@ -471,7 +483,6 @@ html .messageList .line-loading { .subjectParent { flex: 1 0 auto; line-height: 16px; - margin-left: 30px; order: 1; width: calc(100% - 120px); } @@ -492,9 +503,13 @@ html .messageList .line-loading { order: 3; } } + + .b-message-list-wrapper:not(.hideMessageListCheckbox) .subjectParent { + margin-left: 30px; + } } -html:not(.rl-mobile):not(.rl-side-preview-pane) .messageList { +html:not(.rl-mobile):not(.rl-side-preview-pane) { .messageListItem { diff --git a/dev/Styles/MessageView.less b/dev/Styles/User/MessageView.less similarity index 100% rename from dev/Styles/MessageView.less rename to dev/Styles/User/MessageView.less diff --git a/dev/Styles/OpenPgpKey.less b/dev/Styles/User/OpenPgpKey.less similarity index 95% rename from dev/Styles/OpenPgpKey.less rename to dev/Styles/User/OpenPgpKey.less index 0769472c4..3145dff6e 100644 --- a/dev/Styles/OpenPgpKey.less +++ b/dev/Styles/User/OpenPgpKey.less @@ -1,6 +1,6 @@ .b-open-pgp-key-view-content, .b-open-pgp-key-generate-content { &.modal { - width: 570px; + max-width: 570px; } } @@ -13,7 +13,7 @@ .b-compose-open-pgp-content { &.modal { - width: 800px; + max-width: 800px; } .key-list { @@ -97,7 +97,7 @@ .b-message-open-pgp-content { &.modal { - width: 700px; + max-width: 700px; } .key-list { @@ -134,7 +134,7 @@ .b-open-pgp-key-add-content { &.modal { - width: 645px; + max-width: 645px; } .inputKey { font-family: var(--fontMono); diff --git a/dev/Styles/Settings.less b/dev/Styles/User/Settings.less similarity index 100% rename from dev/Styles/Settings.less rename to dev/Styles/User/Settings.less diff --git a/dev/Styles/SettingsAccounts.less b/dev/Styles/User/SettingsAccounts.less similarity index 100% rename from dev/Styles/SettingsAccounts.less rename to dev/Styles/User/SettingsAccounts.less diff --git a/dev/Styles/SettingsFilters.less b/dev/Styles/User/SettingsFilters.less similarity index 100% rename from dev/Styles/SettingsFilters.less rename to dev/Styles/User/SettingsFilters.less diff --git a/dev/Styles/SettingsFolders.less b/dev/Styles/User/SettingsFolders.less similarity index 100% rename from dev/Styles/SettingsFolders.less rename to dev/Styles/User/SettingsFolders.less diff --git a/dev/Styles/SettingsGeneral.less b/dev/Styles/User/SettingsGeneral.less similarity index 100% rename from dev/Styles/SettingsGeneral.less rename to dev/Styles/User/SettingsGeneral.less diff --git a/dev/Styles/SettingsOpenPGP.less b/dev/Styles/User/SettingsOpenPGP.less similarity index 100% rename from dev/Styles/SettingsOpenPGP.less rename to dev/Styles/User/SettingsOpenPGP.less diff --git a/dev/Styles/SettingsTemplates.less b/dev/Styles/User/SettingsTemplates.less similarity index 100% rename from dev/Styles/SettingsTemplates.less rename to dev/Styles/User/SettingsTemplates.less diff --git a/dev/Styles/SettingsThemes.less b/dev/Styles/User/SettingsThemes.less similarity index 100% rename from dev/Styles/SettingsThemes.less rename to dev/Styles/User/SettingsThemes.less diff --git a/dev/Styles/Shortcuts.less b/dev/Styles/User/Shortcuts.less similarity index 74% rename from dev/Styles/Shortcuts.less rename to dev/Styles/User/Shortcuts.less index ce6fca195..dcf948638 100644 --- a/dev/Styles/Shortcuts.less +++ b/dev/Styles/User/Shortcuts.less @@ -1,7 +1,7 @@ .rl-view-model { .b-shortcuts-content { &.modal { - width: 700px; + max-width: 700px; } } } diff --git a/dev/Styles/SquireUI.less b/dev/Styles/User/SquireUI.less similarity index 100% rename from dev/Styles/SquireUI.less rename to dev/Styles/User/SquireUI.less diff --git a/dev/Styles/SystemDropDown.less b/dev/Styles/User/SystemDropDown.less similarity index 100% rename from dev/Styles/SystemDropDown.less rename to dev/Styles/User/SystemDropDown.less diff --git a/dev/Styles/Template.less b/dev/Styles/User/Template.less similarity index 80% rename from dev/Styles/Template.less rename to dev/Styles/User/Template.less index 331dae1cf..47dc0e3f7 100644 --- a/dev/Styles/Template.less +++ b/dev/Styles/User/Template.less @@ -1,7 +1,7 @@ .b-template-add-content { &.modal { - width: 750px; + max-width: 750px; } .e-template-place { diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less index dad250ce5..b7d120736 100644 --- a/dev/Styles/_BootstrapFix.less +++ b/dev/Styles/_BootstrapFix.less @@ -51,19 +51,8 @@ label.inline, span.inline { color: #b94a48; } -.form-horizontal.long-label .control-group { - .control-label { - width: 160px; - } -} - /* mobile and tablet */ @media screen and (max-width: 999px) { - - .modal { - width: calc(100% - 20px); - } - .form-horizontal { .control-group { .control-label { diff --git a/dev/Styles/_FontasticToBoot.less b/dev/Styles/_FontasticToBoot.less index 1692a00e5..4eafc03a0 100644 --- a/dev/Styles/_FontasticToBoot.less +++ b/dev/Styles/_FontasticToBoot.less @@ -63,7 +63,8 @@ margin: -1px -2px; } -.icon-spinner:not(.not-animated) { +.icon-spinner:not(.not-animated), +.list-loading .icon-spinner.not-animated { border-color: transparent; border-top-color: #999; animation: rotation .8s infinite ease-in-out; diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js index 787b57c65..df76e305e 100644 --- a/dev/View/User/MailBox/MessageList.js +++ b/dev/View/User/MailBox/MessageList.js @@ -86,7 +86,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight { this.messageListCheckedOrSelected = MessageUserStore.listCheckedOrSelected; this.messageListCompleteLoadingThrottle = MessageUserStore.listCompleteLoading; - this.messageListCompleteLoadingThrottleForAnimation = MessageUserStore.listLoadingAnimation; initOnStartOrLangChange(() => this.emptySubjectValue = i18n('MESSAGE_LIST/EMPTY_SUBJECT_TEXT')); @@ -670,31 +669,31 @@ export class MessageListMailBoxUserView extends AbstractViewRight { } onBuild(dom) { - const eqs = (ev, s) => ev.target.closestWithin(s, dom); + const eqs = (ev, s) => ev.target.closestWithin('.messageList '+s, dom); this.selector.init(dom.querySelector('.b-content'), Scope.MessageList); dom.addEventListener('click', event => { ThemeStore.isMobile() && leftPanelDisabled(true); - if (eqs(event, '.messageList .b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) { + if (eqs(event, '.b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) { AppUserStore.focusedState(Scope.MessageList); } let el = eqs(event, '.e-paginator .e-page'); el && this.gotoPage(ko.dataFor(el)); - eqs(event, '.messageList .checkboxCheckAll') && this.checkAll(!this.checkAll()); + eqs(event, '.checkboxCheckAll') && this.checkAll(!this.checkAll()); - el = eqs(event, '.messageList .messageListItem .flagParent'); + el = eqs(event, '.messageListItem .flagParent'); el && this.flagMessages(ko.dataFor(el)); - el = eqs(event, '.messageList .messageListItem .threads-len'); + el = eqs(event, '.messageListItem .threads-len'); el && this.gotoThread(ko.dataFor(el)); }); dom.addEventListener('dblclick', event => { - let el = eqs(event, '.messageList .messageListItem .actionHandle'); + let el = eqs(event, '.messageListItem .actionHandle'); el && this.gotoThread(ko.dataFor(el)); }); diff --git a/package.json b/package.json index 2718780d4..cff731062 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "rimraf": "3.0.2" }, "dependencies": { + "gulp-group-css-media-queries": "^1.2.2", "gulp-rollup-2": "^1.2.1", "rollup": "^2.38.0", "rollup-plugin-external-globals": "^0.6.1", diff --git a/plugins/change-password/index.php b/plugins/change-password/index.php index eebd684a1..9c354c80b 100644 --- a/plugins/change-password/index.php +++ b/plugins/change-password/index.php @@ -6,9 +6,9 @@ class ChangePasswordPlugin extends \RainLoop\Plugins\AbstractPlugin { const NAME = 'Change Password', - VERSION = '2.1', - RELEASE = '2021-03-18', - REQUIRED = '2.4.0', + VERSION = '2.2', + RELEASE = '2021-07-20', + REQUIRED = '2.5.0', CATEGORY = 'Security', DESCRIPTION = 'This plugin allows you to change passwords of email accounts'; @@ -23,6 +23,7 @@ class ChangePasswordPlugin extends \RainLoop\Plugins\AbstractPlugin { $this->UseLangs(true); // start use langs folder + $this->addCss('style.less'); $this->addJs('js/ChangePasswordUserSettings.js'); // add js file $this->addJsonHook('ChangePassword', 'ChangePassword'); $this->addTemplate('templates/SettingsChangePassword.html'); diff --git a/plugins/change-password/style.less b/plugins/change-password/style.less new file mode 100644 index 000000000..09788f981 --- /dev/null +++ b/plugins/change-password/style.less @@ -0,0 +1,5 @@ +.form-horizontal.change-password .control-group { + .control-label { + width: 160px; + } +} diff --git a/plugins/change-password/templates/SettingsChangePassword.html b/plugins/change-password/templates/SettingsChangePassword.html index f16b1b7fe..ac0e62d20 100644 --- a/plugins/change-password/templates/SettingsChangePassword.html +++ b/plugins/change-password/templates/SettingsChangePassword.html @@ -1,5 +1,5 @@
-
+
diff --git a/snappymail/v/0.0.0/app/templates/Views/Common/Paginator.html b/snappymail/v/0.0.0/app/templates/Views/Common/Paginator.html index 5c98d9bce..902e37525 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Common/Paginator.html +++ b/snappymail/v/0.0.0/app/templates/Views/Common/Paginator.html @@ -1,5 +1,3 @@
- - - +
diff --git a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html index b638fb3ed..22d9819b7 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html +++ b/snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html @@ -3,12 +3,10 @@

-
-
- -
+
+
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 840979dba..343edcb7b 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,257 +1,255 @@ -
-
-
-
- ❮ - ❯ - - +
+
+
+ ❮ + ❯ + + + + + + + +
+ + + 📁 + - - + +
+ + +
+ + + 📁 - -
- - - 📁 +
+ +
+ + + + ⚠ + + + + 🗑 +
+
+ ☰ + +
+
+ ⬇ + +
+
+
+
+
+
+ +
+
+ × + +
+ - -
- - -
- - - 📁 - -
- -
- - - - ⚠ - - - - 🗑 -
-
- ☰ - -
-
- ⬇ -
-
-
-
- -
-
- × - -
- - - -
-
+
+
+ ⬅ +
-
-
- ⬅ - -
-
-
- ⬇ - -
-
- -
-
- -
-
-
- - . - . - . -
-
-
-
+
+
+ ⬇ + +
+
+ +
+
+ +
+
+
+ + . + . + . +
+
+
+
-
-
+
+
-
- ★ - ☆ - ☆ - -
+
+ ★ + ☆ + ☆ + +
-
- ← - → - -
+
+ ← + → + +
-
- -
+
+ +
-
- ! - - -
+
+ ! + + +
-
+
-
- - - - - +
+ + + + -
- - +
+
+
-
 
-
- - % - -
- -
+
 
+
+
+ + % + +
+
diff --git a/snappymail/v/0.0.0/themes/SquaresDark/styles.less b/snappymail/v/0.0.0/themes/SquaresDark/styles.less index 2204029fc..b24e1e61e 100644 --- a/snappymail/v/0.0.0/themes/SquaresDark/styles.less +++ b/snappymail/v/0.0.0/themes/SquaresDark/styles.less @@ -121,7 +121,7 @@ border-bottom-color: #444; } -.messageList .messageListItem { +.messageListItem { border-left-color: #111; color: #EEE; } diff --git a/tasks/css.js b/tasks/css.js index c9691d511..955750e6b 100644 --- a/tasks/css.js +++ b/tasks/css.js @@ -8,6 +8,7 @@ const eol = require('gulp-eol'); const livereload = require('gulp-livereload'); const filter = require('gulp-filter'); const expect = require('gulp-expect-file'); +const gcmq = require('gulp-group-css-media-queries'); const { config } = require('./config'); const { del } = require('./common'); @@ -85,6 +86,7 @@ const cssBootMin = () => { const cssMainMin = () => { return gulp .src(config.paths.staticCSS + config.paths.css.main.name) + .pipe(gcmq()) .pipe(cleanCss()) .pipe(rename({ suffix: '.min' })) .pipe(eol('\n', true)) @@ -94,6 +96,7 @@ const cssMainMin = () => { const cssAdminMin = () => { return gulp .src(config.paths.staticCSS + config.paths.css.admin.name) + .pipe(gcmq()) .pipe(cleanCss()) .pipe(rename({ suffix: '.min' })) .pipe(eol('\n', true)) diff --git a/vendors/bootstrap/less/forms.less b/vendors/bootstrap/less/forms.less index 8e16d3dcc..fe643998a 100644 --- a/vendors/bootstrap/less/forms.less +++ b/vendors/bootstrap/less/forms.less @@ -84,6 +84,7 @@ textarea { // Reset height since textareas have rows textarea { height: auto; + resize: none; } // Everything else textarea, diff --git a/vendors/bootstrap/less/modals.less b/vendors/bootstrap/less/modals.less index 8ccd2b203..91ea86aaa 100644 --- a/vendors/bootstrap/less/modals.less +++ b/vendors/bootstrap/less/modals.less @@ -8,7 +8,8 @@ position: relative; z-index: @zindexModal; overflow: hidden; - width: 560px; + width: calc(100% - 20px); + max-width: 560px; margin: 10px auto; background-color: @white; border: 1px solid rgba(0,0,0,.3); diff --git a/yarn.lock b/yarn.lock index 6ed1d843d..1b4fc8d05 100644 --- a/yarn.lock +++ b/yarn.lock @@ -871,6 +871,30 @@ cross-spawn@^6.0.5: shebang-command "^1.2.0" which "^1.2.9" +css-parse@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4" + integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q= + dependencies: + css "^2.0.0" + +css-stringify@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/css-stringify/-/css-stringify-2.0.0.tgz#2ef33dcf498c3d3ee82bd73d0a01ac28628cd0fa" + integrity sha1-LvM9z0mMPT7oK9c9CgGsKGKM0Po= + dependencies: + css "^2.0.0" + +css@^2.0.0: + version "2.2.4" + resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" + integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw== + dependencies: + inherits "^2.0.3" + source-map "^0.6.1" + source-map-resolve "^0.5.2" + urix "^0.1.0" + d@1, d@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a" @@ -1603,6 +1627,14 @@ graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6: resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee" integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ== +group-css-media-queries@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/group-css-media-queries/-/group-css-media-queries-1.4.1.tgz#8e54cb31cc45a9c5e08eb838940b8a28038d7175" + integrity sha1-jlTLMcxFqcXgjrg4lAuKKAONcXU= + dependencies: + css-parse "^2.0.0" + css-stringify "^2.0.0" + gulp-cached@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/gulp-cached/-/gulp-cached-1.1.1.tgz#fe7cd4f87f37601e6073cfedee5c2bdaf8b6acce" @@ -1697,6 +1729,15 @@ gulp-filter@6.0.0: plugin-error "^1.0.1" streamfilter "^3.0.0" +gulp-group-css-media-queries@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/gulp-group-css-media-queries/-/gulp-group-css-media-queries-1.2.2.tgz#c0436b9474086cbe1ab3eb5bc1a3afef4d6b37d6" + integrity sha512-uOs8aJ5TV12aRstfc6pn107edDT2XSY7KNAU721Dz+gKHu/AUIlAaOdFdo9n/eHWqfb9QWMArrM8fiPOCqZPGg== + dependencies: + group-css-media-queries "^1.4.1" + plugin-error "^1.0.1" + through2 "^2.0.3" + gulp-header@2.0.9: version "2.0.9" resolved "https://registry.yarnpkg.com/gulp-header/-/gulp-header-2.0.9.tgz#8b432c4d4379dee6788845b16785b09c7675af84" @@ -3695,7 +3736,7 @@ snapdragon@^0.8.1: source-map-resolve "^0.5.0" use "^3.1.0" -source-map-resolve@^0.5.0: +source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==