[common] changed checkbox's layout

apps/common/main/lib/component/CheckBox.js

@@ -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) {
+                if ( value != this.value ) {
                     this.lastValue = this.value;
                     this.setRawValue(value);
-                if (suspendchange !== true && this.lastValue !== value)
+                    if (suspendchange !== true)
                         this.trigger('change', this, this.value, this.lastValue);
+                }
             } else {
                 this.options.value = value;
             }

apps/common/main/resources/less/checkbox.less

@@ -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;
+    input[type=checkbox] {
+        display: none;
+
+        + label {
             width: 14px;
             height: 14px;
-        cursor: default;
-        vertical-align: top;
-        margin-top: -1px;
             background: #fff;
             border: 1px solid @gray;
+            position: absolute;
+            left: 0;
+            margin-top: auto;
+        }
 
-        &.checked {
-            + span {
+        &: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;
                 }