From bd7fb9a4f00644a7d9299f71b8ae971cbf7ccf83 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 30 Sep 2021 23:49:12 +0300
Subject: [PATCH] [all] fix bug 50356

---
 apps/common/main/lib/component/RadioBox.js    | 26 ++++--
 apps/common/main/resources/less/radiobox.less | 82 +++++++------------
 2 files changed, 50 insertions(+), 58 deletions(-)

diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js
index 040d88af3..54e0d6253 100644
--- a/apps/common/main/lib/component/RadioBox.js
+++ b/apps/common/main/lib/component/RadioBox.js
@@ -71,8 +71,13 @@ define([
         disabled    : false,
         rendered    : false,
 
-        template    : _.template('<label class="radiobox" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
-                                    '<label for="<%= id %>" class="radiobox__shape"></label><span></span></label>'),
+        template    : _.template('<div class="radiobox" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
+                                    '<input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
+                                    '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+                                        '<circle class="rb-circle" cx="8" cy="8" r="6.5" />' +
+                                        '<circle class="rb-check-mark" cx="8" cy="8" r="4" />' +
+                                    '</svg>' +
+                                    '<span></span></div>'),
 
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
@@ -111,9 +116,14 @@ define([
             }));
 
             this.$radio = el.find('input[type=radio]');
-            this.$label = el.find('label.radiobox');
+            this.$label = el.find('div.radiobox');
             this.$span = this.$label.find('span');
             this.$label.on('keydown', this.onKeyDown.bind(this));
+
+            this.$label.find('svg, span').on('click', function(e) {
+                this.setValue(true);
+            }.bind(this));
+
             this.rendered = true;
 
             return this;
@@ -153,10 +163,12 @@ define([
 
         setValue: function(value, suspendchange) {
             if (this.rendered) {
-                var lastValue = this.$radio.hasClass('checked');
-                this.setRawValue(value);
-                if (suspendchange !== true && lastValue !== value)
-                    this.trigger('change', this, this.$radio.is(':checked'));
+                if ( !this.disabled ) {
+                    var lastValue = this.$radio.hasClass('checked');
+                    this.setRawValue(value);
+                    if (suspendchange !== true && lastValue !== value)
+                        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 843c1eb82..5c876ef59 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -1,72 +1,52 @@
 .radiobox {
-    padding-left: 22px;
     margin-bottom: 0;
     .font-size-normal();
     font-weight: normal;
     position: relative;
     min-height: 1em;
 
-    input[type=radio] {
+    display: flex;
+    align-items: center;
 
+    svg {
+        margin-right: 8px;
+        .rb-circle {
+            fill: @background-normal;
+            stroke: @border-regular-control;
+        }
+
+        .rb-check-mark {
+            fill: @text-normal;
+        }
+    }
+
+    input[type=radio] {
         display: none;
 
-        + label {
-            position: absolute;
-            left: 0;
-            margin-top: auto;
-            padding-bottom: 4px;
-            width: 14px;
-            height: 14px;
-
-            background: @background-normal-ie;
-            background: @background-normal;
-            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
-            border: @scaled-one-px-value solid @border-regular-control;
-            border-radius: 50%;
-
-            + span {
-                outline: @scaled-one-px-value-ie dotted transparent;
-                outline: @scaled-one-px-value dotted transparent;
-                display: inline-block;
+        &:not(:checked) + svg {
+            .rb-check-mark {
+                display: none;
             }
         }
+    }
 
-        &:checked {
-            + label {
-                &::before {
-                    content: '';
-                    position: absolute;
-                    background: @text-normal-ie;
-                    background: @text-normal;
-                    border-radius: 50%;
-                    width: 8px;
-                    height: 8px;
-                    left: 2px;
-                    top: 2px;
-                }
-            }
-        }
-
-        &.disabled, &:disabled {
-
-            + label {
-                &::before {
-                }
-            }
+    &.disabled, &:disabled {
+        svg, span {
+            opacity: @component-disabled-opacity;
         }
     }
 
     &:focus:not(.disabled) {
-        input[type=radio] {
-            + label {
-                border-color: @border-control-focus-ie;
-                border-color: @border-control-focus;
-
-                + span {
-                    outline-color: @border-control-focus-ie;
-                    outline-color: @border-control-focus;
-                }
+        svg {
+            .rb-circle {
+                stroke: @border-control-focus-ie;
+                stroke: @border-control-focus;
             }
         }
+
+        span {
+            outline: @scaled-one-px-value-ie dotted @border-control-focus-ie;
+            outline: @scaled-one-px-value dotted @border-control-focus;
+        }
     }
 }
\ No newline at end of file