Show arrow for switch mode button

ONLYOFFICE · Apr 18, 2024 · 8d8dac2 · 8d8dac2
1 parent fbacc28
commit 8d8dac2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
@@ -773,7 +773,7 @@ define([
 
                     if (isPDFEditor && config.isEdit && config.canSwitchMode) {
                         me.btnPDFMode = new Common.UI.Button({
-                            cls: 'btn-header btn-header-pdf-mode no-caret',
+                            cls: 'btn-header btn-header-pdf-mode',
                             iconCls: 'toolbar__icon icon--inverse btn-sheet-view',
                             caption: me.textView,
                             menu: true,
@@ -785,7 +785,7 @@ define([
                         changePDFMode.call(me, config);
                     } else if (isDocEditor && config.isEdit && config.canSwitchMode) {
                         me.btnDocMode = new Common.UI.Button({
-                            cls: 'btn-header btn-header-pdf-mode no-caret',
+                            cls: 'btn-header btn-header-pdf-mode ',
                             iconCls: 'toolbar__icon icon--inverse ' + (config.isReviewOnly ? 'btn-ic-review' : 'btn-edit'),
                             caption: config.isReviewOnly ? me.textReview : me.textEdit,
                             menu: true,

diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
@@ -229,6 +229,19 @@
                 opacity: @header-component-hover-icon-opacity;
             }
         }
+
+        .caret {
+            border-color: @icon-toolbar-header-ie;
+            border-color: @icon-toolbar-header;
+        }
+
+        &:active:not(.disabled),
+        &.active:not(.disabled){
+            .caret {
+                border-color: @icon-toolbar-header-ie;
+                border-color: @icon-toolbar-header;
+            }
+        }
     }
 
     svg.icon {
@@ -349,7 +362,7 @@
     width: auto;
 
     .caption {
-        margin: 2px 0 0 2px;
+        margin: 2px 4px 0 2px;
         color: @text-toolbar-header-ie;
         color: @text-toolbar-header;
     }

diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
@@ -609,6 +609,11 @@
                 color: @text-normal;
             }
 
+            .caret {
+                border-color: @icon-normal-ie;
+                border-color: @icon-normal;
+            }
+
             .inner-box-icon {
                 > svg {
                     fill: @text-normal-ie;
@@ -649,6 +654,11 @@
                         color: @highlight-button-pressed-ie;
                         color: @highlight-button-pressed;
                     }
+
+                    .caret {
+                        border-color: @icon-normal-pressed-ie;
+                        border-color: @icon-normal-pressed;
+                    }
                 }
             }
         }