Less float & less html is mobile view profit

dev/Styles/Animations.less

@@ -9,10 +9,6 @@
 	0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }
 }
 
-@keyframes bounce-me {
-	0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }
-}
-
 @keyframes textLoadingAnimationKeyFrame {
 	0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; }
 }
@@ -93,10 +89,6 @@ html.no-mobile {
 		opacity: 0;
 	}
 
-	.btn-group.dropdown.colored-toggle.open .animate-this-icon-on-open {
-		animation: bounce-me .5s linear;
-	}
-
 	.b-login-content .loginFormWrapper {
 		transition: all 0.3s ease-out;
 	}

dev/Styles/Contacts.less

@@ -230,7 +230,7 @@
 			right: 0;
 			left: @contacts-popup-left-width;
 			height: 31px;
-			text-align: center;
+			text-align: right;
 			box-shadow: inset 0 -1px 0 #ccc;
 
 			.button-save-contact {

dev/Styles/FolderList.less

@@ -1,5 +1,5 @@
 
-@folderItemPadding: 10px;
+@folderItemPadding: 7px;
 @subPadding: 15px;
 
 .b-folders {
@@ -86,17 +86,7 @@
 			color: var(--folders-disabled-color, #666);
 			cursor: not-allowed;
 			font-size: 14px;
-
-			.focused-poiner {
-				float: left;
-				display: inline-block;
-				background-color: transparent;
-				height: 100%;
-				width: 3px;
-				position: absolute;
-				top: 0;
-				left: 0;
-			}
+			border-left: 3px solid transparent;
 
 			.inbox-star-icon {
 				display: none;
@@ -157,10 +147,7 @@
 
 			&.focused {
 				background-color: #888;
-
-				.focused-poiner {
-					background-color: #fff;
-				}
+				border-left-color: #fff;
 			}
 
 			&.system {

dev/Styles/Languages.less

@@ -21,15 +21,23 @@
 			background-color: #fff;
 			text-align: left;
 			border: 1px solid transparent;
-			border-radius: 2px;
+			border-radius: 3px;
+			position: relative;
 
 			&.user {
-				background-color: #fffddd;
-				border-color: #fff555;
+				background-color: #ffd;
+				border-color: #ff5;
 			}
 			&.selected {
-				background-color: #f5f5f5;
-				border-color: #ccc;
+				background-color: #efe;
+				border-color: #9c9;
+			}
+			&.selected::after {
+				content: "✔";
+				color: #080;
+				position: absolute;
+				right: 4px;
+				font-family: snappymail;
 			}
 			&:hover {
 				background-color: #eee;

dev/Styles/SystemDropDown.less

@@ -7,8 +7,6 @@
 .rl-left-panel-disabled #more-list-dropdown-id + .dropdown-menu {
     position: fixed;
     top: 40px;
-	right: auto;
-	left: 0;
 }
 
 .b-system-drop-down {

dev/Styles/_BootstrapFix.less

@@ -81,10 +81,6 @@ label.inline, span.inline {
 	}
 }
 
-.btn-group.btn-group-custom-margin > .btn + .btn {
-	margin-left: 0;
-}
-
 .btn {
 //	&:active {
 //		.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 rgba(0,0,0,.1)");

dev/View/User/AbstractSystemDropDown.js

@@ -10,6 +10,7 @@ import { AbstractViewRight } from 'Knoin/AbstractViews';
 
 import { KeyboardShortcutsHelpPopupView } from 'View/Popup/KeyboardShortcutsHelp';
 import { AccountPopupView } from 'View/Popup/Account';
+import { ContactsPopupView } from 'View/Popup/Contacts';
 
 import { Settings } from 'Common/Globals';
 
@@ -35,6 +36,8 @@ export class AbstractSystemDropDownUserView extends AbstractViewRight {
 			capaAdditionalAccounts: Settings.capa(Capa.AdditionalAccounts)
 		});
 
+		this.allowContacts = !!AppStore.contactsIsAllowed();
+
 		this.addAccountClick = this.addAccountClick.bind(this);
 
 		addEventListener('audio.stop', () => AppStore.currentAudio(''));
@@ -76,6 +79,12 @@ export class AbstractSystemDropDownUserView extends AbstractViewRight {
 		}
 	}
 
+	contactsClick() {
+		if (this.allowContacts) {
+			showScreenPopup(ContactsPopupView);
+		}
+	}
+
 	logoutClick() {
 		rl.app.logout();
 	}

snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html

@@ -8,9 +8,8 @@
 	<div class="modal-body" style="min-height: 150px;">
 		<div data-bind="foreach: languages">
 			<label class="lang-item" data-tooltip-i18n="off" data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
-				tooltip: function () { return $root.languageTooltipName(key); }">
-				<span class="lang-name" data-bind="text: fullName"></span>
-				<i class="icon-ok pull-right" style="color: green; margin-top: 3px;" data-bind="visible: selected"></i>
+				tooltip: function () { return $root.languageTooltipName(key); },
+				text: fullName">
 			</label>
 		</div>
 	</div>

snappymail/v/0.0.0/app/templates/Views/User/MailFolderListItem.html

@@ -3,7 +3,6 @@
 	   css: { 'i-am-inbox': isInbox, 'selected': selected() && !isSystemFolder(), 'selectable': canBeSelected, 'hidden' : hidden, 'print-count': hasUnreadMessages, 'unread-sub': hasSubscribedUnreadMessagesSubfolders, 'system': isSystemFolder, 'anim-action-class': actionBlink }">
 		<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
 		<i data-bind="css: collapsedCss()"></i>
-		<span class="focused-poiner"></span>
 		<span class="name" data-bind="text: name"></span>
 	</a>
 	<div class="b-sub-folders" data-bind="template: { name: 'MailFolderListItem', foreach: subFolders }, css: { 'collapsed': collapsed() }"></div>

snappymail/v/0.0.0/app/templates/Views/User/MailFolderListSystemItem.html

@@ -2,7 +2,6 @@
 	<a class="e-link" data-bind="dropmessages: $data, css: { 'selected': selected, 'selectable': selectable, 'print-count': 0 < printableUnreadCount().length, 'anim-action-class': actionBlink, 'is-inbox': isInbox }">
 		<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
 		&nbsp;
-		<span class="focused-poiner"></span>
 		<span class="name" data-bind="text: localName()"></span>
 		<span class="inbox-star-icon">
 			<i class="icon-star"></i>

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -14,20 +14,17 @@
 						<i class="icon-left-middle"></i>
 					</a>
 				</div>
-				<div class="btn-group">&nbsp;</div>
 				<!-- /ko -->
 				<div class="btn-group" data-bind="visible: mobile && allowComposer && mobileCheckedStateHide()">
 					<a class="btn buttonCompose" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
 						<i class="icon-paper-plane"></i>
 					</a>
 				</div>
-				<div class="btn-group" data-bind="visible: mobileCheckedStateHide()">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">
 					<a class="btn buttonReload" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
 						<i class="icon-spinner" data-bind="css: {'not-animated': !messageListCompleteLoadingThrottleForAnimation()}"></i>
 					</a>
 				</div>
-				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div>
 				<!-- ko if: !newMoveToFolder -->
 				<div class="btn-group dropdown colored-toggle hide-on-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, tooltip: 'GLOBAL/MOVE_TO'">
@@ -50,7 +47,6 @@
 					</a>
 				</div>
 				<!-- /ko -->
-				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateHide()">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
 					<a class="btn button-archive"
 						data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'">
@@ -72,9 +68,9 @@
 				</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 buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-bind="tooltip: 'GLOBAL/MORE'">
-						<i class="icon-list animate-this-icon-on-open"></i>
+						<i class="icon-list"></i>
 					</a>
-					<ul class="dropdown-menu pull-right g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
+					<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">

snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -54,26 +54,32 @@
 					<i class="icon-mail"></i>
 				</div>
 
-				<div class="b-message-view-desc error" data-bind="visible: !message() && '' !== messageError() && !hasCheckedMessages()">
-					<span class="text" data-bind="text: messageError()"></span>
+				<div class="b-message-view-desc error" data-bind="visible: !message() && '' !== messageError() && !hasCheckedMessages(), text: messageError()">
 				</div>
 
-				<div data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()" style="height: 100%">
-
-					<div class="b-message-view-desc">
-						<span class="i18n" data-i18n="MESSAGE/MESSAGE_VIEW_DESC"></span>
-					</div>
-
+				<div class="b-message-view-desc" class="i18n" data-i18n="MESSAGE/MESSAGE_VIEW_DESC" data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()">
 				</div>
 
-				<div class="message-fixed-button-toolbar clearfix" data-bind="visible: message">
-					<div class="btn-group pull-right" style="margin-right: -11px;">
-						<div class="btn-group pull-right" data-bind="registerBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions">
+				<div class="message-fixed-button-toolbar" data-bind="visible: message">
+					<div class="btn-group" style="margin-right: -11px;">
+						<a class="btn btn-thin-2 btn-transparent buttonReply"
+							data-bind="visible: 'reply' === lastReplyAction() && allowComposer, command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
+							<i class="fontastic">←</i>
+						</a>
+						<a class="btn btn-thin-2 btn-transparent buttonReplyAll"
+							data-bind="visible: 'replyall' === lastReplyAction() && allowComposer, command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
+							<i class="fontastic">↞</i>
+						</a>
+						<a class="btn btn-thin-2 btn-transparent buttonForward"
+							data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
+							<i class="fontastic">→</i>
+						</a>
+						<div class="btn-group" data-bind="registerBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions" style="display: inline-block">
 							<a class="btn btn-thin-2 btn-transparent dropdown-toggle buttonMore" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand">
 									<span data-bind="visible: !allowComposer" class="fontastic">⋮</span>
 									<span data-bind="visible: allowComposer" class="caret"></span>
 							</a>
-							<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-view-dropdown-id">
+							<ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
 								<div data-bind="visible: allowComposer && !isDraftFolder()">
 									<li class="e-item" role="presentation">
 										<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyCommand">
@@ -180,21 +186,9 @@
 								</div>
 							</ul>
 						</div>
-						<a class="btn btn-thin-2 btn-transparent buttonReply pull-right"
-							data-bind="visible: 'reply' === lastReplyAction() && allowComposer, command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
-							<i class="fontastic">←</i>
-						</a>
-						<a class="btn btn-thin-2 btn-transparent buttonReplyAll pull-right"
-							data-bind="visible: 'replyall' === lastReplyAction() && allowComposer, command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
-							<i class="fontastic">↞</i>
-						</a>
-						<a class="btn btn-thin-2 btn-transparent buttonForward pull-right"
-							data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
-							<i class="fontastic">→</i>
-						</a>
 					</div>
 
-					<div class="btn-group pull-right hide-on-mobile" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'" style="margin-right: 5px">
+					<div class="btn-group hide-on-mobile" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'" style="margin-right: 5px">
 						<a class="btn btn-success buttonEdit" data-bind="command: messageEditCommand">
 							<i class="fontastic icon-white">🖉</i>
 						</a>
@@ -251,7 +245,6 @@
 										<td>
 											<span class="pull-right size" data-bind="text: viewSize"></span>
 											<span class="from uiLabelValue" data-bind="text: viewFrom, title: viewFrom"></span>
-									</div>
 										</td>
 									</tr>
 									<tr data-bind="visible: '' !== viewTo()">

snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html

@@ -30,7 +30,7 @@
 					<i data-bind="css: {'icon-list': !contacts.importing() && !contacts.syncing(),
 						'icon-spinner': contacts.importing() || contacts.syncing()}"></i>
 				</a>
-				<ul class="dropdown-menu g-ui-menu pull-right" role="menu" aria-labelledby="contacts-more-dropdown-id">
+				<ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id">
 					<li class="e-item" role="presentation">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="initDom: importUploaderButton">
 							<i data-bind="css: {'icon-import': !contacts.importing(), 'icon-spinner': contacts.importing}"></i>
@@ -108,7 +108,15 @@
 			</div>
 		</div>
 		<div class="b-view-content-toolbar btn-toolbar" data-bind="css: {'read-only': viewReadOnly}">
-			<div class="btn-group pull-right dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
+			<div class="btn-group">
+				<button class="btn button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}">
+					<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner': viewSaving()}"></i>
+					&nbsp;&nbsp;
+					<span class="i18n" data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>
+					<span class="i18n" data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
+				</button>
+			</div>
+			<div class="btn-group dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
 				<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle" data-toggle="dropdown">
 					<span class="i18n" data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
 					&nbsp;&nbsp;
@@ -150,15 +158,6 @@
 					</li>-->
 				</ul>
 			</div>
-			<div class="btn-group pull-right">&nbsp;</div>
-			<div class="btn-group pull-right">
-				<button class="btn button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}">
-					<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner': viewSaving()}"></i>
-					&nbsp;&nbsp;
-					<span class="i18n" data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>
-					<span class="i18n" data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
-				</button>
-			</div>
 		</div>
 		<div class="b-view-content" data-bind="css: {'read-only': viewReadOnly}">
 			<div class="content">

snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html

@@ -41,15 +41,20 @@
 						<!-- /ko -->
 					<!-- /ko -->
 
-					<!-- ko if: capaAdditionalAccounts -->
-					<li class="e-item dividerbar" role="presentation">
+					<li class="e-item dividerbar" role="presentation" data-bind="visible: capaAdditionalAccounts">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addAccountClick">
 							<i class="icon-plus"></i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"></span>
 						</a>
 					</li>
-					<!-- /ko -->
+					<li class="e-item" role="presentation" data-bind="visible: allowSettings">
+						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="visible: allowContacts, click: contactsClick">
+							<i class="icon-address-book"></i>
+							&nbsp;&nbsp;
+							<span class="i18n" data-i18n="GLOBAL/CONTACTS"></span>
+						</a>
+					</li>
 					<li class="e-item" role="presentation" data-bind="visible: allowSettings">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: settingsClick">
 							<i class="fontastic">⚙</i>

vendors/bootstrap/less/button-groups.less

@@ -10,7 +10,7 @@
   white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
 }
 
-.btn-group:not(:first-child) {
+.btn-group + .btn-group {
   margin-left: 3px;
 }
 

vendors/bootstrap/less/dropdowns.less

@@ -51,7 +51,7 @@
   background-clip: padding-box;
 
   // Aligns the dropdown menu to right
-  &.pull-right {
+  &.right-edge {
     right: 0;
     left: auto;
   }

vendors/bootstrap/less/navs.less

@@ -34,12 +34,11 @@
 // Give the tabs something to sit on
 .nav-tabs {
   border-bottom: 1px solid #ddd;
-  .clearfix();
 }
 // Make the list-items overlay the bottom border
 .nav-tabs > li {
   margin-bottom: -1px;
-  float: left;
+  display: inline-block;
 }
 // Actual tabs (as links)
 .nav-tabs > li > a {
@@ -49,6 +48,7 @@
   line-height: @baseLineHeight;
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
+  padding: 5px;
   &:hover {
     border-color: @grayLighter @grayLighter #ddd;
   }