Add SPAM button on mobile view (#1073)

dev/Common/Enums.jsx

@@ -323,8 +323,7 @@ export const SaveSettingsStep = {
 export const Layout = {
 	'NoPreview': 0,
 	'SidePreview': 1,
-	'BottomPreview': 2,
+	'BottomPreview': 2
-	'Mobile': 3
 };
 
 /**

dev/Stores/User/Settings.js

@@ -62,7 +62,6 @@
 			Globals.$html.toggleClass('rl-no-preview-pane', Enums.Layout.NoPreview === nValue);
 			Globals.$html.toggleClass('rl-side-preview-pane', Enums.Layout.SidePreview === nValue);
 			Globals.$html.toggleClass('rl-bottom-preview-pane', Enums.Layout.BottomPreview === nValue);
-			Globals.$html.toggleClass('rl-mobile-layout', Enums.Layout.Mobile === nValue);
 
 			Events.pub('layout', [nValue]);
 		});

dev/Styles/MessageList.less

@@ -616,7 +616,7 @@ html.ssm-state-desktop-large {
 	}
 }
 
-html.cssanimations.rl-anim .messageList .line-loading {
+html.cssanimations .messageList .line-loading {
 	height: 5px !important;
 }
 

dev/Styles/MessageView.less

@@ -581,7 +581,7 @@ html.rl-bottom-preview-pane .messageView {
 	}
 }
 
-html.cssanimations.rl-anim .messageItem .line-loading {
+html.cssanimations .messageItem .line-loading {
 	height: 5px !important;
 }
 

dev/View/User/MailBox/MessageList.js

@@ -204,6 +204,16 @@
 			return this.isSpamFolder() && !this.isSpamDisabled() && !this.isDraftFolder() && !this.isSentFolder();
 		}, this);
 
+		this.mobileCheckedStateShow = ko.computed(function () {
+			var checked = 0 < this.messageListChecked().length;
+			return this.mobile ? checked : true;
+		}, this);
+
+		this.mobileCheckedStateHide = ko.computed(function () {
+			var checked = 0 < this.messageListChecked().length;
+			return this.mobile ? !checked : true;
+		}, this);
+
 		this.messageListFocused = ko.computed(function () {
 			return Enums.Focused.MessageList === AppStore.focusedState();
 		});

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

@@ -16,18 +16,18 @@
 				</div>
 				<div class="btn-group">&nbsp;</div>
 				<!-- /ko -->
-				<div class="btn-group" data-bind="visible: mobile && allowComposer">
+				<div class="btn-group" data-bind="visible: mobile && allowComposer && mobileCheckedStateHide()">
 					<a class="btn single buttonCompose" data-tooltip-join="top" 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 show-on-mobile">&nbsp;</div>
+				<div class="btn-group" data-bind="visible: mobileCheckedStateHide()">&nbsp;</div>
-				<div class="btn-group" data-bind="visible: allowReload">
+				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">
 					<a class="btn single btn-dark-disabled-border buttonReload" data-tooltip-join="top" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
 						<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottleForAnimation}"></i>
 					</a>
 				</div>
-				<div class="btn-group" data-bind="visible: allowReload">&nbsp;</div>
+				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div>
 				<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowMessageListActions, registrateBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
 					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-join="top" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
 						<i class="icon-copy visible-on-ctrl-btn"></i>
@@ -46,13 +46,13 @@
 						<!-- /ko -->
 					</ul>
 				</div>
-				<div class="btn-group" data-bind="visible: allowMessageListActions">&nbsp;</div>
+				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateHide()">&nbsp;</div>
-				<div class="btn-group" data-bind="visible: allowMessageListActions">
+				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
-					<a class="btn first btn-dark-disabled-border button-archive hide-on-mobile" data-tooltip-join="top"
+					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top"
 						data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
 						<i class="icon-archive"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-spam hide-on-mobile" data-tooltip-join="top"
+					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-join="top"
 						data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM',
 							css: {'first': !isArchiveVisible()}">
 						<i class="icon-angry-smiley"></i>
@@ -64,12 +64,12 @@
 					</a>
 					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top"
 						data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE',
-							css: {'first': mobile || (!isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible())}">
+							css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
 						<i class="icon-trash"></i>
 						<!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
 					</a>
 				</div>
-				<div class="btn-group" data-bind="visible: allowMessageListActions">&nbsp;</div>
+				<div class="btn-group hide-on-mobile" data-bind="visible: allowMessageListActions">&nbsp;</div>
 				<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
 					<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-join="top" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
 						<i class="icon-list animate-this-icon-on-open"></i>