New spinner icon

dev/Styles/AdminGeneral.less

@@ -1,12 +1,13 @@
 
 .b-admin-general {
-	
+
 	.flag-selector {
 		padding-top: 5px;
 	}
 
 	.flag-name {
 		border-bottom: 1px dashed #555;
+		cursor: pointer;
 	}
 }
 

dev/Styles/Components.less

@@ -70,16 +70,16 @@
 			height: 18px;
 			vertical-align: bottom;
 			margin-bottom: 3px;
-			margin-top: 1px;
 		}
 
 		.sub-label {
-			padding-left: 8px;
+			padding-left: 12px;
 		}
 
 		.sub-checkbox {
 			position: absolute;
 			box-sizing: border-box;
+			margin-top: 1px;
 
 			.checkbox-box-sizes();
 		}

dev/Styles/SettingsGeneral.less

@@ -1,25 +1,26 @@
-
+
-.b-settings-general {
+.b-settings-general {
-
+
-	.notification-desc-denied {
+	.notification-desc-denied {
-		color: #999;
+		color: #999;
-		display: none;
+		display: none;
-	}
+	}
-
+
-	.denied-by-browser {
+	.denied-by-browser {
-		.notification-desc-denied {
+		.notification-desc-denied {
-			display: inline;
+			display: inline;
-		}
+		}
-		.notification-desc {
+		.notification-desc {
-			color: #999;
+			color: #999;
-		}
+		}
-	}
+	}
-
+
-	.flag-selector {
+	.flag-selector {
-		padding-top: 5px;
+		padding-top: 5px;
-	}
+	}
-
+
-	.flag-name {
+	.flag-name {
-		border-bottom: 1px dashed #555;
+		border-bottom: 1px dashed #555;
-	}
+		cursor: pointer;
-}
+	}
+}

dev/Styles/_FontasticToBoot.less

@@ -70,6 +70,7 @@
 	line-height: 20px;
 }
 
+/*
 @keyframes rotation {
 	to   {transform: rotate(1turn);}
 }
@@ -86,19 +87,56 @@
 		line-height: 100%;
 	}
 }
+*/
+
+@keyframes rotation {
+	to   {transform: rotate(1turn);}
+}
+
+.icon-spinner {
+
+	font-family: Arial;
+
+	&:before {
+		content: "";
+	}
+
+	height: 11px;
+	width: 11px;
+
+	margin-right: -1px;
+	background: none;
+
+	border: 3px solid #aaa;
+	border-top-color: #333;
+	border-radius: 100%;
+
+	animation: none;
+
+	&.animated {
+		border-color: transparent;
+		border-top-color: #999;
+
+		animation: rotation .8s infinite linear;
+	}
+}
 
 html.no-cssanimations .icon-spinner {
+	background: none;
 	background-image: url('@{rlSyncFileStop}');
 	background-repeat: no-repeat;
+
+	border: none;
+	box-shadow: none;
+	height: 16px;
+	width: 16px;
+
 	font-family: Arial;
 	&:before {
 		content: "";
 	}
 	&.animated {
+		background: none;
 		background-image: url('@{rlSyncFile}');
 	}
 }
-
-html.cssanimations .icon-spinner.animated:before {
-	animation: rotation 1s infinite steps(40);
-}

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

@@ -18,7 +18,7 @@
 				Language
 			</label>
 			<div class="controls">
-				<label class="flag-selector">
+				<div class="flag-selector">
 					<span class="flag-wrapper">
 						<span data-bind="css: 'flag flag-' + mainLanguage()" style=""></span>
 					</span>
@@ -28,7 +28,7 @@
 						name: 'SaveTrigger',
 						params: { value: languageTrigger }
 					}"></div>
-				</label>
+				</div>
 			</div>
 		</div>
 		<div class="control-group">

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

@@ -36,7 +36,7 @@
 					params: { value: verifySslCertificate, label: 'Require verification of SSL certificate used (IMAP/SMTP)', inline: true }
 				}"></div>
 				&nbsp;&nbsp;
-				<span style="color:red">(beta)</span>
+				<span style="color:red">(unstable)</span>
 			</div>
 		</div>
 		<div class="control-group">

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

@@ -1,10 +1,10 @@
-<label class="e-component e-checkbox" data-bind="click: click, css: {'inline': inline, 'disabled': disable() || !enable() }">
+<label class="e-component e-checkbox inline" data-bind="click: click, css: { 'disabled': disable() || !enable() }">
 	<i data-bind="css: value() ?
 	   (inverted ? 'icon-checkbox-unchecked' : 'icon-checkbox-checked') :
 	   (inverted ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked')
 	"></i>
 <!-- ko if: labeled -->
-	&nbsp;
+	&nbsp;&nbsp;
 	<span class="sub-label i18n" data-bind="attr: {'data-i18n-text': label}"></span>
 <!-- /ko -->
 </label>

rainloop/v/0.0.0/app/templates/Views/Components/CheckboxClassic.html

@@ -1,5 +1,5 @@
-<label class="e-component e-checkbox" data-bind="css: {'inline': inline, 'disabled': disable() || !enable() }">
+<label class="e-component e-checkbox inline" data-bind="css: { 'disabled': disable() || !enable() }">
-	<input type="checkbox" data-bind="checked: value, disable: disable() || !enable()" />
+	<input type="checkbox" data-bind="checked: value, disable: disable() || !enable()" style="margin: 0 0 1px 0;" />
 <!-- ko if: labeled -->
 	&nbsp;&nbsp;
 	<span class="sub-label i18n" data-bind="attr: {'data-i18n-text': label}"></span>

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

@@ -1,11 +1,10 @@
-<label class="e-component e-checkbox material-design" data-bind="click: click, css: {'inline': inline, 'disabled': disable() || !enable() }">
+<label class="e-component e-checkbox material-design inline" data-bind="click: click, css: { 'disabled': disable() || !enable() }">
 	<div class="sub-checkbox-container">
 		<div class="sub-checkbox" data-bind="css: {'checked': (value() && !inverted) || (!value() && inverted),
 			'unchecked': (!value() && !inverted) || (value() && inverted),
 			'box': animationBox, 'checkmark': animationCheckmark}"></div>
 	</div>
 <!-- ko if: labeled -->
-	&nbsp;
 	<span class="sub-label i18n" data-bind="attr: {'data-i18n-text': label}"></span>
 <!-- /ko -->
 </label>

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

@@ -8,7 +8,7 @@
 				<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_LANGUAGE"></span>
 			</label>
 			<div class="controls">
-				<label class="flag-selector">
+				<div class="flag-selector">
 					<span class="flag-wrapper">
 						<span data-bind="css: 'flag flag-' + mainLanguage()" style=""></span>
 					</span>
@@ -18,11 +18,11 @@
 						name: 'SaveTrigger',
 						params: { value: languageTrigger }
 					}"></div>
-				</label>
+				</div>
 			</div>
 		</div>
 		<div class="control-group">
-			<label class="control-label" style="padding-top: 0;">
+			<label class="control-label">
 			   <span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_EDITOR"></span>
 			</label>
 			<div class="controls">
@@ -39,7 +39,7 @@
 			</div>
 		</div>
 		<div class="control-group">
-			<label class="control-label" style="padding-top: 0;">
+			<label class="control-label">
 			   <span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_LAYOUT"></span>
 			</label>
 			<div class="controls">

webpack.config.js

@@ -25,22 +25,22 @@ module.exports = {
 	},
 	externals: {
 		'window': 'window',
-		'JSON': 'JSON',
+		'JSON': 'window.JSON',
 		'JSEncrypt': 'window.JSEncrypt',
 		'$LAB': 'window.$LAB',
 		'SimplePace': 'window.SimplePace',
 		'PhotoSwipe': 'window.PhotoSwipe',
 		'PhotoSwipeUI_Default': 'window.PhotoSwipeUI_Default',
 		'queue': 'window.queue',
-		'moment': 'moment',
+		'moment': 'window.moment',
-		'ifvisible': 'ifvisible',
+		'ifvisible': 'window.ifvisible',
-		'crossroads': 'crossroads',
+		'crossroads': 'window.crossroads',
-		'hasher': 'hasher',
+		'hasher': 'window.hasher',
-		'Jua': 'Jua',
+		'Jua': 'window.Jua',
-		'Autolinker': 'Autolinker',
+		'Autolinker': 'window.Autolinker',
-		'ssm': 'ssm',
+		'ssm': 'window.ssm',
-		'key': 'key',
+		'key': 'window.key',
-		'_': '_',
+		'_': 'window._',
-		'$': 'jQuery'
+		'$': 'window.jQuery'
 	}
 };