Attachments control panel

dev/Common/Audio.js

@@ -40,7 +40,7 @@
 			this.objForNotification.muted = false;
 			this.objForNotification.src = Links.sound('new-mail.mp3');
 
-			$(this.obj).on('ended', function () {
+			$(this.obj).on('ended error', function () {
 				self.stop();
 			});
 

dev/Model/Attachment.js

@@ -6,6 +6,7 @@
 	var
 		window = require('window'),
 		_ = require('_'),
+		ko = require('ko'),
 
 		Globals = require('Common/Globals'),
 		Utils = require('Common/Utils'),
@@ -22,6 +23,8 @@
 	{
 		AbstractModel.call(this, 'AttachmentModel');
 
+		this.checked = ko.observable(false);
+
 		this.mimeType = '';
 		this.fileName = '';
 		this.estimatedSize = 0;

dev/Styles/Attachmnets.less

@@ -1,5 +1,7 @@
 .attachmentItem {
 
+	position: relative;
+
 	display: inline-block;
 	margin: 5px;
 	max-width: 200px;
@@ -9,7 +11,8 @@
 	line-height: 24px;
 	border: 0;
 	background-color: #fff;
-	box-shadow: 0 1px 5px #ccc;
+
+	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);
 
@@ -19,6 +22,21 @@
 		opacity: 0.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);
+	}
+
+	.checkedParent {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 1px 4px 0px 5px;
+		background: #FAFAFA;
+		border: 0px solid #CCC;
+	}
+
 	.attachmentSize {
 		font-size: 12px;
 		color: #999;
@@ -117,6 +135,12 @@
 		display: none;
 	}
 
+	.attachmentIconParent.hasPreview.isImage {
+		.iconMain {
+			display: none;
+		}
+	}
+
 	.attachmentIconParent.hasPreview:hover {
 		.iconPreview {
 			display: inline-block;

dev/Styles/MessageView.less

@@ -247,10 +247,35 @@ html.rl-no-preview-pane {
 				padding: 10px 10px 6px 10px;
 				background: #eee;
 				border-bottom: 1px solid #ddd;
+				position: relative;
 
 				.attachmentList {
 					margin: 0;
 				}
+
+				.checkedParent {
+					display: none;
+				}
+
+				&.selection-mode {
+					.checkedParent {
+						display: inline-block;
+					}
+				}
+
+				.controls-handle {
+					position: absolute;
+					bottom: 5px;
+					right: 8px;
+					color: #999;
+					cursor: pointer;
+				}
+			}
+
+			.attachmentsControls {
+				padding: 7px 5px 7px 14px;
+				background: #e8e8e8;
+				border-bottom: 1px solid #ddd;
 			}
 
 			.rlBlockquoteSwitcher {
@@ -339,6 +364,12 @@ html.rl-no-preview-pane {
 							font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
 						}
 
+						pre.b-plain-openpgp {
+							display: inline-block;
+							padding: 6px 10px;
+							border: 1px dashed #666;
+						}
+
 						blockquote {
 							border-left: 2px solid blue;
 							color: blue;

dev/Styles/SystemDropDown.less

@@ -40,15 +40,35 @@
 		line-height: 30px;
 		margin-right: 15px;
 
-		.playIcon {
+		.playIcon, .stopIcon {
+			cursor: pointer;
+			color: orange;
+			text-shadow: 0 1px 0 #555;
+		}
 
+		.playIcon {
+			margin-top: 5px;
+		}
+
+		.stopIcon {
 			font-size: 30px;
 			line-height: 30px;
+			margin-right: 10px;
+		}
 
-			cursor: pointer;
+		.stopIcon {
+			display: none;
+		}
 
-			color: orange;
-			text-shadow: 0 1px 0 #fff;
+		&:hover {
+
+			.playIcon {
+				display: none;
+			}
+
+			.stopIcon {
+				display: inline-block;
+			}
 		}
 	}
 
@@ -102,4 +122,67 @@
 
 html.ssm-state-mobile .accountPlace {
 	max-width: 150px !important;
+}
+
+@keyframes firstBar {
+  0%   { height: 30%; }
+  50%  { height: 100%; }
+  100% { height: 30%; }
+}
+
+@keyframes secondBar {
+  0%   { height: 90%; }
+  50%  { height: 30%; }
+  100% { height: 100%; }
+}
+
+@keyframes thirdBar {
+  0%   { height: 20%; }
+  40%  { height: 40%; }
+  60%  { height: 80%; }
+  100% { height: 40%; }
+}
+
+.equaliser {
+
+	width: 20px;
+	height: 20px;
+	position: relative;
+
+	.bar {
+		float:left;
+		width: 5px;
+		height: 5px;
+		background: orange;
+		position: absolute;
+		bottom:0;
+	}
+
+
+	.first {
+		left: 0px;
+		animation: none;
+	}
+	.second {
+		left: 7px;
+		animation: none;
+	}
+	.third {
+		left: 14px;
+		animation: none;
+	}
+
+	&.animated {
+		.first {
+			animation: firstBar 1s infinite;
+		}
+		.second {
+			animation: secondBar 1s infinite;
+		}
+		.third {
+			animation: thirdBar 1s infinite;
+		}
+	}
+
+
 }

dev/View/User/MailBox/MessageView.js

@@ -79,6 +79,21 @@
 
 		this.messageListOfThreadsLoading = ko.observable(false).extend({'rateLimit': 1});
 
+		this.allowAttachmnetControls = ko.observable(false);
+		this.showAttachmnetControls = ko.observable(false);
+
+		this.showAttachmnetControls.subscribe(function (bV) {
+			if (this.message())
+			{
+				_.each(this.message().attachments(), function (oItem) {
+					if (oItem)
+					{
+						oItem.checked(!!bV);
+					}
+				});
+			}
+		}, this);
+
 		this.lastReplyAction_ = ko.observable('');
 		this.lastReplyAction = ko.computed({
 			read: this.lastReplyAction_,
@@ -407,6 +422,8 @@
 
 			if (oMessage)
 			{
+				this.showAttachmnetControls(false);
+
 				if (this.viewHash !== oMessage.hash)
 				{
 					this.scrollMessageToTop();