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

@ -1,4 +1,10 @@
<label data-bind="click: toggle, css: {'inline': inline}">
<i data-bind="css: value() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
&nbsp;<span class="i18n" data-bind="attr: {'data-i18n-text': label}"></span>
<label class="e-component e-checkbox" data-bind="click: click, css: {'inline': inline, '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;
<span class="sub-label i18n" data-bind="attr: {'data-i18n-text': label}"></span>
<!-- /ko -->
</label>

View file

@ -0,0 +1,11 @@
<label class="e-component e-checkbox material-design" data-bind="click: click, css: {'inline': inline, '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>

View file

@ -1,14 +1,14 @@
<input class="i18n" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder=""
data-bind="value: value, attr: {'data-i18n-placeholder': placeholder}, enable: enable, css: className" />
<!-- ko if: labeled -->
&nbsp;
<span class="i18n" data-bind="attr: {'data-i18n-text': label}"></span>
&nbsp;
&nbsp;
<span class="i18n" data-bind="attr: {'data-i18n-text': label}"></span>
&nbsp;
<!-- /ko -->
<!-- ko if: triggered -->
&nbsp;
<div data-bind="component: {
name: 'SaveTrigger',
params: { value: trigger }
}"></div>
&nbsp;
<div data-bind="component: {
name: 'SaveTrigger',
params: { value: trigger }
}"></div>
<!-- /ko -->

View file

@ -0,0 +1,7 @@
<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>
&nbsp;&nbsp;
<span class="sub-label i18n" data-bind="attr: {'data-i18n-text': label}"></span>
</label>
</div>

View file

@ -1,3 +1,3 @@
<div class="settings-saved-trigger">
<i class="icon-spinner animated"></i><i class="icon-remove error"></i><i class="icon-ok success"></i>
<div class="e-component settings-saved-trigger">
<i class="icon-spinner animated"></i><i class="icon-remove error"></i><i class="icon-ok success"></i>
</div>

View file

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

View file

@ -1,9 +1,9 @@
<textarea class="i18n" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="true"
data-bind="value: value, enable: enable, attr: { rows: rows }, css: className"></textarea>
<textarea class="i18n" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder=""
data-bind="value: value, enable: enable, attr: { placeholder: placeholder, rows: rows, spellcheck: spellcheck ? 'true' : 'false' }, css: className"></textarea>
<!-- ko if: triggered -->
&nbsp;
<div data-bind="component: {
name: 'SaveTrigger',
params: { value: trigger, verticalAlign: 'top' }
}"></div>
&nbsp;
<div data-bind="component: {
name: 'SaveTrigger',
params: { value: trigger, verticalAlign: 'top' }
}"></div>
<!-- /ko -->