Better (material) components design

dev/Component/MaterialDesign/Checkbox.js

@@ -1,28 +1,3 @@
-import ko from 'ko';
 import { AbstractCheckbox } from 'Component/AbstractCheckbox';
 
-export class CheckboxMaterialDesignComponent extends AbstractCheckbox {
+export class CheckboxMaterialDesignComponent extends AbstractCheckbox {}
-	/**
-	 * @param {Object} params
-	 */
-	constructor(params) {
-		super(params);
-
-		this.animationBox = ko.observable(false).extend({ falseTimeout: 200 });
-		this.animationCheckmark = ko.observable(false).extend({ falseTimeout: 200 });
-
-		this.disposable.push(
-			this.value.subscribe(value => this.triggerAnimation(value), this)
-		);
-	}
-
-	triggerAnimation(box) {
-		if (box) {
-			this.animationBox(true);
-			setTimeout(()=>this.animationCheckmark(true), 200);
-		} else {
-			this.animationCheckmark(true);
-			setTimeout(()=>this.animationBox(true), 200);
-		}
-	}
-}

dev/Styles/Components.less

@@ -14,7 +14,7 @@
 	left: 5px;
 	width: 10px;
 	height: 18px;
-
+	border: 2px solid #0F9D58;
 	border-width: 0 2px 2px 0;
 
 	transform: rotate(45deg);
@@ -31,21 +31,23 @@
 
 .e-component {
 
-	&.e-select {
+	white-space: nowrap;
+
+	* {
+		display: inline-block;
+	}
 
 	select:focus {
 		outline: 1px dotted;
 	}
-	}
 
 	&.e-checkbox {
 
+		cursor: pointer;
 		margin-bottom: 6px;
 		margin-left: -2px;
 		padding: 2px;
 
-		cursor: pointer;
-
 		&:focus {
 			outline: 1px dotted;
 		}
@@ -56,92 +58,49 @@
 		}
 	}
 
-	&.e-radio {
+	span {
-
+		margin-left: 0.5em;
-		cursor: pointer;
+		white-space: normal;
-
-		&.disabled {
-			cursor: not-allowed;
-			opacity: 0.5;
 	}
+
+	select + span {
+		line-height: 1.43em;
+		padding: 4px 0;
 	}
 }
 
-.e-component.material-design {
+.e-checkbox.material-design {
 
+	line-height: 20px;
 
-	&.e-checkbox {
+	> div {
-
-		margin-top: 2px;
-		padding: 2px 2px 1px 2px;
-
-		.sub-checkbox-container {
-			display: inline-block;
 		position: relative;
-			transform: translateZ(0);
 		width: 18px;
 		height: 18px;
-			vertical-align: bottom;
+		vertical-align: top;
-			margin-bottom: 3px;
 	}
 
-		.sub-label {
+	> div > div {
-			padding-left: 12px;
-		}
-
-		.sub-checkbox {
 		position: absolute;
 		box-sizing: border-box;
 		margin-top: 1px;
 
-			.checkbox-box-sizes();
+		animation: checkmark-to-box 200ms ease-out forwards;
 	}
 
-		.sub-checkbox.checked {
+	div.checked {
-			border-color: #0F9D58;
+		animation: box-to-checkmark 200ms ease-out forwards;
-
-			.checkbox-mark-sizes();
-		}
-
-		// animation
-		.sub-checkbox.checked {
-			&.box {
-				border: solid 2px;
-				animation: box-shrink 140ms ease-out forwards;
-			}
-			&.checkmark {
-				animation: checkmark-expand 140ms ease-out forwards;
-			}
-		}
-
-		.sub-checkbox.unchecked {
-			&.box {
-				animation: box-expand 140ms ease-out forwards;
-			}
-			&.checkmark {
-				transform: rotate(45deg);
-				animation: checkmark-shrink 140ms ease-out forwards;
-			}
-		}
 	}
 }
 
-@keyframes box-shrink {
+@keyframes box-to-checkmark {
 	0% { .checkbox-box-sizes(); }
-	100% { .checkbox-result-sizes(); }
+	50% { .checkbox-result-sizes(); }
-}
-
-@keyframes checkmark-expand {
-	0% { .checkbox-result-sizes(); }
 	100% { .checkbox-mark-sizes(); }
 }
 
-@keyframes checkmark-shrink {
+@keyframes checkmark-to-box {
 	0% { .checkbox-mark-sizes(); }
-	100% { .checkbox-result-sizes(); }
+	50% { .checkbox-result-sizes(); }
-}
-
-@keyframes box-expand {
-	0% { .checkbox-result-sizes(); }
 	100% { .checkbox-box-sizes(); }
 }

dev/Styles/Ui.less

@@ -21,12 +21,12 @@
 	display: inline-block;
 	height: 1em;
 	line-height: 1em;
+	margin-left: 0.5em;
 
 	&::after {
 		font-family: "snappymail";
 		content: " ";
 		display: block;
-		margin-left: 1em;
 		opacity: 0;
 		transition: opacity 1s linear;
 	}

dev/Styles/_BootstrapFix.less

@@ -1,8 +1,4 @@
 
-label.inline, span.inline {
-	display: inline-block;
-}
-
 .legend {
 	display: block;
 	width: 100%;

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

@@ -82,8 +82,7 @@
 			name: 'Checkbox',
 			params: {
 				label: 'TAB_GENERAL/LABEL_SHOW_THUMBNAILS',
-				value: capaAttachmentThumbnails,
+				value: capaAttachmentThumbnails
-				inline: false
 			}
 		}"></div>
 	</div>

snappymail/v/0.0.0/app/templates/Views/Components/Checkbox.html

@@ -1,6 +1,6 @@
-<span class="e-component e-checkbox inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
+<div class="e-component e-checkbox" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
 	<i role="checkbox" class="e-checkbox-icon fontastic" data-bind="text: value() ? '☑' : '☐'"></i>
 <!-- ko if: labeled -->
-	<span class="sub-label" data-bind="attr: {'data-i18n': label}"></span>
+	<span data-bind="attr: {'data-i18n': label}"></span>
 <!-- /ko -->
-</span>
+</div>

snappymail/v/0.0.0/app/templates/Views/Components/CheckboxMaterialDesign.html

@@ -1,10 +1,8 @@
-<span class="e-component e-checkbox material-design inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
+<div class="e-component e-checkbox material-design" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
-	<div class="sub-checkbox-container" role="checkbox">
+	<div role="checkbox">
-		<div class="sub-checkbox" data-bind="css: {'checked': value(),
+		<div data-bind="css: {'checked': value()}"></div>
-			'unchecked': !value(),
-			'box': animationBox, 'checkmark': animationCheckmark}"></div>
 	</div>
 <!-- ko if: labeled -->
-	<span class="sub-label" data-bind="attr: {'data-i18n': label}"></span>
+	<span data-bind="attr: {'data-i18n': label}"></span>
 <!-- /ko -->
-</span>
+</div>

snappymail/v/0.0.0/app/templates/Views/Components/Select.html

@@ -1,8 +1,7 @@
-<div class="e-component e-select inline">
+<div class="e-component e-select">
 	<select data-bind="options: options, value: value, enable: enable, optionsText: optionsText, optionsValue: optionsValue,
 		optionsCaption: optionsCaption, css: className, optionsAfterRender: defaultOptionsAfterRender"></select>
 	<!-- ko if: labeled -->
-	&nbsp;
 	<span data-bind="attr: {'data-i18n': label}"></span>
 	<!-- /ko -->
 	<!-- ko if: trigger -->