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 1/4] [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

From ef34139e9b34b971e8bfa530973063f18d4be249 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 1 Oct 2021 12:13:41 +0300
Subject: [PATCH 2/4] [all] refactoring for disabled state of radiobox

---
 apps/common/main/lib/component/RadioBox.js    | 13 ++++++-------
 apps/common/main/resources/less/radiobox.less |  1 +
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js
index 54e0d6253..e528a59f9 100644
--- a/apps/common/main/lib/component/RadioBox.js
+++ b/apps/common/main/lib/component/RadioBox.js
@@ -121,7 +121,8 @@ define([
             this.$label.on('keydown', this.onKeyDown.bind(this));
 
             this.$label.find('svg, span').on('click', function(e) {
-                this.setValue(true);
+                if ( !this.disabled )
+                    this.setValue(true);
             }.bind(this));
 
             this.rendered = true;
@@ -163,12 +164,10 @@ define([
 
         setValue: function(value, suspendchange) {
             if (this.rendered) {
-                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'));
-                }
+                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 5c876ef59..6aebe8c2f 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -33,6 +33,7 @@
     &.disabled, &:disabled {
         svg, span {
             opacity: @component-disabled-opacity;
+            pointer-events: none;
         }
     }
 

From eff524bcbf25c97e11cd799fd01d58a88b7270de Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 5 Oct 2021 16:23:31 +0300
Subject: [PATCH 3/4] [DE] correct stylesheet in advanced options dialog

---
 .../main/app/view/TextToTableDialog.js            |  4 ++--
 .../main/resources/less/advanced-settings.less    | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/documenteditor/main/app/view/TextToTableDialog.js b/apps/documenteditor/main/app/view/TextToTableDialog.js
index a1d69eea2..5293df706 100644
--- a/apps/documenteditor/main/app/view/TextToTableDialog.js
+++ b/apps/documenteditor/main/app/view/TextToTableDialog.js
@@ -91,8 +91,8 @@ define([
                                 '</tr>',
                                 '<tr>',
                                     '<td style="padding-bottom: 5px;">',
-                                        '<div id="id-text-table-radio-fixed" style="display: inline-block;margin-right: 10px;"></div>',
-                                        '<div id="id-text-table-spn-fixed" style="display: inline-block;"></div>',
+                                        '<div id="id-text-table-radio-fixed"></div>',
+                                        '<div id="id-text-table-spn-fixed"></div>',
                                     '</td>',
                                 '</tr>',
                                 '<tr>',
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index 01a5aa989..f80b6ee8b 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -73,4 +73,19 @@
 #page-margins-preview {
     border: @scaled-one-px-value-ie solid @border-regular-control-ie;
     border: @scaled-one-px-value solid @border-regular-control;
+}
+
+#id-text-table-radio-fixed {
+    display: inline-block;
+    margin-right: 10px;
+    vertical-align: middle;
+
+    .pixel-ratio__1_75 &, .pixel-ratio__2 & {
+        padding-bottom: 1px;
+    }
+}
+
+#id-text-table-spn-fixed {
+    display: inline-block;
+    vertical-align: middle;
 }
\ No newline at end of file

From 69e72fce51fc6486bbe7dc837710ab9a0679ccf5 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Tue, 5 Oct 2021 22:00:07 +0300
Subject: [PATCH 4/4] [DE] fixed radiobox in bookmark settings dialog

---
 apps/common/main/lib/component/RadioBox.js          | 13 ++++++-------
 .../documenteditor/main/app/view/BookmarksDialog.js |  4 ++--
 .../main/resources/less/advanced-settings.less      |  8 +++++++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js
index e528a59f9..c523d0f96 100644
--- a/apps/common/main/lib/component/RadioBox.js
+++ b/apps/common/main/lib/component/RadioBox.js
@@ -101,7 +101,6 @@ define([
             this.setCaption(this.options.labelText);
 
             // handle events
-            this.$radio.on('click', _.bind(this.onItemCheck, this));
         },
 
         render: function () {
@@ -118,12 +117,12 @@ define([
             this.$radio = el.find('input[type=radio]');
             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) {
-                if ( !this.disabled )
-                    this.setValue(true);
-            }.bind(this));
+            this.$label.on({
+                'keydown': this.onKeyDown.bind(this),
+                'click': function(e){
+                    if ( !this.disabled )
+                        this.setValue(true);
+                }.bind(this),});
 
             this.rendered = true;
 
diff --git a/apps/documenteditor/main/app/view/BookmarksDialog.js b/apps/documenteditor/main/app/view/BookmarksDialog.js
index 1e3285f81..1d69c9716 100644
--- a/apps/documenteditor/main/app/view/BookmarksDialog.js
+++ b/apps/documenteditor/main/app/view/BookmarksDialog.js
@@ -79,8 +79,8 @@ define([
                                     '<tr>',
                                         '<td class="padding-extra-small">',
                                             '<label class="header" style="margin-right: 10px;">', me.textSort,'</label>',
-                                            '<div id="bookmarks-radio-name" style="display: inline-block; margin-right: 10px;"></div>',
-                                            '<div id="bookmarks-radio-location" style="display: inline-block;"></div>',
+                                            '<div id="bookmarks-radio-name"></div>',
+                                            '<div id="bookmarks-radio-location"></div>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index f80b6ee8b..75d7fda5c 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -85,7 +85,13 @@
     }
 }
 
-#id-text-table-spn-fixed {
+#bookmarks-radio-name {
+    display: inline-block;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+#id-text-table-spn-fixed, #bookmarks-radio-location {
     display: inline-block;
     vertical-align: middle;
 }
\ No newline at end of file