Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-11 00:14:50 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Focused state for custom checkbox (Closes #604)

Browse source
This commit is contained in:
RainLoop Team 2015-04-25 17:50:10 +04:00
parent 48b91fb957
commit a11dcbed4b
25 changed files with 209 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

5
dev/App/Abstract.js
View file

@ -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);

8
dev/Component/AbstracCheckbox.js
View file

@ -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;

27
dev/External/ko.js vendored
View file

@ -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) {

7
dev/Styles/AdminGeneral.less
View file

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

28
dev/Styles/Components.less
View file

@ -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;

6
dev/Styles/Login.less
View file

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

6
dev/Styles/SettingsGeneral.less
View file

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

17
dev/Styles/Ui.less
View file

@ -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;
}
}
}

2
dev/Styles/_BootstrapFix.less
View file

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

14
dev/View/Popup/AdvancedSearch.js
View file

@ -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);
}

3
dev/View/Popup/Compose.js
View file

@ -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';

15
dev/View/User/Login.js
View file

@ -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;
}());

2
package.json
View file

@ -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",

4
rainloop/v/0.0.0/app/templates/Themes/template.less
View file

@ -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;
}
}

13
rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsContacts.html
View file

@ -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,
optionsText: 'name', optionsValue: 'id', optionsAfterRender: defautOptionsAfterRender, saveTrigger: contactsTypeTrigger"></select>
<div data-bind="saveTrigger: contactsTypeTrigger"></div>
<div data-bind="component: {
name: 'Select',
params: {
options: contactsTypesOptions,
value: mainContactsType,
trigger: contactsTypeTrigger,
optionsText: 'name',
optionsValue: 'id'
}
}"></div>
</div>
</div>
<br />

4
rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html
View file

@ -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',

8
rainloop/v/0.0.0/app/templates/Views/Components/Checkbox.html
View file

@ -1,10 +1,10 @@
<label class="e-component e-checkbox inline" data-bind="click: click, css: { 'disabled': disable() || !enable() }">
<i data-bind="css: value() ?
<span class="e-component e-checkbox inline" tabindex="0" data-bind="click: click, keypress: keypress, css: { 'disabled': disable() || !enable() }">
<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>

2
rainloop/v/0.0.0/app/templates/Views/Components/CheckboxClassic.html
View file

@ -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>

8
rainloop/v/0.0.0/app/templates/Views/Components/CheckboxMaterialDesign.html
View file

@ -1,10 +1,10 @@
<label class="e-component e-checkbox material-design inline" data-bind="click: click, css: { 'disabled': disable() || !enable() }">
<div class="sub-checkbox-container">
<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" 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>

4
rainloop/v/0.0.0/app/templates/Views/Components/Radio.html
View file

@ -1,6 +1,6 @@
<div class="e-component e-radio" data-bind="foreach: values">
<label data-bind="click: $parent.click, css: {'inline': $parent.inline}">
<i data-bind="css: $parent.value() === value ? 'icon-radio-checked' : 'icon-radio-unchecked'"></i>
<label tabindex="0" data-bind="click: $parent.click, css: {'inline': $parent.inline}">
<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>

38
rainloop/v/0.0.0/app/templates/Views/Components/Select.html
View file

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

29
rainloop/v/0.0.0/app/templates/Views/User/Login.html
View file

@ -57,11 +57,13 @@
</div>
</div>
<div class="controls" data-bind="visible: additionalCode.visibility()">
<label class="additionalCodeSignMeLabel" data-bind="click: function () { additionalCodeSignMe(!additionalCodeSignMe()); }">
<i data-bind="css: additionalCodeSignMe() ? 'checkboxAdditionalCodeSignMe icon-checkbox-checked' : 'checkboxAdditionalCodeSignMe icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="LOGIN/LABEL_DONT_ASK_VERIFICATION_CODE"></span>
</label>
<div class="additionalCodeSignMeLabel" data-bind="component: {
name: 'CheckboxSimple',
params: {
label: 'LOGIN/LABEL_DONT_ASK_VERIFICATION_CODE',
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>

18
rainloop/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html
View file

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

2
rainloop/v/0.0.0/app/templates/Views/User/SettingsGeneral.html
View file

@ -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',

4
rainloop/v/0.0.0/app/templates/Views/User/SettingsSecurity.html
View file

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