Focused state for custom checkbox (Closes #604)

dev/App/Abstract.js

@@ -284,14 +284,17 @@
 
 		ko.components.register('x-script', require('Component/Script'));
 
-		if (Settings.settingsGet('MaterialDesign') && Globals.bAnimationSupported)
+		if (/**false && /**/Settings.settingsGet('MaterialDesign') && Globals.bAnimationSupported)
 		{
 			ko.components.register('Checkbox', require('Component/MaterialDesign/Checkbox'));
+			ko.components.register('CheckboxSimple', require('Component/Checkbox'));
 		}
 		else
 		{
 //			ko.components.register('Checkbox', require('Component/Classic/Checkbox'));
+//			ko.components.register('CheckboxSimple', require('Component/Classic/Checkbox'));
 			ko.components.register('Checkbox', require('Component/Checkbox'));
+			ko.components.register('CheckboxSimple', require('Component/Checkbox'));
 		}
 
 		Translator.initOnStartOrLangChange(Translator.initNotificationLanguage, Translator);

dev/Component/AbstracCheckbox.js

@@ -48,6 +48,7 @@
 		this.inverted = Utils.isUnd(oParams.inverted) ? false : !!oParams.inverted;
 
 		this.labeled = !Utils.isUnd(oParams.label);
+		this.labelAnimated = !!oParams.labelAnimated;
 	}
 
 	_.extend(AbstracCheckbox.prototype, AbstractComponent.prototype);
@@ -59,6 +60,13 @@
 		}
 	};
 
+	AbstracCheckbox.prototype.keypress = function() {
+		if (!this.readOnly && this.enable() && !this.disable())
+		{
+			this.value(!this.value());
+		}
+	};
+
 	AbstracCheckbox.componentExportHelper = AbstractComponent.componentExportHelper;
 
 	module.exports = AbstracCheckbox;

dev/External/ko.js

@@ -317,6 +317,18 @@
 		}
 	};
 
+	ko.bindingHandlers.keypress = {
+		'init': function (oElement, fValueAccessor, fAllBindingsAccessor, oViewModel) {
+			$(oElement).on('keypress.koKeyPress', function (oEvent) {
+				fValueAccessor().call(oViewModel, oEvent);
+			});
+
+			ko.utils.domNodeDisposal.addDisposeCallback(oElement, function () {
+				$(oElement).off('keypress.koKeyPress');
+			});
+		}
+	};
+
 	ko.bindingHandlers.onEnter = {
 		'init': function (oElement, fValueAccessor, fAllBindingsAccessor, oViewModel) {
 			$(oElement).on('keypress.koOnEnter', function (oEvent) {
@@ -333,6 +345,21 @@
 		}
 	};
 
+	ko.bindingHandlers.onTab = {
+		'init': function (oElement, fValueAccessor, fAllBindingsAccessor, oViewModel) {
+			$(oElement).on('keydown.koOnTab', function (oEvent) {
+				if (oEvent && 9 === window.parseInt(oEvent.keyCode, 10))
+				{
+					return fValueAccessor().call(oViewModel, !!oEvent.shiftKey);
+				}
+			});
+
+			ko.utils.domNodeDisposal.addDisposeCallback(oElement, function () {
+				$(oElement).off('keydown.koOnTab');
+			});
+		}
+	};
+
 	ko.bindingHandlers.onEsc = {
 		'init': function (oElement, fValueAccessor, fAllBindingsAccessor, oViewModel) {
 			$(oElement).on('keypress.koOnEsc', function (oEvent) {

dev/Styles/AdminGeneral.less

@@ -6,8 +6,15 @@
 	}
 
 	.flag-name {
+
 		border-bottom: 1px dashed #555;
 		cursor: pointer;
+		padding: 2px;
+
+		&:focus {
+			outline: 1px;
+			outline-style: dotted;
+		}
 	}
 }
 

dev/Styles/Components.less

@@ -37,13 +37,36 @@
 
 .e-component {
 
+	&.e-select {
+
+		select:focus {
+			outline: 1px;
+			outline-style: dotted;
+		}
+	}
+
 	&.e-checkbox {
 
+		margin-bottom: 6px;
+		margin-left: -2px;
+		padding: 2px;
+
 		cursor: pointer;
 
+		&:focus {
+			outline: 1px;
+			outline-style: dotted;
+		}
+
+		.e-checkbox-icon {
+			padding: 1px 0 0 1px;
+		}
+
 		&.disabled {
 			cursor: default;
 			color: #999;
+			outline: 0;
+			outline-style: none;
 		}
 	}
 
@@ -60,11 +83,12 @@
 
 .e-component.material-design {
 
-	margin-top: 2px;
-	margin-bottom: 6px;
 
 	&.e-checkbox {
 
+		margin-top: 2px;
+		padding: 2px 2px 1px 2px;
+
 		.sub-checkbox-container {
 			display: inline-block;
 			position: relative;

dev/Styles/Login.less

@@ -60,7 +60,11 @@
 			}
 		}
 
-		.signMeLabel, .languageLabel {
+		.languageLabel {
+			margin-top: 5px;
+		}
+
+		.signMeLabel .e-checkbox {
 			margin-top: 5px;
 		}
 

dev/Styles/SettingsGeneral.less

@@ -22,5 +22,11 @@
 	.flag-name {
 		border-bottom: 1px dashed #555;
 		cursor: pointer;
+		padding: 2px;
+
+		&:focus {
+			outline: 1px;
+			outline-style: dotted;
+		}
 	}
 }

dev/Styles/Ui.less

@@ -21,6 +21,12 @@
 	color: #336699;
 	text-decoration: underline;
 	cursor: pointer;
+	padding: 2px;
+
+	&:focus {
+		outline: 1px;
+		outline-style: dotted;
+	}
 }
 
 .g-ui-min-height-300 {
@@ -181,12 +187,21 @@ e-spinner {
 }
 
 .e-languages {
+
 	margin-top: 8px;
 	color: #333;
+
 	.flag-name {
+
 		color: #333;
-		/*text-decoration: underline;*/
 		border-bottom: 1px dashed #333;
+		cursor: pointer;
+		padding: 2px;
+
+		&:focus {
+			outline: 1px;
+			outline-style: dotted;
+		}
 	}
 }
 

dev/Styles/_BootstrapFix.less

@@ -7,7 +7,7 @@ label {
 	cursor: pointer;
 }
 
-label.inline {
+label.inline, span.inline {
 	display: inline-block;
 }
 

dev/View/Popup/AdvancedSearch.js

@@ -8,6 +8,7 @@
 		ko = require('ko'),
 
 		Utils = require('Common/Utils'),
+		Translator = require('Common/Translator'),
 
 		MessageStore = require('Stores/User/Message'),
 
@@ -46,6 +47,19 @@
 			this.cancelCommand();
 		});
 
+		this.selectedDates = ko.computed(function () {
+			Translator.trigger();
+			return [
+				{'id': -1, 'name': Translator.i18n('SEARCH/LABEL_ADV_DATE_ALL')},
+				{'id': 3, 'name': Translator.i18n('SEARCH/LABEL_ADV_DATE_3_DAYS')},
+				{'id': 7, 'name': Translator.i18n('SEARCH/LABEL_ADV_DATE_7_DAYS')},
+				{'id': 30, 'name': Translator.i18n('SEARCH/LABEL_ADV_DATE_MONTH')},
+				{'id': 90, 'name': Translator.i18n('SEARCH/LABEL_ADV_DATE_3_MONTHS')},
+				{'id': 180, 'name': Translator.i18n('SEARCH/LABEL_ADV_DATE_6_MONTHS')},
+				{'id': 365, 'name': Translator.i18n('SEARCH/LABEL_ADV_DATE_YEAR')}
+			];
+		}, this);
+
 		kn.constructorEnd(this);
 	}
 

dev/View/Popup/Compose.js

@@ -525,7 +525,6 @@
 			if (window.Dropbox)
 			{
 				window.Dropbox.choose({
-					//'iframe': true,
 					'success': function(aFiles) {
 
 						if (aFiles && aFiles[0] && aFiles[0]['link'])
@@ -1436,7 +1435,7 @@
 		Events.sub('window.resize.real', this.resizerTrigger);
 		Events.sub('window.resize.real', _.debounce(this.resizerTrigger, 50));
 
-		if (this.dropboxEnabled())
+		if (this.dropboxEnabled() && this.dropboxApiKey() && !window.Dropbox)
 		{
 			oScript = window.document.createElement('script');
 			oScript.type = 'text/javascript';

dev/View/User/Login.js

@@ -467,6 +467,21 @@
 		]);
 	};
 
+	LoginUserView.prototype.selectLanguageOnTab = function (bShift)
+	{
+		if (!bShift)
+		{
+			var self = this;
+			_.delay(function () {
+				self.emailFocus(true);
+			}, 5);
+
+			return false;
+		}
+
+		return true;
+	};
+
 	module.exports = LoginUserView;
 
 }());

package.json

@@ -2,7 +2,7 @@
 	"name": "RainLoop",
 	"title": "RainLoop Webmail",
 	"version": "1.8.4",
-	"release": "311",
+	"release": "312",
 	"description": "Simple, modern & fast web-based email client",
 	"homepage": "http://rainloop.net",
 	"main": "gulpfile.js",

rainloop/v/0.0.0/app/templates/Themes/template.less

@@ -66,7 +66,7 @@
 	.thm-border-radius(@login-border-radius);
 	.thm-box-shadow(@login-box-shadow);
 
-	.legend, .checkboxSignMe, .checkboxAdditionalCodeSignMe, .g-ui-link, .social-button, .language-button {
+	.legend, .e-checkbox-icon, .g-ui-link, .social-button, .language-button {
 		color: @login-color !important;
 	}
 }
@@ -85,7 +85,7 @@
 	color: @languages-color;
 	.flag-name {
 		color: @languages-color;
-		border-bottom: 1px dashed @languages-color;
+		border-color: @languages-color;
 	}
 }
 

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

@@ -26,9 +26,16 @@
 		<div class="control-group">
 			<label class="control-label" data-i18n="TAB_CONTACTS/LABEL_STORAGE_TYPE"></label>
 			<div class="controls">
-				<select data-bind="options: contactsTypesOptions, value: mainContactsType,
+				<div data-bind="component: {
-					optionsText: 'name', optionsValue: 'id', optionsAfterRender: defautOptionsAfterRender, saveTrigger: contactsTypeTrigger"></select>
+					name: 'Select',
-				<div data-bind="saveTrigger: contactsTypeTrigger"></div>
+					params: {
+						options: contactsTypesOptions,
+						value: mainContactsType,
+						trigger: contactsTypeTrigger,
+						optionsText: 'name',
+						optionsValue: 'id'
+					}
+				}"></div>
 			</div>
 		</div>
 		<br />

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

@@ -15,7 +15,7 @@
 					<span class="flag-wrapper">
 						<span data-bind="css: 'flag flag-' + language()" style=""></span>
 					</span>
-					<span class="flag-name" data-bind="text: languageFullName, click: selectLanguage"></span>
+					<span class="flag-name" tabindex="0" data-bind="text: languageFullName, click: selectLanguage, keypress: selectLanguage"></span>
 					&nbsp;&nbsp;
 					<div data-bind="component: {
 						name: 'SaveTrigger',
@@ -31,7 +31,7 @@
 					<span class="flag-wrapper">
 						<span data-bind="css: 'flag flag-' + languageAdmin()" style=""></span>
 					</span>
-					<span class="flag-name" data-bind="text: languageAdminFullName, click: selectLanguageAdmin"></span>
+					<span class="flag-name" tabindex="0" data-bind="text: languageAdminFullName, click: selectLanguageAdmin, keypress: selectLanguageAdmin"></span>
 					&nbsp;&nbsp;
 					<div data-bind="component: {
 						name: 'SaveTrigger',

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

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

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

@@ -2,6 +2,6 @@
 	<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': label}"></span>
+	<span class="sub-label i18n" data-bind="attr: {'data-i18n': label}, css: {'i18n-animation': labelAnimated}"></span>
 <!-- /ko -->
 </label>

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

@@ -1,10 +1,10 @@
-<label class="e-component e-checkbox material-design inline" data-bind="click: click, css: { 'disabled': disable() || !enable() }">
+<span class="e-component e-checkbox material-design inline" tabindex="0" data-bind="click: click, keypress: keypress, css: { 'disabled': disable() || !enable() }">
-	<div class="sub-checkbox-container">
+	<div class="sub-checkbox-container" role="checkbox">
 		<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 -->
-	<span class="sub-label i18n" data-bind="attr: {'data-i18n': label}"></span>
+	<span class="sub-label i18n" data-bind="attr: {'data-i18n': label}, css: {'i18n-animation': labelAnimated}"></span>
 <!-- /ko -->
-</label>
+</span>

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

@@ -1,6 +1,6 @@
 <div class="e-component e-radio" data-bind="foreach: values">
-	<label data-bind="click: $parent.click, css: {'inline': $parent.inline}">
+	<label tabindex="0" data-bind="click: $parent.click, css: {'inline': $parent.inline}">
-		<i data-bind="css: $parent.value() === value ? 'icon-radio-checked' : 'icon-radio-unchecked'"></i>
+		<i role="radio" data-bind="css: $parent.value() === value ? 'icon-radio-checked' : 'icon-radio-unchecked'"></i>
 		&nbsp;&nbsp;
 		<span class="sub-label i18n" data-bind="attr: {'data-i18n': label}"></span>
 	</label>

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

@@ -1,18 +1,20 @@
-<!-- ko if: preLabeled -->
+<div class="e-component e-select inline">
-<span class="i18n" data-bind="attr: {'data-i18n': preLabel}"></span>
+	<!-- ko if: preLabeled -->
-&nbsp;&nbsp;
+	<span class="i18n" data-bind="attr: {'data-i18n': preLabel}"></span>
-<!-- /ko -->
+	&nbsp;&nbsp;
-<select data-bind="options: options, value: value, enable: enable, optionsText: optionsText, optionsValue: optionsValue,
+	<!-- /ko -->
-	css: className, optionsAfterRender: defautOptionsAfterRender"></select>
+	<select data-bind="options: options, value: value, enable: enable, optionsText: optionsText, optionsValue: optionsValue,
-<!-- ko if: labeled -->
+		css: className, optionsAfterRender: defautOptionsAfterRender"></select>
-&nbsp;
+	<!-- ko if: labeled -->
-<span class="i18n" data-bind="attr: {'data-i18n': label}"></span>
+	&nbsp;
-&nbsp;
+	<span class="i18n" data-bind="attr: {'data-i18n': label}"></span>
-<!-- /ko -->
+	&nbsp;
-<!-- ko if: triggered -->
+	<!-- /ko -->
-&nbsp;
+	<!-- ko if: triggered -->
-<div data-bind="component: {
+	&nbsp;
-	name: 'SaveTrigger',
+	<div data-bind="component: {
-	params: { value: trigger }
+		name: 'SaveTrigger',
-}"></div>
+		params: { value: trigger }
-<!-- /ko -->
+	}"></div>
+	<!-- /ko -->
+</div>

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

@@ -57,11 +57,13 @@
 					</div>
 				</div>
 				<div class="controls" data-bind="visible: additionalCode.visibility()">
-					<label class="additionalCodeSignMeLabel" data-bind="click: function () { additionalCodeSignMe(!additionalCodeSignMe()); }">
+					<div class="additionalCodeSignMeLabel" data-bind="component: {
-						<i data-bind="css: additionalCodeSignMe() ? 'checkboxAdditionalCodeSignMe icon-checkbox-checked' : 'checkboxAdditionalCodeSignMe icon-checkbox-unchecked'"></i>
+						name: 'CheckboxSimple',
-						&nbsp;&nbsp;
+						params: {
-						<span class="i18n" data-i18n="LOGIN/LABEL_DONT_ASK_VERIFICATION_CODE"></span>
+							label: 'LOGIN/LABEL_DONT_ASK_VERIFICATION_CODE',
-					</label>
+							value: additionalCodeSignMe
+						}
+					}"></div>
 				</div>
 				{{INCLUDE/BottomControlGroup/PLACE}}
 				<div class="controls">
@@ -85,11 +87,21 @@
 							<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
 						</a>
 					</div>
-					<label class="signMeLabel inline" data-bind="click: function () { signMe(!signMe()); }, visible: signMeVisibility">
+
+					<div class="signMeLabel" data-bind="component: {
+						name: 'CheckboxSimple',
+						params: {
+							label: 'LOGIN/LABEL_SIGN_ME',
+							labelAnimated: true,
+							value: signMe
+						}
+					}"></div>
+
+<!--					<label class="signMeLabel inline" data-bind="click: function () { signMe(!signMe()); }, visible: signMeVisibility">
 						<i data-bind="css: signMe() ? 'checkboxSignMe icon-checkbox-checked' : 'checkboxSignMe icon-checkbox-unchecked'"></i>
 						&nbsp;&nbsp;
 						<span class="i18n i18n-animation" data-i18n="LOGIN/LABEL_SIGN_ME"></span>
-					</label>
+					</label>-->
 				</div>
 				<div class="controls clearfix" data-bind="visible: '' !== forgotPasswordLinkUrl || '' !== registrationLinkUrl">
 					<div class="forgot-link thm-forgot pull-left" data-bind="visible: '' !== forgotPasswordLinkUrl" style="text-align: center">
@@ -110,11 +122,12 @@
 				<label class="flag-selector">
 					<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
 					&nbsp;&nbsp;
-					<span class="flag-name" data-bind="text: languageFullName, click: selectLanguage"></span>
+					<span class="flag-name" tabindex="0" data-bind="text: languageFullName, click: selectLanguage, keypress: selectLanguage, onTab: selectLanguageOnTab"></span>
 				</label>
 			</div>
 			{{INCLUDE/BottomFooter/PLACE}}
 		</center>
 	</div>
+	<a href="#" onclick="return false;"></a>
 	<div class="loginAfter"></div>
 </div>

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

@@ -54,15 +54,15 @@
 								<span class="i18n" data-i18n="SEARCH/LABEL_ADV_DATE"></span>
 							</label>
 							<div class="controls">
-								<select data-bind="value: selectedDateValue">
+								<div data-bind="component: {
-									<option value="-1" class="i18n" data-i18n="SEARCH/LABEL_ADV_DATE_ALL"></option>
+									name: 'Select',
-									<option value="3" class="i18n" data-i18n="SEARCH/LABEL_ADV_DATE_3_DAYS"></option>
+									params: {
-									<option value="7" class="i18n" data-i18n="SEARCH/LABEL_ADV_DATE_7_DAYS"></option>
+										options: selectedDates,
-									<option value="30" class="i18n" data-i18n="SEARCH/LABEL_ADV_DATE_MONTH"></option>
+										value: selectedDateValue,
-									<option value="90" class="i18n" data-i18n="SEARCH/LABEL_ADV_DATE_3_MONTHS"></option>
+										optionsText: 'name',
-									<option value="180" class="i18n" data-i18n="SEARCH/LABEL_ADV_DATE_6_MONTHS"></option>
+										optionsValue: 'id'
-									<option value="365" class="i18n" data-i18n="SEARCH/LABEL_ADV_DATE_YEAR"></option>
+									}
-								</select>
+								}"></div>
 							</div>
 						</div>
 						<div class="control-group">

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

@@ -12,7 +12,7 @@
 					<span class="flag-wrapper">
 						<span data-bind="css: 'flag flag-' + language()" style=""></span>
 					</span>
-					<span class="flag-name" data-bind="text: languageFullName, click: selectLanguage"></span>
+					<span class="flag-name" tabindex="0" data-bind="text: languageFullName, click: selectLanguage, keypress: selectLanguage"></span>
 					&nbsp;&nbsp;
 					<div data-bind="component: {
 						name: 'SaveTrigger',

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

@@ -26,8 +26,8 @@
 			<label class="control-label"></label>
 			<div class="controls">
 				<i class="icon-lock" />
-				&nbsp;&nbsp;
+				&nbsp;
-				<span class="i18n g-ui-link" data-i18n="SETTINGS_SECURITY/LABEL_CONFIGURATE_TWO_FACTOR" data-bind="click:configureTwoFactor"></span>
+				<span class="i18n g-ui-link" tabindex="0" data-i18n="SETTINGS_SECURITY/LABEL_CONFIGURATE_TWO_FACTOR" data-bind="click: configureTwoFactor, keypress: configureTwoFactor"></span>
 			</div>
 		</div>
 	</div>