Cleanup more CSS and JS

and merge/cleanup/redesign composer attachments

dev/App/User.js

@@ -405,13 +405,7 @@ class AppUser extends AbstractApp {
 			prom
 				.then((value) => !!value)
 				.then(callback)
-				.catch(() => {
-					setTimeout(() => {
-						if (callback) {
-							callback(false); // eslint-disable-line callback-return
-						}
-					}, 1);
-				});
+				.catch(() => callback && setTimeout(() => callback(false), 1));
 		}
 	}
 

dev/Common/File.js

@@ -133,7 +133,7 @@ export const FileInfo = {
 	getContentType: fileName => {
 		fileName = fileName.toLowerCase().trim();
 		if ('winmail.dat' === fileName) {
-			return 'application/ms-tnef';
+			return app + 'ms-tnef';
 		}
 		let ext = fileName.split('.').pop();
 		if (/^(txt|text|def|list|in|ini|log|sql|cfg|conf|asc)$/.test(ext))
@@ -171,49 +171,42 @@ export const FileInfo = {
 		let result = FileType.Unknown;
 		const mimeTypeParts = mimeType.split('/'),
 			type = mimeTypeParts[1].replace('x-','').replace('-compressed',''),
-			match = str => type.includes(str);
+			match = str => mimeType.includes(str),
+			archive = /^(zip|7z|tar|rar|gzip|bzip|bzip2)$/;
 
 		switch (true) {
-			case 'image' === mimeTypeParts[0] || ['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(ext):
+			case 'image' == mimeTypeParts[0] || ['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(ext):
 				result = FileType.Image;
 				break;
-			case 'audio' === mimeTypeParts[0] || ['mp3', 'ogg', 'oga', 'wav'].includes(ext):
+			case 'audio' == mimeTypeParts[0] || ['mp3', 'ogg', 'oga', 'wav'].includes(ext):
 				result = FileType.Audio;
 				break;
-			case 'video' === mimeTypeParts[0] || ['mkv', 'avi'].includes(ext):
+			case 'video' == mimeTypeParts[0] || 'mkv' == ext || 'avi' == ext:
 				result = FileType.Video;
 				break;
 			case ['php', 'js', 'css'].includes(ext):
 				result = FileType.Code;
 				break;
-			case 'eml' === ext || ['message/delivery-status', 'message/rfc822'].includes(mimeType):
+			case 'eml' == ext || ['message/delivery-status', 'message/rfc822'].includes(mimeType):
 				result = FileType.Eml;
 				break;
-			case 'text/html' === mimeType || ['html'].includes(ext):
+			case 'text/html' == mimeType || 'html' == ext:
 				result = FileType.Html;
 				break;
-			case 'text' === mimeTypeParts[0] || ['txt', 'log'].includes(ext):
+			case 'text' == mimeTypeParts[0] || 'txt' == ext || 'log' == ext:
 				result = FileType.Text;
 				break;
-			case [
-					'zip',
-					'7z',
-					'tar',
-					'rar',
-					'gzip',
-					'bzip',
-					'bzip2'
-				].includes(type) || ['zip', '7z', 'tar', 'rar', 'gzip', 'bzip', 'bzip2'].includes(ext):
+			case archive.test(type) || archive.test(ext):
 				result = FileType.Archive;
 				break;
 			case 'pdf' == type || 'pdf' == ext:
 				result = FileType.Pdf;
 				break;
-			case ['application/pgp-signature', 'application/pgp-keys'].includes(mimeType) ||
+			case [app+'pgp-signature', app+'pgp-keys'].includes(mimeType) ||
 				['asc', 'pem', 'ppk'].includes(ext):
 				result = FileType.Certificate;
 				break;
-			case ['application/pkcs7-signature'].includes(mimeType) || 'p7s' == ext:
+			case [app+'pkcs7-signature'].includes(mimeType) || 'p7s' == ext:
 				result = FileType.CertificateBin;
 				break;
 			case match(msOffice+'.wordprocessingml') || match(openDoc+'.text') || match('vnd.ms-word')
@@ -228,6 +221,7 @@ export const FileInfo = {
 				break;
 			// no default
 		}
+
 		return cache[key] = result;
 	},
 
@@ -270,10 +264,11 @@ export const FileInfo = {
 				result[0] += '-chart-graph';
 				break;
 			case FileType.Pdf:
-				result['icon-none', 'pdf'];
+				result = ['icon-none', 'pdf'];
 				break;
 			// no default
 		}
+
 		return result;
 	},
 

dev/External/CKEditor.js

@@ -1,102 +1,79 @@
-const config = {
-	title: false,
-	stylesSet: false,
-	customConfig: '',
-	contentsCss: '',
-	toolbarGroups: [
-		{ name: 'spec' },
-		{ name: 'styles' },
-		{ name: 'basicstyles', groups: ['basicstyles', 'cleanup', 'bidi'] },
-		{ name: 'colors' },
-		{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] },
-		{ name: 'links' },
-		{ name: 'insert' },
-		{ name: 'document', groups: ['mode', 'document', 'doctools'] },
-		{ name: 'others' }
-	],
-
-	removePlugins: 'liststyle',
-	removeButtons: 'Format,Undo,Redo,Cut,Copy,Paste,Anchor,Strike,Subscript,Superscript,Image,SelectAll',
-	removeDialogTabs: 'link:advanced;link:target;image:advanced;images:advanced',
-
-	extraPlugins: 'plain,signature',
-
-	allowedContent: true,
-	extraAllowedContent: true,
-
-	fillEmptyBlocks: false,
-	ignoreEmptyParagraph: true,
-	disableNativeSpellChecker: false,
-
-	colorButton_enableAutomatic: false,
-	colorButton_enableMore: true,
-
-	font_defaultLabel: 'Arial',
-	fontSize_defaultLabel: '13',
-	fontSize_sizes: '10/10px;12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;24/24px;28/28px;36/36px;48/48px'
-},
-
-htmlEditorLangsMap = {
-	'ar_sa': 'ar-sa',
-	'pt_br': 'pt-br',
-	'zh_cn': 'zh-cn',
-};
-
 export function createCKEditor(element)
 {
 	const language = (rl.settings.get('Language') || 'en').toLowerCase(),
-		noSource = !rl.settings.app('allowHtmlEditorSourceButton'),
-		noBidi = !rl.settings.app('allowHtmlEditorBitiButtons');
 
-	if (!config.__cfgInited) {
-		config.__cfgInited = true;
+		htmlEditorLangsMap = {
+			'ar_sa': 'ar-sa',
+			'pt_br': 'pt-br',
+			'zh_cn': 'zh-cn',
+		};
 
-		if (noSource) {
-			config.removeButtons += ',Source';
-		}
+	const editor = CKEDITOR.appendTo(element, {
+		title: false,
+		stylesSet: false,
+//		customConfig: '',
+//		contentsCss: '',
+		toolbarGroups: [
+			{ name: 'spec' },
+			{ name: 'styles' },
+			{ name: 'basicstyles', groups: ['basicstyles', 'cleanup', 'bidi'] },
+			{ name: 'colors' },
+			{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] },
+			{ name: 'links' },
+			{ name: 'insert' },
+			{ name: 'document', groups: ['mode', 'document', 'doctools'] },
+			{ name: 'others' }
+		],
 
-		if (noBidi) {
-			config.removePlugins += ',bidi';
-		}
-	}
+		removePlugins: 'liststyle' + (rl.settings.app('allowHtmlEditorBitiButtons') ? '' : ',bidi'),
+		removeButtons: 'Format,Undo,Redo,Cut,Copy,Paste,Anchor,Strike,Subscript,Superscript,Image,SelectAll'
+			+ (rl.settings.app('allowHtmlEditorSourceButton') ? '' : ',Source'),
+		removeDialogTabs: 'link:advanced;link:target;image:advanced;images:advanced',
 
-	config.enterMode = CKEDITOR.ENTER_BR;
-	config.shiftEnterMode = CKEDITOR.ENTER_P;
+		extraPlugins: 'plain,signature',
 
-	config.language = htmlEditorLangsMap[language] || language.substr(0,2);
+		allowedContent: true,
+		extraAllowedContent: true,
 
-	if (CKEDITOR.env) {
-		CKEDITOR.env.isCompatible = true;
-	}
+		fillEmptyBlocks: false,
+//		ignoreEmptyParagraph: true,
+		disableNativeSpellChecker: false,
 
-	const editor = CKEDITOR.appendTo(element, config);
+		colorButton_enableAutomatic: false,
+//		colorButton_enableMore: true,
+
+		font_defaultLabel: 'Arial',
+		fontSize_defaultLabel: '13',
+		fontSize_sizes: '10/10px;12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;24/24px;28/28px;36/36px;48/48px',
+
+		enterMode: CKEDITOR.ENTER_BR,
+		shiftEnterMode: CKEDITOR.ENTER_P,
+		language: htmlEditorLangsMap[language] || language.substr(0,2)
+	});
 
 	editor.on('key', event => !(event && event.data && 'Tab' == event.data.key));
 
-	if (window.FileReader) {
-		editor.on('drop', event => {
-			if (0 < event.data.dataTransfer.getFilesCount()) {
-				const file = event.data.dataTransfer.getFile(0);
-				if (file && event.data.dataTransfer.id && file.type && file.type.match(/^image/i)) {
-					const id = event.data.dataTransfer.id,
-						imageId = `[img=${id}]`,
-						reader = new FileReader();
+	editor.on('drop', event => {
+		const dt = event.data.dataTransfer,
+			id = dt.id,
+			file = dt.getFilesCount() ? dt.getFile(0) : 0;
+		if (file && id && file.type && file.type.match(/^image/i)) {
+			const imageId = `[img=${id}]`,
+				reader = new FileReader();
 
-					reader.onloadend = () => {
-						if (reader.result && 'wysiwyg' === editor.mode) {
-							try {
-								editor.setData(editor.getData().replace(imageId, `<img src="${reader.result}"/>`));
-							} catch (e) {} // eslint-disable-line no-empty
-						}
-					};
-
-					reader.readAsDataURL(file);
-
-					event.data.dataTransfer.setData('text/html', imageId);
+			reader.onloadend = () => {
+				if (reader.result && 'wysiwyg' === editor.mode) {
+					try {
+						editor.setData(editor.getData().replace(imageId, `<img src="${reader.result}"/>`));
+					} catch (e) {} // eslint-disable-line no-empty
 				}
-			}
-		});
-	}
+			};
+
+			reader.readAsDataURL(file);
+
+			dt.setData('text/html', imageId);
+		}
+	});
 
 	return editor;
 }

dev/Styles/Attachmnets.less

@@ -51,22 +51,11 @@
 
 	.attachmentIconParent {
 
-		position: relative;
-
+		position: absolute;
 		height: 56px;
 		width: 60px;
-
 		background: none;
-
-		.iconPreview, .iconBG, .iconMain, .iconProgress {
-			position: absolute;
-			top: 0;
-			left: 0;
-
-			display: inline-block;
-			width: 100%;
-			height: 100%;
-		}
+		text-align: center;
 
 		.iconProgress {
 			background: #eee;
@@ -75,21 +64,15 @@
 
 		.iconBG {
 			font-size: 18px;
-			text-align: center;
 			color: #999;
 			font-weight: bold;
 			line-height: 55px;
-			text-shadow: 0 1px 0 #fff;
 			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
 		}
 
 		.iconPreview {
 			display: none;
-
-			background: #555;
-			background-image: none;
 			background: rgba(0, 0, 0, .5) !important;
-
 			color: #fff;
 			text-shadow: 0 1px 0 #000;
 		}
@@ -111,20 +94,15 @@
 	}
 
 	.attachmentIcon {
-		margin: 6px 0 0 13px;
+		margin: 6px 0 0;
 		font-size: 36px;
 		width: 36px;
 		height: 36px;
 		color: #aaa;
-	}
 
-	.attachmentIcon  {
 		&.icon-none {
 			display: none;
 		}
-		&.icon-file-certificate {
-			margin-left: 15px;
-		}
 	}
 
 	.attachmentIconText {
@@ -134,7 +112,6 @@
 		height: 56px;
 		color: #aaa;
 		line-height: 56px;
-		text-align: center;
 		font-style: normal;
 	}
 
@@ -146,45 +123,22 @@
 	}
 */
 
-	.attachmentIconParent.hasPreview:hover {
-		.iconPreview {
-			display: inline-block;
-		}
-		.iconMain {
-			display: none;
-		}
-	}
-
-	.attachmentIconParent.hasPreplay:hover {
-		.iconPreview {
-			display: inline-block;
-		}
-		.iconMain {
-			display: none;
-		}
-	}
-
-	.showPreview, .showPreplay {
+	.showPreview, .showPreplay,
+	.attachmentIconParent.hasPreview:hover .iconMain,
+	.attachmentIconParent.hasPreplay:hover .iconMain,
+	.attachmentIconParent.hasPreview .hidePreview,
+	.attachmentIconParent.hasPreplay .hidePreview {
 		display: none;
+	}
+
+	.attachmentIconParent.hasPreview:hover .iconPreview,
+	.attachmentIconParent.hasPreplay:hover .iconPreview {
+		display: inline-block;
+	}
+
+	.attachmentIconParent.hasPreview .showPreview,
+	.attachmentIconParent.hasPreplay .showPreview {
+		display: inline;
 		cursor: pointer;
 	}
-
-	.attachmentIconParent.hasPreview {
-		.showPreview {
-			display: inline;
-		}
-
-		.hidePreview {
-			display: none;
-		}
-	}
-	.attachmentIconParent.hasPreplay {
-		.showPreplay {
-			display: inline;
-		}
-
-		.hidePreview {
-			display: none;
-		}
-	}
 }

dev/Styles/Compose.less

@@ -43,7 +43,6 @@
 
 	.b-header-toolbar {
 
-		height: 40px;
 		color: #fff;
 		background-color: rgba(0,0,0,0.8);
 

dev/Styles/EmailAddresses.less

@@ -7,7 +7,7 @@
 	cursor: text;
 	font-size: 90%;
 	list-style: none;
-	margin: 0 5px 0 0;
+	margin: 0;
 	padding: 0;
 	transition: border linear .2s, box-shadow linear .2s;
 }

dev/Styles/FolderList.less

@@ -64,7 +64,7 @@
 		}
 	}
 
-	.b-list-delimiter {
+	hr {
 		margin: 10px;
 		border-top: 0 solid #000;
 		border-bottom: 1px solid #999;
@@ -175,10 +175,6 @@
 
 			.e-collapsed-sign {
 				cursor: pointer;
-				width: 22px;
-				height: 30px;
-				line-height: 30px;
-				text-align: center;
 				vertical-align: inherit;
 			}
 		}

dev/Styles/Layout.less

@@ -309,6 +309,7 @@ html.rl-no-preview-pane {
 	}
 }
 
+html.rl-mobile #rl-left > .resizer,
 html.rl-side-preview-pane:not(.rl-mobile) #rl-right .resizer {
 	display: none !important;
 }

dev/Styles/MessageList.less

@@ -344,11 +344,6 @@ html.rl-no-preview-pane {
 					margin-right: 2px;
 					border: 1px solid #ccc;
 
-					[class^="icon-"],
-					[class*=" icon-"] {
-						font-size: 14px;
-					}
-
 					&:hover {
 						background-color: #aaa;
 						border-color: #666;

dev/Styles/_BootstrapFix.less

@@ -1,8 +1,4 @@
 
-label {
-	cursor: pointer;
-}
-
 label.inline, span.inline {
 	display: inline-block;
 }
@@ -49,12 +45,6 @@ label.inline, span.inline {
 	box-shadow: none !important;
 	opacity: .6;
 
-	[class^="icon-"] {
-		width: 19px;
-		height: 19px;
-		font-size: 19px;
-	}
-
 	&:hover {
 		opacity: 1;
 	}
@@ -65,9 +55,6 @@ label.inline, span.inline {
 	.caret {
 		border-top-color: #BD362F;
 	}
-	[class^="icon-"]:before {
-		color: #BD362F;
-	}
 }
 
 .dropdown-menu * + .dividerbar {
@@ -86,10 +73,6 @@ label.inline, span.inline {
 	.caret {
 		border-top-color: #BD362F;
 	}
-
-	[class^="icon-"]:before {
-		color: #BD362F;
-	}
 }
 
 .alert a {

dev/Styles/_FontasticToBoot.less

@@ -19,34 +19,11 @@
 	}
 }
 
-.iconsize20 {
-	font-size: 20px;
-}
-
+/* .b-contacts-content .b-view-content */
 .iconsize24 {
 	font-size: 24px;
 }
 
-/* White icons with optional class, or on hover/active states of certain elements */
-.icon-white,
-.nav > .active > a > [class^="icon-"],
-.nav > .active > a > [class*=" icon-"] {
-	color: #fff;
-}
-
-.g-ui-menu .e-item:hover [class^="icon-"],
-.g-ui-menu .e-item:hover [class*=" icon-"] {
-	color: #fff;
-}
-
-.icon-none {
-	background-image: none !important;
-}
-
-.iconcolor-display-none {
-	display: none;
-}
-
 .iconcolor-green {
 	color: green;
 }
@@ -69,25 +46,21 @@
 	border: 3px solid #aaa;
 	border-top-color: #333;
 	border-radius: 100%;
+}
 
-	&.big {
-
-		height: 13px;
-		width: 13px;
-
-		margin: -1px -2px;
+.btn-success .icon-spinner {
+	border-color: #fff;
+	border-top-color: #999;
+	&.animated {
+		border-color: transparent;
+		border-top-color: #fff;
 	}
+}
 
-	&.white, &.icon-white {
-
-		border-color: #fff;
-		border-top-color: #999;
-
-		&.animated {
-			border-color: transparent;
-			border-top-color: #fff;
-		}
-	}
+.btn-large .icon-spinner {
+	height: 13px;
+	width: 13px;
+	margin: -1px -2px;
 }
 
 .icon-spinner:not(.not-animated) {

dev/View/User/MailBox/MessageView.js

@@ -174,7 +174,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
 			viewFromDkimStatusIconClass:() => {
 				switch (this.viewFromDkimData()[0]) {
 					case 'none':
-						return 'icon-none iconcolor-display-none';
+						return '';
 					case 'pass':
 						return 'icon-ok iconcolor-green';
 					default:

snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html

@@ -102,7 +102,7 @@
 		<div class="control-group">
 			<div class="controls">
 				<a class="btn" data-bind="command: saveNewAdminPasswordCommand, css: { 'btn-success': adminPasswordUpdateSuccess, 'btn-danger': adminPasswordUpdateError }">
-					<i class="fontastic" data-bind="css: {'icon-white': adminPasswordUpdateSuccess() || adminPasswordUpdateError() }">🔑</i>
+					<i class="fontastic">🔑</i>
 					<span data-i18n="TAB_SECURITY/BUTTON_UPDATE_PASSWORD"></span>
 				</a>
 			</div>

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

@@ -1,19 +0,0 @@
-<li class="attachmentItem clearfix" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
-	<div class="attachmentIconParent pull-left">
-		<div class="iconMain">
-			<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
-			<i class="attachmentIconText attachmentMainIconText" data-bind="text: iconText(), visible: !uploading() || 0 === progress()"></i>
-		</div>
-		<div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div>
-		<div class="iconBG" data-bind="text: progressText, visible: uploading"></div>
-	</div>
-	<div class="attachmentNameParent">
-		<button type="button" class="close pull-right" style="margin-top:-4px;" data-bind="click: cancel">×</button>
-		<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
-			<span class="attachmentName" data-bind="text: fileName"></span>&nbsp;
-		</div>
-		<div>
-			<span class="attachmentSize" data-bind="text: friendlySize"></span>&nbsp;
-		</div>
-	</div>
-</li>

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

@@ -10,7 +10,7 @@
 		<div class="content">
 			<div class="content-wrapper">
 				<div class="b-folders-system" data-bind="template: { name: 'MailFolderListSystemItem', foreach: folderListSystem }"></div>
-				<hr class="b-list-delimiter" />
+				<hr/>
 				<div class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderList }"></div>
 				<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>
 			</div>

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

@@ -193,7 +193,7 @@
 
 							</div>
 						</div>
-						<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail icon-white"></i></div>
+						<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div>
 					</div>
 				</div>
 			</div>

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

@@ -169,12 +169,10 @@
 						<div>
 							<div style="overflow: hidden;">
 								<div class="informationShort" data-bind="event: { 'dblclick': toggleFullScreen }">
-									<span>
-										<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
-										<span data-bind="visible: viewFromDkimVisibility">
-											&nbsp;
-											<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
-										</span>
+									<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
+									<span data-bind="visible: viewFromDkimVisibility">
+										&nbsp;
+										<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
 									</span>
 									<span data-bind="visible: 0 < viewTimeStamp()">
 										(<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>)

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

@@ -1,11 +1,11 @@
 <div class="modal fade b-compose" data-bind="modal: modalVisibility, css: {'loading': saving() || sending()}">
 	<div class="modal-header b-header-toolbar g-ui-user-select-none">
-		<a class="btn btn-large button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
-			<i class="icon-white" data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner big': sending()}"></i>
+		<a class="btn button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
+			<i data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner': sending()}"></i>
 			<span class="hide-mobile" data-i18n="COMPOSE/BUTTON_SEND"></span>
 		</a>
 		<a class="btn button-save" data-bind="visible: allowFolders, command: saveCommand, tooltipErrorTip: savedErrorDesc, css: {'btn-danger': savedError }">
-			<i class="fontastic" data-bind="css: {'icon-spinner': saving(), 'icon-white': savedError()}">💾</i>
+			<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">💾</i>
 			<span class="hide-mobile" data-i18n="GLOBAL/SAVE"></span>
 		</a>
 
@@ -13,7 +13,7 @@
 		<a class="minimize-custom" data-bind="click: skipCommand, tooltip: 'COMPOSE/BUTTON_MINIMIZE'"></a>
 
 		<a class="btn btn-danger button-delete button-delete-transitions" data-bind="command: deleteCommand">
-			<i class="fontastic icon-white">🗑</i>
+			<i class="fontastic">🗑</i>
 		</a>
 		<span class="saved-text hide-mobile" data-bind="text: savedTimeText"></span>
 	</div>
@@ -155,7 +155,7 @@
 											<b data-bind="text: attachmentsCount"></b>
 											&nbsp;&nbsp;
 										</span>
-										<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount(), 'icon-white': 0 < attachmentsInErrorCount() }"></i>
+										<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount()}"></i>
 									</button>
 								</div>
 							</div>
@@ -180,7 +180,27 @@
 					<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropEnabled() && dragAndDropVisible(), initDom: composeUploaderDropPlace, css: {'dragAndDropOver': dragAndDropOver}">
 						<span data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></span>
 					</div>
-					<ul class="attachmentList" data-bind="template: { name: 'ComposeAttachment', foreach: attachments }"></ul>
+					<ul class="attachmentList" data-bind="foreach: attachments">
+						<li class="attachmentItem" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
+							<div class="attachmentIconParent">
+								<div class="iconMain">
+									<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
+									<i class="attachmentIconText attachmentMainIconText" data-bind="text: iconText(), visible: !uploading() || 0 === progress()"></i>
+								</div>
+								<div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div>
+								<div class="iconBG" data-bind="text: progressText, visible: uploading"></div>
+							</div>
+							<div class="attachmentNameParent">
+								<button type="button" class="close pull-right" style="margin-top:-4px;" data-bind="click: cancel">×</button>
+								<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
+									<span class="attachmentName" data-bind="text: fileName"></span>&nbsp;
+								</div>
+								<div>
+									<span class="attachmentSize" data-bind="text: friendlySize"></span>&nbsp;
+								</div>
+							</div>
+						</li>
+					</ul>
 					<div class="no-attachments-desc" data-bind="visible: 0 === attachments().length">
 						<span data-i18n="COMPOSE/NO_ATTACHMENTS_HERE_DESC"></span>
 					</div>

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

@@ -14,7 +14,7 @@
 
 			<div class="btn-group">
 				<a class="btn btn-success button-new-message" data-bind="command: newMessageCommand">
-					<i class="icon-mail icon-white"></i>
+					<i class="icon-mail"></i>
 				</a>
 			</div>
 

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

@@ -21,7 +21,7 @@
 		</div>
 		<div class="modal-footer">
 			<a class="btn" data-bind="command: testCodeCommand, css: { 'btn-success': true === codeStatus(), 'btn-danger': false === codeStatus() }">
-				<i data-bind="css: {'icon-ok': !testing(), 'icon-spinner': testing(), 'icon-white': true === codeStatus() || false === codeStatus() }"></i>
+				<i data-bind="css: {'icon-ok': !testing(), 'icon-spinner': testing()}"></i>
 				<span data-i18n="GLOBAL/TEST"></span>
 			</a>
 		</div>

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

@@ -128,7 +128,7 @@
 					}"></div>
 					&nbsp;
 					<span data-bind="visible: isDesktopNotificationDenied" style="color: #999" data-i18n="SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION_DESC_DENIED"></span>
-					<span class="fontastic iconsize20" data-bind="click: testSystemNotification" style="color:green;cursor:pointer">▶️</span>
+					<span class="fontastic" data-bind="click: testSystemNotification" style="color:green;cursor:pointer">▶️</span>
 				</div>
  				<div>
 					<div data-bind="component: {
@@ -140,7 +140,7 @@
 						}
 					}"></div>
 					&nbsp;
-					<span class="fontastic iconsize20" data-bind="click: testSoundNotification" style="color:green;cursor:pointer">▶️</span>
+					<span class="fontastic" data-bind="click: testSoundNotification" style="color:green;cursor:pointer">▶️</span>
 				</div>
 			</div>
 		</div>

vendors/bootstrap/less/forms.less

@@ -19,6 +19,7 @@ fieldset {
 
 // Groups of fields with labels on top (legends)
 legend {
+  cursor: pointer;
   display: block;
   width: 100%;
   padding: 0;

vendors/bootstrap/less/labels-badges.less

@@ -5,18 +5,14 @@
 
 // Base classes
 .badge {
-  font-size: @baseFontSize * .846;
-  font-weight: bold;
-  line-height: 14px; // ensure proper line-height if floated
-  color: @white;
-  vertical-align: baseline;
-  white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: @grayLight;
-}
-.badge {
-  padding: 1px 9px 2px;
   border-radius: 9px;
+  color: @white;
+  font-size: 80%;
+  min-width: 1em;
+  padding: 1px 4px;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
 
 // Hover state, but only for links