Cleanup styling and gulp merge @media queries

This commit is contained in:
djmaze 2021-07-20 16:45:55 +02:00
parent d3d0180208
commit e13337e247
60 changed files with 699 additions and 731 deletions

View file

@ -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()),

View file

@ -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";

View file

@ -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";

View file

@ -1,4 +0,0 @@
.b-account-add-content {
.modal-header {
}
}

View file

@ -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 {

View file

@ -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;
}
}
}

View file

@ -1,7 +1,7 @@
.b-plugin-content {
&.modal {
width: 660px;
max-width: 660px;
}
.modal-body {

View file

@ -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;
}
}

View file

@ -1,4 +0,0 @@
.b-folder-clear-content {
.modal-header {
}
}

View file

@ -1,4 +0,0 @@
.b-folder-create-content {
.modal-header {
}
}

View file

@ -1,4 +0,0 @@
.b-folder-system-content {
.modal-header {
}
}

View file

@ -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);
}
}

View file

@ -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;
}
}
}

View file

@ -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;

View file

@ -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;
}

View file

@ -1,6 +1,6 @@
.b-advanced-search-content {
&.modal {
width: 780px;
max-width: 780px;
}
.control-label {
width: 110px;

View file

@ -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;

View file

@ -1,7 +1,7 @@
.b-identity-content {
&.modal {
width: 770px;
max-width: 770px;
}
.modal-body {

View file

@ -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;
}
}
}

View file

@ -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 {

View file

@ -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);

View file

@ -1,7 +1,7 @@
.rl-view-model {
.b-shortcuts-content {
&.modal {
width: 700px;
max-width: 700px;
}
}
}

View file

@ -1,7 +1,7 @@
.b-template-add-content {
&.modal {
width: 750px;
max-width: 750px;
}
.e-template-place {

View file

@ -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 {

View file

@ -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;

View file

@ -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));
});

View file

@ -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",

View file

@ -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');

View file

@ -0,0 +1,5 @@
.form-horizontal.change-password .control-group {
.control-label {
width: 160px;
}
}

View file

@ -1,5 +1,5 @@
<div class="b-settings-general g-ui-user-select-none">
<div class="form-horizontal long-label">
<div class="form-horizontal change-password">
<div class="legend" data-i18n="SETTINGS_CHANGE_PASSWORD/LEGEND_CHANGE_PASSWORD"></div>
<div class="row">
<div class="span6">

View file

@ -1,5 +1,3 @@
<div class="e-paginator g-ui-user-select-none" data-bind="foreach: $data">
<a class="e-page" data-bind="css: { 'current': current, 'custom': custom }, title: title">
<span class="e-page-number" data-bind="text: name"></span>
</a>
<a class="e-page" data-bind="css: { 'current': current, 'custom': custom }, title: title, text: name"></a>
</div>

View file

@ -3,12 +3,10 @@
<button type="button" class="close" data-bind="command: cancelCommand">×</button>
<h3 data-i18n="POPUPS_LANGUAGES/TITLE_LANGUAGES"></h3>
</div>
<div class="modal-body" style="min-height: 150px;">
<div data-bind="foreach: languages">
<label class="lang-item" data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
attr: { title: $root.languageTooltipName(key) },
text: fullName">
</label>
</div>
<div class="modal-body" style="min-height: 150px;" data-bind="foreach: languages">
<label data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
attr: { title: $root.languageTooltipName(key) },
text: fullName">
</label>
</div>
</div>

View file

@ -1,257 +1,255 @@
<div id="rl-sub-left">
<div class="messageList g-ui-user-select-none"
data-bind="css: {'message-selected': isMessageSelected, 'message-focused': !messageListFocused(), 'hideMessageListCheckbox': !useCheckboxesInList() }">
<div class="toolbar">
<div class="btn-toolbar">
<a class="btn btn-thin-2 fontastic show-mobile" data-bind="click: hideLeft, visible: !leftPanelDisabled()"></a>
<a class="btn btn-thin-2 fontastic show-mobile" data-bind="click: showLeft, visible: leftPanelDisabled()"></a>
<a class="btn buttonCompose show-mobile" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}, visible: allowComposer && mobileCheckedStateHide()" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
<i class="icon-paper-plane"></i>
<div id="rl-sub-left" class="messageList g-ui-user-select-none"
data-bind="css: {'message-selected': isMessageSelected, 'message-focused': !messageListFocused() }">
<div class="toolbar">
<div class="btn-toolbar">
<a class="btn btn-thin-2 fontastic show-mobile" data-bind="click: hideLeft, visible: !leftPanelDisabled()"></a>
<a class="btn btn-thin-2 fontastic show-mobile" data-bind="click: showLeft, visible: leftPanelDisabled()"></a>
<a class="btn buttonCompose show-mobile" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}, visible: allowComposer && mobileCheckedStateHide()" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
<i class="icon-paper-plane"></i>
</a>
<a class="btn" data-bind="command: reloadCommand, visible: allowReload && mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
<i class="icon-spinner not-animated"></i>
</a>
<!-- ko if: !newMoveToFolder -->
<div class="btn-group dropdown colored-toggle hide-mobile" data-bind="visible: allowMessageListActions, registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-toggle="dropdown" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
<i class="icon-copy visible-on-ctrl-btn"></i>
<i class="fontastic hidden-on-ctrl-btn">📁</i>
<span class="caret"></span>
</a>
<a class="btn buttonReload" data-bind="command: reloadCommand, visible: allowReload && mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
<i class="icon-spinner" data-bind="css: {'not-animated': !messageListCompleteLoadingThrottleForAnimation()}"></i>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
<li class="e-item" role="presentation" data-bind="css: { 'disabled': disabled, 'dividerbar': dividerbar }, click: function (mdata, oEvent) { if (!disabled) $root.moveSelectedMessagesToFolder(id, oEvent && !!oEvent.ctrlKey); }">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="text: name"></a>
</li>
</ul>
</div>
<!-- /ko -->
<!-- ko if: newMoveToFolder -->
<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn buttonMove" data-bind="command: moveNewCommand" data-i18n="[title]GLOBAL/MOVE_TO">
<i class="icon-copy visible-on-ctrl-btn"></i>
<i class="fontastic hidden-on-ctrl-btn">📁</i>
</a>
<!-- ko if: !newMoveToFolder -->
<div class="btn-group dropdown colored-toggle hide-mobile" data-bind="visible: allowMessageListActions, registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-toggle="dropdown" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
<i class="icon-copy visible-on-ctrl-btn"></i>
<i class="fontastic hidden-on-ctrl-btn">📁</i>
</div>
<!-- /ko -->
<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
<a class="btn button-archive"
data-bind="visible: isArchiveVisible, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
<i class="icon-archive"></i>
</a>
<a class="btn button-spam fontastic" data-bind="visible: isSpamVisible, command: spamCommand" data-i18n="[title]GLOBAL/SPAM"></a>
<a class="btn button-not-spam"
data-bind="visible: isUnSpamVisible, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
<i class="icon-check-mark-circle-two"></i>
</a>
<a class="btn button-delete fontastic"
data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
</div>
<div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-toggle="dropdown" data-i18n="[title]GLOBAL/MORE"></a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
<div data-bind="visible: allowMessageListActions">
<li class="e-item" role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
<span data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
<span data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic flagged"></i>
<span data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic unflagged"></i>
<span data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
<span data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></span>
</a>
</li>
</div>
<li class="e-item dividerbar" role="presentation" data-bind="visible: allowComposer, command: multyForwardCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic"></i>
<span data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
</a>
</li>
<li class="e-item dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">🗑</i>
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="visible: allowDangerousActions, command: clearCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">🔥</i>
<span data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
</a>
</li>
</ul>
</div>
<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported() && mobileCheckedStateHide(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-toggle="dropdown" data-i18n="[title]MESSAGE_LIST/SORT" data-bind="text: sortText"></a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
<li class="e-item" role="presentation" data-sort="DATE" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">📅⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_DATE_ASC"></span>
</a>
</li>
<li class="e-item" role="presentation" data-sort="" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">📅⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_DATE_DESC"></span>
</a>
</li>
<li class="e-item dividerbar" role="presentation" data-sort="SIZE" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">✉⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_SIZE_ASC"></span>
</a>
</li>
<li class="e-item" role="presentation" data-sort="REVERSE SIZE" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">✉⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_SIZE_DESC"></span>
</a>
</li>
<li class="e-item dividerbar" role="presentation" data-sort="SUBJECT" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">𝐒⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_ASC"></span>
</a>
</li>
<li class="e-item" role="presentation" data-sort="REVERSE SUBJECT" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">𝐒⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_DESC"></span>
</a>
</li>
<li class="e-item dividerbar" role="presentation" data-sort="FROM" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">@⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_FROM_ASC"></span>
</a>
</li>
<li class="e-item" role="presentation" data-sort="REVERSE FROM" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">@⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_FROM_DESC"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="b-message-list-wrapper" data-bind="css: {'hideMessageListCheckbox': !useCheckboxesInList() }">
<div class="second-toolbar thm-message-list-top-toolbar">
<div class="form-inline">
<i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
<div class="input-append" data-bind="visible: allowSearch">
<div class="close-input-wrp">
<a class="close" data-bind="click: cancelSearch, visible: '' !== messageListSearchDesc()">×</a>
<input type="search" class="span4 inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: inputProxyMessageListSearch, onEnter: searchEnterAction, hasfocus: inputMessageListSearchFocus" />
</div>
<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick">
<span class="caret"></span>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
<li class="e-item" role="presentation" data-bind="css: { 'disabled': disabled, 'dividerbar': dividerbar }, click: function (mdata, oEvent) { if (!disabled) $root.moveSelectedMessagesToFolder(id, oEvent && !!oEvent.ctrlKey); }">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="text: name"></a>
</li>
</ul>
</div>
<!-- /ko -->
<!-- ko if: newMoveToFolder -->
<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn buttonMove" data-bind="command: moveNewCommand" data-i18n="[title]GLOBAL/MOVE_TO">
<i class="icon-copy visible-on-ctrl-btn"></i>
<i class="fontastic hidden-on-ctrl-btn">📁</i>
</a>
</div>
<!-- /ko -->
<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
<a class="btn button-archive"
data-bind="visible: isArchiveVisible, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
<i class="icon-archive"></i>
</a>
<a class="btn button-spam fontastic" data-bind="visible: isSpamVisible, command: spamCommand" data-i18n="[title]GLOBAL/SPAM"></a>
<a class="btn button-not-spam"
data-bind="visible: isUnSpamVisible, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
<i class="icon-check-mark-circle-two"></i>
</a>
<a class="btn button-delete fontastic"
data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
</div>
<div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-toggle="dropdown" data-i18n="[title]GLOBAL/MORE"></a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
<div data-bind="visible: allowMessageListActions">
<li class="e-item" role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
<span data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
<span data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic flagged"></i>
<span data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic unflagged"></i>
<span data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="icon-none"></i>
<span data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></span>
</a>
</li>
</div>
<li class="e-item dividerbar" role="presentation" data-bind="visible: allowComposer, command: multyForwardCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic"></i>
<span data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
</a>
</li>
<li class="e-item dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">🗑</i>
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
</a>
</li>
<li class="e-item" role="presentation" data-bind="visible: allowDangerousActions, command: clearCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">🔥</i>
<span data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
</a>
</li>
</ul>
</div>
<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported() && mobileCheckedStateHide(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-toggle="dropdown" data-i18n="[title]MESSAGE_LIST/SORT" data-bind="text: sortText"></a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
<li class="e-item" role="presentation" data-sort="DATE" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">📅⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_DATE_ASC"></span>
</a>
</li>
<li class="e-item" role="presentation" data-sort="" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">📅⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_DATE_DESC"></span>
</a>
</li>
<li class="e-item dividerbar" role="presentation" data-sort="SIZE" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">✉⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_SIZE_ASC"></span>
</a>
</li>
<li class="e-item" role="presentation" data-sort="REVERSE SIZE" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">✉⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_SIZE_DESC"></span>
</a>
</li>
<li class="e-item dividerbar" role="presentation" data-sort="SUBJECT" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">𝐒⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_ASC"></span>
</a>
</li>
<li class="e-item" role="presentation" data-sort="REVERSE SUBJECT" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">𝐒⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_DESC"></span>
</a>
</li>
<li class="e-item dividerbar" role="presentation" data-sort="FROM" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">@⬇</i>
<span data-i18n="MESSAGE_LIST/SORT_FROM_ASC"></span>
</a>
</li>
<li class="e-item" role="presentation" data-sort="REVERSE FROM" data-bind="click: changeSort">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">@⬆</i>
<span data-i18n="MESSAGE_LIST/SORT_FROM_DESC"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="b-message-list-wrapper">
<div class="second-toolbar thm-message-list-top-toolbar">
<div class="form-inline">
<i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
<div class="input-append" data-bind="visible: allowSearch">
<div class="close-input-wrp">
<a class="close" data-bind="click: cancelSearch, visible: '' !== messageListSearchDesc()">×</a>
<input type="search" class="span4 inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: inputProxyMessageListSearch, onEnter: searchEnterAction, hasfocus: inputMessageListSearchFocus" />
</div>
<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick">
<span class="caret"></span>
</a>
</div>
</div>
<div class="b-content" data-bind="initDom: dragOverBodyArea">
<div class="listThreadUidDesc" data-bind="visible: '' !== messageListEndThreadUid(), click: cancelThreadUid">
<i class="fontastic" data-bind="click: cancelThreadUid"></i>
<span data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span>
</div>
<div class="b-content" data-bind="initDom: dragOverBodyArea">
<div class="listThreadUidDesc" data-bind="visible: '' !== messageListEndThreadUid(), click: cancelThreadUid">
<i class="fontastic" data-bind="click: cancelThreadUid"></i>
<span data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span>
</div>
<div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc(), text: messageListSearchDesc"></div>
<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea">
<i class="fontastic e-icon"></i>
<span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span>
</div>
<div class="listClear" data-bind="visible: clearListIsVisible()">
<span class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="command: clearCommand"></span>
</div>
<div class="listError" data-bind="visible: !dragOver() && '' !== messageListError()">
<span class="error" data-bind="text: messageListError"></span>
</div>
<div class="listEmptyList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' === messageListSearch()"
data-i18n="MESSAGE_LIST/EMPTY_LIST"></div>
<div class="listEmptyListLoading" data-bind="visible: !dragOver() && 0 === messageList().length &&
messageListCompleteLoadingThrottle() && '' === messageListError()">
<span data-i18n="GLOBAL/LOADING"></span>
<span class="textLoadingAnimationD1">.</span>
<span class="textLoadingAnimationD2">.</span>
<span class="textLoadingAnimationD3">.</span>
</div>
<div class="listEmptySearchList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' !== messageListSearch()"
data-i18n="MESSAGE_LIST/EMPTY_SEARCH_LIST"></div>
<div data-bind="dragmessages: getDragData">
<div class="messageListPlace" data-bind="foreach: messageList">
<div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc(), text: messageListSearchDesc"></div>
<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea">
<i class="fontastic e-icon"></i>
<span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span>
</div>
<div class="listClear" data-bind="visible: clearListIsVisible()">
<span class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="command: clearCommand"></span>
</div>
<div class="listError" data-bind="visible: !dragOver() && '' !== messageListError()">
<span class="error" data-bind="text: messageListError"></span>
</div>
<div class="listEmptyList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' === messageListSearch()"
data-i18n="MESSAGE_LIST/EMPTY_LIST"></div>
<div class="listEmptyListLoading" data-bind="visible: !dragOver() && 0 === messageList().length &&
messageListCompleteLoadingThrottle() && '' === messageListError()">
<span data-i18n="GLOBAL/LOADING"></span>
<span class="textLoadingAnimationD1">.</span>
<span class="textLoadingAnimationD2">.</span>
<span class="textLoadingAnimationD3">.</span>
</div>
<div class="listEmptySearchList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' !== messageListSearch()"
data-i18n="MESSAGE_LIST/EMPTY_SEARCH_LIST"></div>
<div data-bind="dragmessages: getDragData">
<div class="messageListPlace" data-bind="foreach: messageList">
<div class="messageListItem" data-bind="css: lineAsCss()">
<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
<div class="messageListItem" data-bind="css: lineAsCss()">
<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
<div class="flagParent">
<i class="flagOn fontastic"></i>
<i class="flagOnHalf fontastic"></i>
<i class="flagOff fontastic"></i>
<!-- ⚐⚑ -->
</div>
<div class="flagParent">
<i class="flagOn fontastic"></i>
<i class="flagOnHalf fontastic"></i>
<i class="flagOff fontastic"></i>
<!-- ⚐⚑ -->
</div>
<div class="senderParent actionHandle">
<i class="replyFlag fontastic"></i>
<i class="forwardFlag fontastic"></i>
<span class="sender" data-bind="text: senderEmailsString, attr: {'title': senderClearEmailsString}"></span>
</div>
<div class="senderParent actionHandle">
<i class="replyFlag fontastic"></i>
<i class="forwardFlag fontastic"></i>
<span class="sender" data-bind="text: senderEmailsString, attr: {'title': senderClearEmailsString}"></span>
</div>
<div class="attachmentParent actionHandle">
<i data-bind="css: attachmentIconClass"></i>
</div>
<div class="attachmentParent actionHandle">
<i data-bind="css: attachmentIconClass"></i>
</div>
<div class="subjectParent actionHandle">
<b class="importantMark">!</b>
<span class="emptySubjectText" data-bind="text: $root.emptySubjectValue"></span>
<span class="subject" data-bind="text: subject"></span>
</div>
<div class="subjectParent actionHandle">
<b class="importantMark">!</b>
<span class="emptySubjectText" data-bind="text: $root.emptySubjectValue"></span>
<span class="subject" data-bind="text: subject"></span>
</div>
<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
<div class="threadsParent" data-bind="visible: 1 < threadsLen()">
<span class="threads-len">
<span class="threads-len-data">
<span data-bind="text: threadsLen"></span>
<i class="icon-right-mini"></i>
</span>
<div class="threadsParent" data-bind="visible: 1 < threadsLen()">
<span class="threads-len">
<span class="threads-len-data">
<span data-bind="text: threadsLen"></span>
<i class="icon-right-mini"></i>
</span>
</div>
<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
</span>
</div>
<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
</div>
</div>
<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div>
</div>
<div class="b-footer thm-message-list-bottom-toolbar">
<span data-bind="visible: 0 < userUsageProc(), attr: { title: quotaTooltip() }" class="e-quota">
<span data-bind="text: userUsageProc"></span>%
</span>
<div class="pull-right">
<!-- ko template: { name: 'Paginator', data: messageListPaginator } --><!-- /ko -->
</div>
<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div>
</div>
<div class="b-footer thm-message-list-bottom-toolbar">
<span data-bind="visible: 0 < userUsageProc(), attr: { title: quotaTooltip() }" class="e-quota">
<span data-bind="text: userUsageProc"></span>%
</span>
<div class="pull-right">
<!-- ko template: { name: 'Paginator', data: messageListPaginator } --><!-- /ko -->
</div>
</div>
</div>

View file

@ -121,7 +121,7 @@
border-bottom-color: #444;
}
.messageList .messageListItem {
.messageListItem {
border-left-color: #111;
color: #EEE;
}

View file

@ -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))

View file

@ -84,6 +84,7 @@ textarea {
// Reset height since textareas have rows
textarea {
height: auto;
resize: none;
}
// Everything else
textarea,

View file

@ -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);

View file

@ -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==