Added knockoutjs components

Added material design checkbox component
Added lang changing animation
This commit is contained in:
RainLoop Team 2014-10-30 01:08:53 +04:00
parent c2b7632c13
commit 1423b88839
48 changed files with 1213 additions and 256 deletions

View file

@ -58,14 +58,14 @@
<div class="control-group">
<button type="submit" class="btn btn-large span4 buttonLogin" data-bind="command: submitCommand">
<i class="icon-spinner animated" data-bind="visible: submitRequest"></i>
<span class="i18n" data-i18n-text="LOGIN/BUTTON_SIGN_IN" data-bind="visible: !submitRequest()"></span>
<span class="i18n i18n-animation" data-i18n-text="LOGIN/BUTTON_SIGN_IN" data-bind="visible: !submitRequest()"></span>
</button>
</div>
<div class="control-group">
<label class="pull-left signMeLabel" 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" data-i18n-text="LOGIN/LABEL_SIGN_ME"></span>
<span class="i18n i18n-animation" data-i18n-text="LOGIN/LABEL_SIGN_ME"></span>
</label>
<div class="pull-right">
<div class="btn-group dropdown" data-bind="registrateBootstrapDropdown: true, visible: socialLoginEnabled() || allowLanguagesOnLogin()">

View file

@ -69,21 +69,27 @@
<label class="control-label">
</label>
<div class="controls">
<label data-bind="click: function () { unseen(!unseen()); }">
<i data-bind="css: unseen() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SEARCH/LABEL_ADV_UNSEEN"></span>
</label>
<label data-bind="click: function () { starred(!starred()); }">
<i data-bind="css: starred() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SEARCH/LABEL_ADV_FLAGGED"></span>
</label>
<label data-bind="click: function () { hasAttachment(!hasAttachment()); }">
<i data-bind="css: hasAttachment() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SEARCH/LABEL_ADV_HAS_ATTACHMENT"></span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SEARCH/LABEL_ADV_UNSEEN',
value: unseen
}
}"></div>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SEARCH/LABEL_ADV_FLAGGED',
value: starred
}
}"></div>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SEARCH/LABEL_ADV_HAS_ATTACHMENT',
value: hasAttachment
}
}"></div>
</div>
</div>
</div>

View file

@ -15,16 +15,20 @@
<br />
<div class="control-group">
<div class="controls">
<label data-bind="click: function () { sign(!sign()); }">
<i data-bind="css: sign() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="POPUPS_COMPOSE_OPEN_PGP/LABEL_SIGN"></span>
</label>
<label data-bind="click: function () { encrypt(!encrypt()); }">
<i data-bind="css: encrypt() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="POPUPS_COMPOSE_OPEN_PGP/LABEL_ENCRYPT"></span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'POPUPS_COMPOSE_OPEN_PGP/LABEL_SIGN',
value: sign
}
}"></div>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'POPUPS_COMPOSE_OPEN_PGP/LABEL_ENCRYPT',
value: encrypt
}
}"></div>
</div>
</div>
<div class="control-group">

View file

@ -41,17 +41,21 @@
<hr />
<div data-bind="template: {'name': actionTemplate()}"></div>
<label data-bind="visible: actionMarkAsReadVisiblity, click: function () { actionMarkAsRead(!actionMarkAsRead()); }">
<i data-bind="css: actionMarkAsRead() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span>Mark as read</span>
</label>
<div data-bind="visible: actionMarkAsReadVisiblity, component: {
name: 'Checkbox',
params: {
label: 'Mark as read',
value: actionMarkAsRead
}
}"></div>
<label data-bind="click: function () { actionSkipOtherFilters(!actionSkipOtherFilters()); }">
<i data-bind="css: actionSkipOtherFilters() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span>Skip other filters</span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'Skip other filters',
value: actionSkipOtherFilters
actionSkipOtherFilters
}"></div>
</div>
</div>
</div>

View file

@ -5,11 +5,13 @@
</div>
<div class="control-group">
<div class="controls">
<label data-bind="click: function () { contactsAutosave(!contactsAutosave()); }">
<i data-bind="css: contactsAutosave() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_CONTACTS/LABEL_CONTACTS_AUTOSAVE"></span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SETTINGS_CONTACTS/LABEL_CONTACTS_AUTOSAVE',
value: contactsAutosave
}
}"></div>
</div>
</div>
</div>
@ -20,11 +22,13 @@
</div>
<div class="control-group">
<div class="controls">
<label data-bind="click: function () { enableContactsSync(!enableContactsSync()); }">
<i data-bind="css: enableContactsSync() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_CONTACTS/LABEL_CONTACTS_SYNC_ENABLE"></span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SETTINGS_CONTACTS/LABEL_CONTACTS_SYNC_ENABLE',
value: enableContactsSync
}
}"></div>
</div>
</div>
<div class="control-group">

View file

@ -1,7 +1,7 @@
<div class="b-settings-general g-ui-user-select-none">
<div class="form-horizontal">
<div class="legend">
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LEGEND_GENERAL"></span>
<span class="i18n i18n-animation" data-i18n-text="SETTINGS_GENERAL/LEGEND_GENERAL"></span>
</div>
<div class="control-group" data-bind="visible: allowLanguagesOnSettings">
<label class="control-label">
@ -26,24 +26,22 @@
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_EDITOR"></span>
</label>
<div class="controls">
<label for="richTextEditorTypeID1">
<input type="radio" id="richTextEditorTypeID1" name="richTextEditorType" value="Html" data-bind="checked: editorDefaultType" style="position: absolute; left: -10000px" />
<i data-bind="css: 'Html' === editorDefaultType() ? ' icon-radio-checked' : 'icon-radio-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_EDITOR_HTML_AS_DEFAULT"></span>
</label>
<label for="richTextEditorTypeID2">
<input type="radio" id="richTextEditorTypeID2" name="richTextEditorType" value="Plain" data-bind="checked: editorDefaultType" style="position: absolute; left: -10000px" />
<i data-bind="css: 'Plain' === editorDefaultType() ? ' icon-radio-checked' : 'icon-radio-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_EDITOR_PLAIN_AS_DEFAULT"></span>
</label>
<div data-bind="component: {
name: 'Radio',
params: {
value: editorDefaultType,
values: {
'Html': 'SETTINGS_GENERAL/LABEL_EDITOR_HTML_AS_DEFAULT',
'Plain': 'SETTINGS_GENERAL/LABEL_EDITOR_PLAIN_AS_DEFAULT'
}
}
}"></div>
</div>
</div>
</div>
<div class="form-horizontal">
<div class="legend">
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_VIEW_OPTIONS"></span>
<span class="i18n i18n-animation" data-i18n-text="SETTINGS_GENERAL/LABEL_VIEW_OPTIONS"></span>
</div>
<div class="control-group">
<div class="controls">
@ -102,17 +100,24 @@
</div>
<div class="form-horizontal" data-bind="visible: isDesktopNotificationsSupported()">
<div class="legend">
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION"></span>
<span class="i18n i18n-animation" data-i18n-text="SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION"></span>
</div>
<div class="control-group">
<div class="controls">
<div data-bind="visible: isDesktopNotificationsSupported">
<label data-bind="css: { 'denied-by-browser': isDesktopNotificationsDenied }, click: function () { if (!isDesktopNotificationsDenied()) { useDesktopNotifications(!useDesktopNotifications()); }}">
<i data-bind="css: useDesktopNotifications() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n notification-desc" data-i18n-text="SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION_DESC"></span>
<span class="i18n notification-desc-denied" data-i18n-text="SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION_DESC_DENIED"></span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION_DESC',
value: useDesktopNotifications,
disable: isDesktopNotificationsDenied,
inline: true
}
}"></div>
&nbsp;
<span data-bind="visible: isDesktopNotificationsDenied">
<span class="i18n" style="color: #999" data-i18n-text="SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION_DESC_DENIED"></span>
</span>
</div>
</div>
</div>

View file

@ -8,9 +8,16 @@
<span class="i18n" data-i18n-text="SETTINGS_IDENTITIES/LABEL_DEFAULT"></span>
</label>
<div class="controls">
<select data-bind="options: identitiesOptions, value: defaultIdentityID,
optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defautOptionsAfterRender, saveTrigger: defaultIdentityIDTrigger"></select>
<div data-bind="saveTrigger: defaultIdentityIDTrigger"></div>
<div data-bind="component: {
name: 'Select',
params: {
options: identitiesOptions,
value: defaultIdentityID,
optionsText: 'name',
optionsValue: 'id',
trigger: defaultIdentityIDTrigger
}
}"></div>
</div>
</div>
<div class="control-group g-ui-user-select-none">
@ -18,38 +25,52 @@
<span class="i18n" data-i18n-text="SETTINGS_IDENTITIES/LABEL_DISPLAY_NAME"></span>
</label>
<div class="controls">
<input type="text" class="input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: displayName, saveTrigger: displayNameTrigger" />
<div data-bind="saveTrigger: displayNameTrigger"></div>
<div data-bind="component: {
name: 'Input',
params: {
value: displayName,
size: 4,
trigger: displayNameTrigger
}
}"></div>
</div>
</div>
<div class="control-group g-ui-user-select-none" style="display: none">
<!-- <div class="control-group g-ui-user-select-none" style="display: none">
<label class="control-label">
<span class="i18n" data-i18n-text="SETTINGS_IDENTITIES/LABEL_REPLY_TO"></span>
</label>
<div class="controls">
<input type="text" class="input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: replyTo" />
<div data-bind="component: {
name: 'Input',
params: {
value: replyTo,
size: 4
}
}"></div>
</div>
</div>
</div>-->
<div class="control-group">
<label class="control-label g-ui-user-select-none">
<span class="i18n" data-i18n-text="SETTINGS_IDENTITIES/LABEL_SIGNATURE"></span>
</label>
<div class="controls">
<div class="e-signature-place" data-bind="initDom: signatureDom"></div>
<div style="vertical-align: top;" data-bind="saveTrigger: signatureTrigger"></div>
&nbsp;&nbsp;
<div data-bind="component: {
name: 'SaveTrigger',
params: { value: signatureTrigger, verticalAlign: 'top' }
}"></div>
</div>
</div>
<div class="control-group g-ui-user-select-none">
<div class="controls">
<label data-bind="click: function () { signatureToAll(!signatureToAll()); }">
<i data-bind="css: signatureToAll() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_IDENTITIES/LABEL_ADD_SIGNATURE_TO_ALL"></span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SETTINGS_IDENTITIES/LABEL_ADD_SIGNATURE_TO_ALL',
value: signatureToAll
}
}"></div>
</div>
</div>
</div>

View file

@ -8,38 +8,52 @@
<span class="i18n" data-i18n-text="SETTINGS_IDENTITY/LABEL_DISPLAY_NAME"></span>
</label>
<div class="controls">
<input type="text" class="input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: displayName, saveTrigger: displayNameTrigger" />
<div data-bind="saveTrigger: displayNameTrigger"></div>
<div data-bind="component: {
name: 'Input',
params: {
value: displayName,
size: 4,
trigger: displayNameTrigger
}
}"></div>
</div>
</div>
<div class="control-group g-ui-user-select-none" style="display: none">
<!-- <div class="control-group g-ui-user-select-none" style="display: none">
<label class="control-label">
<span class="i18n" data-i18n-text="SETTINGS_IDENTITY/LABEL_REPLY_TO"></span>
</label>
<div class="controls">
<input type="text" class="input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: replyTo" />
<div data-bind="component: {
name: 'Input',
params: {
value: replyTo,
size: 4
}
}"></div>
</div>
</div>
</div>-->
<div class="control-group">
<label class="control-label g-ui-user-select-none">
<span class="i18n" data-i18n-text="SETTINGS_IDENTITY/LABEL_SIGNATURE"></span>
</label>
<div class="controls">
<div class="e-signature-place" data-bind="initDom: signatureDom"></div>
<div style="vertical-align: top;" data-bind="saveTrigger: signatureTrigger"></div>
&nbsp;&nbsp;
<div data-bind="component: {
name: 'SaveTrigger',
params: { value: signatureTrigger, verticalAlign: 'top' }
}"></div>
</div>
</div>
<div class="control-group g-ui-user-select-none">
<div class="controls">
<label data-bind="click: function () { signatureToAll(!signatureToAll()); }">
<i data-bind="css: signatureToAll() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_IDENTITIES/LABEL_ADD_SIGNATURE_TO_ALL"></span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SETTINGS_IDENTITIES/LABEL_ADD_SIGNATURE_TO_ALL',
value: signatureToAll
}
}"></div>
</div>
</div>
</div>

View file

@ -4,7 +4,7 @@
<a class="btn button-back" data-bind="click: backToMailBoxClick">
<i class="icon-left"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_LABELS/BUTTON_BACK"></span>
<span class="i18n i18n-animation" data-i18n-text="SETTINGS_LABELS/BUTTON_BACK"></span>
</a>
</div>
</div>

View file

@ -5,11 +5,13 @@
</div>
<div class="control-group">
<div class="controls">
<label data-bind="click: function () { viewEnable(!viewEnable()); }">
<i data-bind="css: viewEnable() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_SECURITY/LABEL_ENABLE_TWO_FACTOR"></span>
</label>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SETTINGS_SECURITY/LABEL_ENABLE_TWO_FACTOR',
value: viewEnable
}
}"></div>
</div>
</div>
<div class="control-group">