From ad7bc46e30789376330752dd4df0aff9cc4f71d7 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 10 Dec 2019 23:58:38 +0300
Subject: [PATCH] [common] changed radiobox component

---
 apps/common/main/lib/component/RadioBox.js    | 15 +++----
 apps/common/main/resources/less/radiobox.less | 39 +++++++++++--------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js
index 39fdcb585d..75a10ab874 100644
--- a/apps/common/main/lib/component/RadioBox.js
+++ b/apps/common/main/lib/component/RadioBox.js
@@ -71,7 +71,8 @@ define([
         disabled    : false,
         rendered    : false,
 
-        template    : _.template('<label class="radiobox"><input type="button" name="<%= name %>" class="button__radiobox"><span><%= labelText %></span></label>'),
+        template    : _.template('<label class="radiobox"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
+                                    '<label for="<%= id %>" class="radiobox__shape" /><span><%= labelText %></span></label>'),
 
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
@@ -96,11 +97,12 @@ define([
             var el = this.$el || $(this.el);
             el.html(this.template({
                 labelText: this.options.labelText,
-                name: this.name
+                name: this.name,
+                id: Common.UI.getId('rdb-')
             }));
 
-            this.$radio = el.find('input[type=button]');
-            this.$label = el.find('label');
+            this.$radio = el.find('input[type=radio]');
+            this.$label = el.find('label.radiobox');
             this.rendered = true;
 
             return this;
@@ -129,8 +131,7 @@ define([
 
         setRawValue: function(value) {
             var value = (value === true || value === 'true' || value === '1' || value === 1 );
-            $('input[type=button][name=' + this.name + ']').removeClass('checked');
-            this.$radio.toggleClass('checked', value);
+            this.$radio.prop('checked', value);
         },
 
         setValue: function(value, suspendchange) {
@@ -138,7 +139,7 @@ define([
                 var lastValue = this.$radio.hasClass('checked');
                 this.setRawValue(value);
                 if (suspendchange !== true && lastValue !== value)
-                    this.trigger('change', this, this.$radio.hasClass('checked'));
+                    this.trigger('change', this, this.$radio.is(':checked'));
             } else {
                 this.options.checked = value;
             }
diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
index e356a52cd9..c95c3657f4 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -4,22 +4,27 @@
     .font-size-normal();
     font-weight: normal;
     position: relative;
+    min-height: 1em;
 
-    input[type=button] {
-        margin-left: -22px;
-        margin-right: 6px;
-        padding-bottom: 4px;
-        width: 14px;
-        height: 14px;
-        cursor: default;
-        vertical-align: top;
+    input[type=radio] {
 
-        background: #fff;
-        border: 1px solid @gray;
-        border-radius: 50%;
+        display: none;
 
-        &.checked {
-            + span {
+        + label {
+            position: absolute;
+            left: 0;
+            margin-top: auto;
+            padding-bottom: 4px;
+            width: 14px;
+            height: 14px;
+
+            background: #fff;
+            border: 1px solid @gray;
+            border-radius: 50%;
+        }
+
+        &:checked {
+            + label {
                 &::before {
                     content: '';
                     position: absolute;
@@ -27,16 +32,16 @@
                     border-radius: 50%;
                     width: 8px;
                     height: 8px;
-                    left: 3px;
-                    top: 3px;
+                    left: 2px;
+                    top: 2px;
                 }
             }
         }
 
-        &.disabled {
+        &.disabled, &:disabled {
             opacity: .4;
 
-            + span {
+            + label {
                 &::before {
                     opacity: .4;
                 }