Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[common] changed checkbox's layout

Browse source
This commit is contained in:
Maxim Kadushkin 2019-12-10 23:52:01 +03:00
parent e15d784f53
commit 3d087bb587
2 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
apps/common/main/lib/component/CheckBox.js
View file

@ -94,7 +94,8 @@ define([
checked : false,
value : 'unchecked',
template : _.template('<label class="checkbox-indeterminate"><input type="button" class="button__checkbox"><span><%= labelText %></span></label>'),
template : _.template('<label class="checkbox-indeterminate"><input id="<%= id %>" type="checkbox" class="checkbox__native">' +
'<label for="<%= id %>" class="checkbox__shape" /><span><%= labelText %></span></label>'),
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
@ -106,19 +107,19 @@ define([
render: function (parentEl) {
var me = this;
if (!me.rendered) {
var elem = this.template({
labelText: this.options.labelText,
id: Common.UI.getId('chb-')
});
if (parentEl) {
this.setElement(parentEl, false);
parentEl.html(this.template({
labelText: this.options.labelText
}));
parentEl.html(elem);
} else {
me.$el.html(this.template({
labelText: this.options.labelText
}));
me.$el.html(elem);
}
this.$chk = me.$el.find('input[type=button]');
this.$label = me.$el.find('label');
this.$chk = me.$el.find('input[type=checkbox]');
this.$label = me.$el.find('label.checkbox-indeterminate');
this.$chk.on('click', this.onItemCheck.bind(this));
this.rendered = true;
@ -166,18 +167,18 @@ define([
this.checked = (value === true || value === 'true' || value === '1' || value === 1 || value === 'checked');
this.indeterminate = (value === 'indeterminate');
this.$chk.toggleClass('checked', this.checked);
this.$chk.toggleClass('indeterminate', this.indeterminate);
this.value = this.indeterminate ? 'indeterminate' : (this.checked ? 'checked' : 'unchecked');
this.$chk.prop({indeterminate: this.indeterminate, checked: this.checked});
},
setValue: function(value, suspendchange) {
if (this.rendered) {
this.lastValue = this.value;
this.setRawValue(value);
if (suspendchange !== true && this.lastValue !== value)
this.trigger('change', this, this.value, this.lastValue);
if ( value != this.value ) {
this.lastValue = this.value;
this.setRawValue(value);
if (suspendchange !== true)
this.trigger('change', this, this.value, this.lastValue);
}
} else {
this.options.value = value;
}

41
apps/common/main/resources/less/checkbox.less
View file

@ -4,21 +4,23 @@
.font-size-normal();
font-weight: normal;
position: relative;
min-height: 1em;
input[type=button] {
background-position: @checkbox-offset-x @checkbox-offset-y;
margin-left: -22px;
margin-right: 6px;
width: 14px;
height: 14px;
cursor: default;
vertical-align: top;
margin-top: -1px;
background: #fff;
border: 1px solid @gray;
input[type=checkbox] {
display: none;
&.checked {
+ span {
+ label {
width: 14px;
height: 14px;
background: #fff;
border: 1px solid @gray;
position: absolute;
left: 0;
margin-top: auto;
}
&:checked:not(:indeterminate) {
+ label {
&::before {
content: '';
position: absolute;
@ -27,14 +29,14 @@
transform: rotate(45deg);
width: 6px;
height: 10px;
left: 4px;
left: 3px;
top: -1px;
}
}
}
&.indeterminate {
+ span {
&:indeterminate {
+ label {
&::before {
content: '';
position: absolute;
@ -42,16 +44,17 @@
background: @gray-soft;
width: 8px;
height: 8px;
left: 3px;
left: 2px;
top: 2px;
}
}
}
&.disabled {
&.disabled,
&:disabled {
opacity: .4;
+ span {
+ label {
&::before {
opacity: .4;
}