mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-07 08:27:03 +03:00
Focused state for custom checkbox (Closes #604)
This commit is contained in:
parent
48b91fb957
commit
a11dcbed4b
25 changed files with 209 additions and 65 deletions
|
|
@ -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 -->
|
||||
|
||||
<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,6 +2,6 @@
|
|||
<input type="checkbox" data-bind="checked: value, disable: disable() || !enable()" style="margin: 0 0 1px 0;" />
|
||||
<!-- 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
<span class="sub-label i18n" data-bind="attr: {'data-i18n': label}"></span>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<!-- ko if: preLabeled -->
|
||||
<span class="i18n" data-bind="attr: {'data-i18n': preLabel}"></span>
|
||||
|
||||
<!-- /ko -->
|
||||
<select data-bind="options: options, value: value, enable: enable, optionsText: optionsText, optionsValue: optionsValue,
|
||||
css: className, optionsAfterRender: defautOptionsAfterRender"></select>
|
||||
<!-- ko if: labeled -->
|
||||
|
||||
<span class="i18n" data-bind="attr: {'data-i18n': label}"></span>
|
||||
|
||||
<!-- /ko -->
|
||||
<!-- ko if: triggered -->
|
||||
|
||||
<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>
|
||||
|
||||
<!-- /ko -->
|
||||
<select data-bind="options: options, value: value, enable: enable, optionsText: optionsText, optionsValue: optionsValue,
|
||||
css: className, optionsAfterRender: defautOptionsAfterRender"></select>
|
||||
<!-- ko if: labeled -->
|
||||
|
||||
<span class="i18n" data-bind="attr: {'data-i18n': label}"></span>
|
||||
|
||||
<!-- /ko -->
|
||||
<!-- ko if: triggered -->
|
||||
|
||||
<div data-bind="component: {
|
||||
name: 'SaveTrigger',
|
||||
params: { value: trigger }
|
||||
}"></div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue