Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleanup some CSS and improve mail compose screen

Browse source
This commit is contained in:
djmaze 2021-10-26 13:36:05 +02:00
parent 09a9a45e98
commit 2efa0d8eb7
6 changed files with 108 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

5
dev/Styles/User/Attachmnets.less
View file

@ -11,9 +11,6 @@
line-height: 24px; line-height: 24px;
border: 0; border: 0;
background-color: rgba(128, 128, 128, 0.1); background-color: rgba(128, 128, 128, 0.1);
box-shadow: 0 1px 4px #ccc;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
border-radius: 3px; border-radius: 3px;
@ -23,8 +20,6 @@
} }
&.checked { &.checked {
box-shadow: 0 1px 4px #00a;
box-shadow: 0 1px 5px rgba(0, 0, 255, 0.3);
box-shadow: 0 0 0 1px rgba(0, 0, 255, 0.1), 0 1px 5px rgba(0, 0, 255, 0.2); box-shadow: 0 0 0 1px rgba(0, 0, 255, 0.1), 0 1px 5px rgba(0, 0, 255, 0.2);
} }

32
dev/Styles/User/Compose.less
View file

@ -73,6 +73,20 @@
padding: 10px; padding: 10px;
background-color: rgba(128,128,128,0.2);; background-color: rgba(128,128,128,0.2);;
table {
border-collapse: collapse;
width: 100%;
}
td {
vertical-align: baseline;
padding: 2px 0;
}
td:first-child {
padding: 0 10px 0 0;
text-align: right;
width: 4em;
}
.e-identity { .e-identity {
color: var(--main-color); color: var(--main-color);
@ -85,26 +99,16 @@
} }
} }
.e-row { > div {
line-height: 30px; line-height: 30px;
} }
.e-label {
text-align: right;
padding: 6px 10px;
}
.e-value {
padding: 2px 0;
textarea, input[type="text"] { textarea, input[type="text"] {
width: 100%; width: 100%;
} }
textarea { textarea {
height: 40px; height: 40px;
} }
}
.error-desc { .error-desc {
color: red; color: red;
@ -164,9 +168,3 @@
margin-right: 15px; margin-right: 15px;
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 700px) {
.b-compose .b-header .e-label {
padding-left: 0;
}
}

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

@ -105,22 +105,6 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
} }
} }
.g-ui-table {
display: table;
width: 100%;
.e-row {
display: table-row;
}
.e-cell {
display: table-cell;
vertical-align: top;
text-align: left;
}
}
.b-message-list-wrapper.resizable { .b-message-list-wrapper.resizable {
resize: vertical; resize: vertical;
overflow: hidden; overflow: hidden;
@ -215,7 +199,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
.dropdown.colored-toggle.open .btn.dropdown-toggle { .dropdown.colored-toggle.show .btn.dropdown-toggle {
color: #BD362F; color: #BD362F;
.caret { .caret {

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

@ -244,7 +244,6 @@ html.rl-no-preview-pane {
} }
.checkboxMessage { .checkboxMessage {
line-height: 12px;
padding: 0 8px 0 6px; padding: 0 8px 0 6px;
font-size: 16px; font-size: 16px;
} }
@ -264,7 +263,9 @@ html.rl-no-preview-pane {
} }
.senderParent, .subjectParent { .senderParent, .subjectParent {
margin: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@ -293,12 +294,6 @@ html.rl-no-preview-pane {
opacity: 0.5; opacity: 0.5;
} }
.senderParent, .subjectParent {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.threads-len span { .threads-len span {
border-radius: 6px; border-radius: 6px;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -411,6 +406,7 @@ html.rl-ctrl-key-pressed .messageListItem {
.messageListItem { .messageListItem {
.checkboxMessage { .checkboxMessage {
line-height: 12px;
margin: 10px 0 -5px; margin: 10px 0 -5px;
} }
@ -450,21 +446,15 @@ html:not(.rl-mobile):not(.rl-side-preview-pane) {
line-height: 25px; line-height: 25px;
flex-wrap: nowrap; flex-wrap: nowrap;
.checkboxMessage { > * {
line-height: 25px; line-height: 25px;
} }
.flagParent {
margin-top: 6px;
}
.attachmentParent { .attachmentParent {
margin: 6px 8px 0 0; margin: 6px 8px 0 0;
} }
.senderParent { .senderParent {
font-weight: normal;
text-overflow: none;
flex: 0 0 25%; flex: 0 0 25%;
} }

1
dev/Styles/_End.less
View file

@ -31,7 +31,6 @@
border-width: 5px; border-width: 5px;
content: ""; content: "";
margin: -5px; margin: -5px;
max-width: 80vw;
position: absolute; position: absolute;
top: 100%; top: 100%;
transform: rotate(-45deg); transform: rotate(-45deg);

131
snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
View file

@ -19,13 +19,11 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="b-header g-ui-user-select-none"> <div class="b-header g-ui-user-select-none">
<div class="g-ui-table"> <table>
<div class="e-row" style="height: 40px;"> <tr>
<div class="e-cell e-label"> <td data-i18n="GLOBAL/FROM"></td>
<label class="control-label" data-i18n="GLOBAL/FROM"></label> <td>
</div> <div class="dropdown" style="display:inline-block" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
<div class="e-cell e-value">
<div class="dropdown pull-left" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
<a class="dropdown-toggle e-identity" href="#" tabindex="-1" <a class="dropdown-toggle e-identity" href="#" tabindex="-1"
id="identity-label-id" role="button" id="identity-label-id" role="button"
data-bind="text: currentIdentityView, css: {'multiply': 1 < identitiesOptions().length }"> data-bind="text: currentIdentityView, css: {'multiply': 1 < identitiesOptions().length }">
@ -39,9 +37,30 @@
<!-- /ko --> <!-- /ko -->
</div> </div>
<div class="pull-right"> <div class="pull-right">
<div class="btn-group dropdown colored-toggle pull-right" style="margin-right: 4px;" data-bind="registerBootstrapDropdown: true"> <a class="btn" data-i18n="GLOBAL/BCC"
data-bind="visible: !showBcc(), click: function () { showBcc(true); }"></a>
<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true" style="display:inline;vertical-align:top">
<a class="btn dropdown-toggle fontastic">☰</a> <a class="btn dropdown-toggle fontastic">☰</a>
<ul class="dropdown-menu right-edge g-ui-menu" role="menu"> <ul class="dropdown-menu right-edge g-ui-menu" role="menu">
<li class="e-item" data-bind="click: function () { showBcc(!showBcc()); }">
<a class="e-link">
<i class="fontastic" data-bind="text: showBcc() ? '☑' : '☐'"></i>
<span data-i18n="GLOBAL/BCC"></span>
</a>
</li>
<li class="e-item" data-bind="click: function () { showCc(!showCc()); }">
<a class="e-link">
<i class="fontastic" data-bind="text: showCc() ? '☑' : '☐'"></i>
<span data-i18n="GLOBAL/CC"></span>
</a>
</li>
<li class="e-item" data-bind="click: function () { showReplyTo(!showReplyTo()); }">
<a class="e-link">
<i class="fontastic" data-bind="text: showReplyTo() ? '☑' : '☐'"></i>
<span data-i18n="GLOBAL/REPLY_TO"></span>
</a>
</li>
<li class="e-item" data-bind="click: function () { requestReadReceipt(!requestReadReceipt()); }"> <li class="e-item" data-bind="click: function () { requestReadReceipt(!requestReadReceipt()); }">
<a class="e-link"> <a class="e-link">
<i class="fontastic" data-bind="text: requestReadReceipt() ? '☑' : '☐'"></i> <i class="fontastic" data-bind="text: requestReadReceipt() ? '☑' : '☐'"></i>
@ -68,64 +87,46 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="btn-group pull-right">
<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
</div>
</div>
<span class="pull-right">
<span class="g-ui-link" data-i18n="GLOBAL/CC"
data-bind="visible: !showCc(), click: function () { showCc(true); }"></span>
&nbsp;&nbsp;
<span data-bind="visible: !showBcc()">
<span class="g-ui-link" data-i18n="GLOBAL/BCC"
data-bind="click: function () { showBcc(true); }"></span>
&nbsp;&nbsp;
</span> </span>
<span class="g-ui-link" data-i18n="GLOBAL/REPLY_TO" </td>
data-bind="visible: !showReplyTo(), click: function () { showReplyTo(true); }"></span> </tr>
&nbsp; <tr>
</span> <td>
</div> <label data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
</div> data-i18n="GLOBAL/TO"></label>
<div class="e-row"> </td>
<div class="e-cell e-label"> <td>
<label class="control-label" data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
data-i18n="GLOBAL/TO"</label>
</div>
<div class="e-cell e-value">
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: to, autoCompleteSource: emailsSource" /> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: to, autoCompleteSource: emailsSource" />
</div> </td>
</div> </tr>
<div class="e-row cc-row" data-bind="visible: showCc"> <tr class="cc-row" data-bind="visible: showCc">
<div class="e-cell e-label" data-i18n="GLOBAL/CC"></div> <td data-i18n="GLOBAL/CC"></div>
<div class="e-cell e-value"> <td>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: cc, autoCompleteSource: emailsSource" /> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: cc, autoCompleteSource: emailsSource" />
</div> </td>
</div> </tr>
<div class="e-row bcc-row" data-bind="visible: showBcc"> <tr class="bcc-row" data-bind="visible: showBcc">
<div class="e-cell e-label" data-i18n="GLOBAL/BCC"></div> <td data-i18n="GLOBAL/BCC"></div>
<div class="e-cell e-value"> <td>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: bcc, autoCompleteSource: emailsSource" /> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: bcc, autoCompleteSource: emailsSource" />
</div> </td>
</div> </tr>
<div class="e-row reply-to-row" data-bind="visible: showReplyTo"> <tr class="reply-to-row" data-bind="visible: showReplyTo">
<div class="e-cell e-label" data-i18n="GLOBAL/REPLY_TO"></div> <td data-i18n="GLOBAL/REPLY_TO"></div>
<div class="e-cell e-value"> <td>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: replyTo, autoCompleteSource: emailsSource" /> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: replyTo, autoCompleteSource: emailsSource" />
</div> </td>
</div> </tr>
<div class="e-row"> <tr>
<div class="e-cell e-label" data-i18n="GLOBAL/SUBJECT"></div> <td data-i18n="GLOBAL/SUBJECT"></div>
<div class="e-cell e-value"> <td>
<input type="text" size="70" autocomplete="off" data-bind="textInput: subject" /> <input type="text" size="70" autocomplete="off" data-bind="textInput: subject" />
</div> </td>
</div> </tr>
<div class="e-row"> <tr>
<div class="e-cell e-label"></div> <td></td>
<div class="e-cell e-value"> <td>
<div> <div class="btn-group pull-left">
<div class="pull-left">
<div class="btn-group">
<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(false); }, <button type="button" class="btn" data-bind="click: function () { attachmentsPlace(false); },
css: { 'active': !attachmentsPlace() }"> css: { 'active': !attachmentsPlace() }">
<i class="icon-file-text"></i> <i class="icon-file-text"></i>
@ -140,8 +141,6 @@
<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount()}"></i> <i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount()}"></i>
</button> </button>
</div> </div>
</div>
<div class="pull-right" style="margin-right: 4px;">
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<a class="btn" <a class="btn"
style="padding-left: 10px; padding-right: 10px;" style="padding-left: 10px; padding-right: 10px;"
@ -149,11 +148,9 @@
<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i> <sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>
</a> </a>
</div> </div>
</div> </td>
</div> </tr>
</div> </table>
</div>
</div>
</div> </div>
<div class="attachmentAreaParent b-content" data-bind="visible: attachmentsPlace"> <div class="attachmentAreaParent b-content" data-bind="visible: attachmentsPlace">