Cleanup some CSS and improve mail compose screen

2024-09-20 15:45:55 +08:00 · 2021-10-26 13:36:05 +02:00 · 2021-10-26 13:36:05 +02:00 · 2efa0d8eb7
parent 09a9a45e98
commit 2efa0d8eb7
6 changed files with 108 additions and 145 deletions
--- a/dev/Styles/User/Attachmnets.less
+++ b/dev/Styles/User/Attachmnets.less
@ -11,9 +11,6 @@
 	line-height: 24px;
 	border: 0;
 	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);

 	border-radius: 3px;
@ -23,8 +20,6 @@
 	}

 	&.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);
 	}

--- a/dev/Styles/User/Compose.less
+++ b/dev/Styles/User/Compose.less
@ -73,6 +73,20 @@
 		padding: 10px;
 		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 {

 			color: var(--main-color);
@ -85,25 +99,15 @@
 			}
 		}

-		.e-row {
+		> div {
 			line-height: 30px;
 		}

-		.e-label {
-			text-align: right;
-			padding: 6px 10px;
+		textarea, input[type="text"] {
+			width: 100%;
 		}
-
-		.e-value {
-
-			padding: 2px 0;
-
-			textarea, input[type="text"] {
-				width: 100%;
-			}
-			textarea {
-				height: 40px;
-			}
+		textarea {
+			height: 40px;
 		}

 		.error-desc {
@ -164,9 +168,3 @@
 	margin-right: 15px;
 	cursor: pointer;
 }
-
-@media screen and (max-width: 700px) {
-	.b-compose .b-header .e-label {
-		padding-left: 0;
-	}
-}
--- a/dev/Styles/User/Layout.less
+++ b/dev/Styles/User/Layout.less
@ -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 {
 	resize: vertical;
 	overflow: hidden;
@ -215,7 +199,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 	border-top: 1px solid #e5e5e5;
 }

-.dropdown.colored-toggle.open .btn.dropdown-toggle {
+.dropdown.colored-toggle.show .btn.dropdown-toggle {
 	color: #BD362F;

 	.caret {
--- a/dev/Styles/User/MessageList.less
+++ b/dev/Styles/User/MessageList.less
@ -244,7 +244,6 @@ html.rl-no-preview-pane {
 	}

 	.checkboxMessage {
-		line-height: 12px;
 		padding: 0 8px 0 6px;
 		font-size: 16px;
 	}
@ -264,7 +263,9 @@ html.rl-no-preview-pane {
 	}

 	.senderParent, .subjectParent {
+		margin: 0;
 		overflow: hidden;
+		text-overflow: ellipsis;
 		white-space: nowrap;
 	}

@ -293,12 +294,6 @@ html.rl-no-preview-pane {
 		opacity: 0.5;
 	}

-	.senderParent, .subjectParent {
-		margin: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
 	.threads-len span {
 		border-radius: 6px;
 		border: 1px solid #ccc;
@ -411,6 +406,7 @@ html.rl-ctrl-key-pressed .messageListItem {
 	.messageListItem {

 		.checkboxMessage {
+			line-height: 12px;
 			margin: 10px 0 -5px;
 		}

@ -450,21 +446,15 @@ html:not(.rl-mobile):not(.rl-side-preview-pane) {
 		line-height: 25px;
 		flex-wrap: nowrap;

-		.checkboxMessage {
+		> * {
 			line-height: 25px;
 		}

-		.flagParent {
-			margin-top: 6px;
-		}
-
 		.attachmentParent {
 			margin: 6px 8px 0 0;
 		}

 		.senderParent {
-			font-weight: normal;
-			text-overflow: none;
 			flex: 0 0 25%;
 		}

--- a/dev/Styles/_End.less
+++ b/dev/Styles/_End.less
@ -31,7 +31,6 @@
 	border-width: 5px;
 	content: "";
 	margin: -5px;
-	max-width: 80vw;
 	position: absolute;
 	top: 100%;
 	transform: rotate(-45deg);
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
@ -19,13 +19,11 @@
 	</div>
 	<div class="modal-body">
 		<div class="b-header g-ui-user-select-none">
-			<div class="g-ui-table">
-				<div class="e-row" style="height: 40px;">
-					<div class="e-cell e-label">
-						<label class="control-label" data-i18n="GLOBAL/FROM"></label>
-					</div>
-					<div class="e-cell e-value">
-						<div class="dropdown pull-left" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
+			<table>
+				<tr>
+					<td data-i18n="GLOBAL/FROM"></td>
+					<td>
+						<div class="dropdown" style="display:inline-block" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
 							<a class="dropdown-toggle e-identity" href="#" tabindex="-1"
 								id="identity-label-id" role="button"
 								data-bind="text: currentIdentityView, css: {'multiply': 1 < identitiesOptions().length }">
@ -39,9 +37,30 @@
 							<!-- /ko -->
 						</div>
 						<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>
 								<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()); }">
 										<a class="e-link">
 											<i class="fontastic" data-bind="text: requestReadReceipt() ? '☑' : '☐'"></i>
@ -68,92 +87,70 @@
 									</li>
 								</ul>
 							</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 class="g-ui-link" data-i18n="GLOBAL/REPLY_TO"
-								data-bind="visible: !showReplyTo(), click: function () { showReplyTo(true); }"></span>
-							&nbsp;
 						</span>
-					</div>
-				</div>
-				<div class="e-row">
-					<div class="e-cell e-label">
-						<label class="control-label" data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
-							data-i18n="GLOBAL/TO"</label>
-					</div>
-					<div class="e-cell e-value">
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<label data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
+							data-i18n="GLOBAL/TO"></label>
+					</td>
+					<td>
 						<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: to, autoCompleteSource: emailsSource" />
-					</div>
-				</div>
-				<div class="e-row cc-row" data-bind="visible: showCc">
-					<div class="e-cell e-label" data-i18n="GLOBAL/CC"></div>
-					<div class="e-cell e-value">
+					</td>
+				</tr>
+				<tr class="cc-row" data-bind="visible: showCc">
+					<td data-i18n="GLOBAL/CC"></div>
+					<td>
 						<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: cc, autoCompleteSource: emailsSource" />
-					</div>
-				</div>
-				<div class="e-row bcc-row" data-bind="visible: showBcc">
-					<div class="e-cell e-label" data-i18n="GLOBAL/BCC"></div>
-					<div class="e-cell e-value">
+					</td>
+				</tr>
+				<tr class="bcc-row" data-bind="visible: showBcc">
+					<td data-i18n="GLOBAL/BCC"></div>
+					<td>
 						<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: bcc, autoCompleteSource: emailsSource" />
-					</div>
-				</div>
-				<div class="e-row reply-to-row" data-bind="visible: showReplyTo">
-					<div class="e-cell e-label" data-i18n="GLOBAL/REPLY_TO"></div>
-					<div class="e-cell e-value">
+					</td>
+				</tr>
+				<tr class="reply-to-row" data-bind="visible: showReplyTo">
+					<td data-i18n="GLOBAL/REPLY_TO"></div>
+					<td>
 						<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: replyTo, autoCompleteSource: emailsSource" />
-					</div>
-				</div>
-				<div class="e-row">
-					<div class="e-cell e-label" data-i18n="GLOBAL/SUBJECT"></div>
-					<div class="e-cell e-value">
+					</td>
+				</tr>
+				<tr>
+					<td data-i18n="GLOBAL/SUBJECT"></div>
+					<td>
 						<input type="text" size="70" autocomplete="off" data-bind="textInput: subject" />
-					</div>
-				</div>
-				<div class="e-row">
-					<div class="e-cell e-label"></div>
-					<div class="e-cell e-value">
-						<div>
-							<div class="pull-left">
-								<div class="btn-group">
-									<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(false); },
-										css: { 'active': !attachmentsPlace() }">
-										<i class="icon-file-text"></i>
-									</button>
-									<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(true); },
-										css: { 'btn-danger': 0 < attachmentsInErrorCount(), 'active': attachmentsPlace() },
-										tooltipErrorTip: attachmentsErrorTooltip">
-										<span data-bind="visible: 0 < attachmentsCount()">
-											<b data-bind="text: attachmentsCount"></b>
-											&nbsp;&nbsp;
-										</span>
-										<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount()}"></i>
-									</button>
-								</div>
-							</div>
-							<div class="pull-right" style="margin-right: 4px;">
-								<div class="btn-group pull-right">
-									<a class="btn"
-										style="padding-left: 10px; padding-right: 10px;"
-										data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton" data-i18n="[title]COMPOSE/ATTACH_FILES">
-										<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>
-									</a>
-								</div>
-							</div>
+					</td>
+				</tr>
+				<tr>
+					<td></td>
+					<td>
+						<div class="btn-group pull-left">
+							<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(false); },
+								css: { 'active': !attachmentsPlace() }">
+								<i class="icon-file-text"></i>
+							</button>
+							<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(true); },
+								css: { 'btn-danger': 0 < attachmentsInErrorCount(), 'active': attachmentsPlace() },
+								tooltipErrorTip: attachmentsErrorTooltip">
+								<span data-bind="visible: 0 < attachmentsCount()">
+									<b data-bind="text: attachmentsCount"></b>
+									&nbsp;&nbsp;
+								</span>
+								<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount()}"></i>
+							</button>
 						</div>
-					</div>
-				</div>
-			</div>
+						<div class="btn-group pull-right">
+							<a class="btn"
+								style="padding-left: 10px; padding-right: 10px;"
+								data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton" data-i18n="[title]COMPOSE/ATTACH_FILES">
+								<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>
+							</a>
+						</div>
+					</td>
+				</tr>
+			</table>
 		</div>

 		<div class="attachmentAreaParent b-content" data-bind="visible: attachmentsPlace">