Add preferred tab style for themes

2026-02-10 18:05:32 +08:00 · 2025-05-24 00:43:14 +03:00
parent 386f752a16
commit 54c70480f5
15 changed files with 36 additions and 12 deletions
--- a/apps/common/main/lib/controller/TabStyler.js
+++ b/apps/common/main/lib/controller/TabStyler.js
@ -54,8 +54,8 @@ define([
            var value = Common.UI.FeaturesManager.getInitValue('tabStyle', true);
            if ( _canChangeStyle && Common.localStorage.itemExists("settings-tab-style")) { // get from local storage
                value = Common.localStorage.getItem("settings-tab-style");
-            } else if (value === undefined && _customization && (typeof _customization === 'object') && _customization.toolbarNoTabs) {
-                value = 'line';
+            } else if (value === undefined) {
+                value = (_customization && (typeof _customization === 'object') && _customization.toolbarNoTabs) ? 'line' : Common.UI.Themes.getThemeProps('tab-style');
            }
            Common.Utils.InternalSettings.set("settings-tab-style", value || 'fill');

@ -75,7 +75,8 @@ define([
                } else if ( e.key === 'settings-tab-background' && _canChangeBackground) {
                    _refreshBackground(e.originalEvent.newValue);
                }
-            })
+            });
+            Common.NotificationCenter.on('uitheme:changed', _onThemeChanged);
        };

        var _refreshStyle = function() {
@ -99,8 +100,18 @@ define([
        };

        var _setStyle = function(style) {
-            Common.localStorage.setItem('settings-tab-style', style);
-            Common.Utils.InternalSettings.set('settings-tab-style', style);
+            if (style) {
+                Common.localStorage.setItem('settings-tab-style', style);
+                Common.Utils.InternalSettings.set('settings-tab-style', style);
+            } else {
+                style = Common.UI.FeaturesManager.getInitValue('tabStyle', true);
+                if ( _canChangeStyle && Common.localStorage.itemExists("settings-tab-style")) { // get from local storage
+                    style = Common.localStorage.getItem("settings-tab-style");
+                } else if (style === undefined) {
+                    style = (_customization && (typeof _customization === 'object') && _customization.toolbarNoTabs) ? 'line' : Common.UI.Themes.getThemeProps('tab-style');
+                }
+                Common.Utils.InternalSettings.set("settings-tab-style", style || 'fill');
+            }
            Common.NotificationCenter.trigger('tabstyle:changed', style);
        };

@ -110,6 +121,10 @@ define([
            Common.NotificationCenter.trigger('tabbackground:changed', background);
        };

+        var _onThemeChanged = function() {
+            _setStyle();
+        };
+
        return {
            init: _init,
            setStyle: _setStyle,
--- a/apps/common/main/lib/controller/Themes.js
+++ b/apps/common/main/lib/controller/Themes.js
@ -743,6 +743,8 @@ define([
                            name: document.documentElement.style.getPropertyValue("--font-family-base-custom") || 'Arial, Helvetica, "Helvetica Neue", sans-serif'
                        };
                    }
+                } else if (prop==='tab-style') {
+                    return window.getComputedStyle(document.body).getPropertyValue("--toolbar-preferred-tab-style") || 'line';
                }
                return theme_props[prop];
            }
--- a/apps/common/main/resources/less/colors-table-classic.less
+++ b/apps/common/main/resources/less/colors-table-classic.less
@ -226,6 +226,7 @@
        --shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus);
        --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal);

+        --toolbar-preferred-tab-style: fill;

        //--rb-background-normal: var(--background-normal);
        //--rb-background-normal-hover: var(--background-normal);
--- a/apps/common/main/resources/less/colors-table-dark-contrast.less
+++ b/apps/common/main/resources/less/colors-table-dark-contrast.less
@ -227,6 +227,8 @@
        --shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus);
        --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal);

+        --toolbar-preferred-tab-style: fill;
+
        //--rb-background-normal: var(--background-normal);
        //--rb-background-normal-hover: var(--background-normal);
        //--rb-background-checked: var(--background-normal);
--- a/apps/common/main/resources/less/colors-table-dark.less
+++ b/apps/common/main/resources/less/colors-table-dark.less
@ -228,6 +228,8 @@
        --shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus);
        --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal);

+        --toolbar-preferred-tab-style: fill;
+
        //--rb-background-normal: var(--background-normal);
        //--rb-background-normal-hover: var(--background-normal);
        //--rb-background-checked: var(--background-normal);
--- a/apps/common/main/resources/less/colors-table-gray.less
+++ b/apps/common/main/resources/less/colors-table-gray.less
@ -206,6 +206,8 @@
        --shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus);
        --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal);

+        --toolbar-preferred-tab-style: fill;
+
        //--rb-background-normal: var(--background-normal);
        //--rb-background-normal-hover: var(--background-normal);
        //--rb-background-checked: var(--background-normal);
--- a/apps/common/main/resources/less/colors-table-white.less
+++ b/apps/common/main/resources/less/colors-table-white.less
@ -322,6 +322,7 @@
        --toolbar-simple-content-padding-top: 3px;
        --layout-padding-hor-toolbar-simple: 5px;
        --simple-editor-layout-collapse-button-rigth: 8px;
+        --toolbar-preferred-tab-style: line;

        --content-padding-top: 8px;
    }
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@ -375,6 +375,7 @@
    --toolbar-simple-content-padding-top: 0;
    --layout-padding-hor-toolbar-simple: 0;
    --simple-editor-layout-collapse-button-rigth: 3px;
+    --toolbar-preferred-tab-style: fill;
 }

 // Background
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@ -1773,7 +1773,6 @@ define([
                Common.UI.LayoutManager.init(this.editorConfig.customization ? this.editorConfig.customization.layout : null, this.appOptions.canBrandingExt, this.api);
                this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);

-                Common.localStorage.setItem("settings-tab-style", "line");
                Common.UI.TabStyler.init(this.editorConfig.customization); // call after Common.UI.FeaturesManager.init() !!!

                this.appOptions.canBranding  = params.asc_getCustomization();
--- a/apps/documenteditor/main/app/controller/ViewTab.js
+++ b/apps/documenteditor/main/app/controller/ViewTab.js
@ -362,7 +362,7 @@ define([
        },

        onThemeChanged: function () {
-            if (this.view && Common.UI.Themes.available()) {
+            if (this.view && Common.UI.Themes.available() && this.view.btnInterfaceTheme.menu && (typeof (this.view.btnInterfaceTheme.menu) === 'object')) {
                var current_theme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId(),
                    menu_item = _.findWhere(this.view.btnInterfaceTheme.menu.getItems(true), {value: current_theme});
                if ( menu_item ) {
--- a/apps/pdfeditor/main/app/controller/ViewTab.js
+++ b/apps/pdfeditor/main/app/controller/ViewTab.js
@ -329,7 +329,7 @@ define([
        },

        onThemeChanged: function () {
-            if (this.view && Common.UI.Themes.available()) {
+            if (this.view && Common.UI.Themes.available() && this.view.btnInterfaceTheme.menu && (typeof (this.view.btnInterfaceTheme.menu) === 'object')) {
                var current_theme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId(),
                    menu_item = _.findWhere(this.view.btnInterfaceTheme.menu.getItems(true), {value: current_theme});
                if ( menu_item ) {
--- a/apps/presentationeditor/main/app/controller/Main.js
+++ b/apps/presentationeditor/main/app/controller/Main.js
@ -1394,7 +1394,6 @@ define([
                Common.UI.LayoutManager.init(this.editorConfig.customization ? this.editorConfig.customization.layout : null, this.appOptions.canBrandingExt, this.api);
                this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt);

-                Common.localStorage.setItem("settings-tab-style", "line");
                Common.UI.TabStyler.init(this.editorConfig.customization); // call after Common.UI.FeaturesManager.init() !!!

                this.appOptions.canBranding  = params.asc_getCustomization();
--- a/apps/presentationeditor/main/app/controller/ViewTab.js
+++ b/apps/presentationeditor/main/app/controller/ViewTab.js
@ -219,7 +219,7 @@ define([
        },

        onThemeChanged: function () {
-            if (this.view && Common.UI.Themes.available()) {
+            if (this.view && Common.UI.Themes.available() && this.view.btnInterfaceTheme.menu && (typeof (this.view.btnInterfaceTheme.menu) === 'object')) {
                var current_theme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId(),
                    menu_item = _.findWhere(this.view.btnInterfaceTheme.menu.getItems(true), {value: current_theme});
                if ( !!menu_item ) {
--- a/apps/spreadsheeteditor/main/app/controller/ViewTab.js
+++ b/apps/spreadsheeteditor/main/app/controller/ViewTab.js
@ -290,7 +290,7 @@ define([
        },

        onThemeChanged: function () {
-            if (this.view && Common.UI.Themes.available()) {
+            if (this.view && Common.UI.Themes.available() && this.view.btnInterfaceTheme.menu && (typeof (this.view.btnInterfaceTheme.menu) === 'object')) {
                var current_theme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId(),
                    menu_item = _.findWhere(this.view.btnInterfaceTheme.menu.getItems(true), {value: current_theme});
                if ( !!menu_item ) {
--- a/apps/visioeditor/main/app/controller/ViewTab.js
+++ b/apps/visioeditor/main/app/controller/ViewTab.js
@ -152,7 +152,7 @@ define([
        },

        onThemeChanged: function () {
-            if (this.view && Common.UI.Themes.available()) {
+            if (this.view && Common.UI.Themes.available() && this.view.btnInterfaceTheme.menu && (typeof (this.view.btnInterfaceTheme.menu) === 'object')) {
                var current_theme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId(),
                    menu_item = _.findWhere(this.view.btnInterfaceTheme.menu.getItems(true), {value: current_theme});
                if ( !!menu_item ) {