From 4d5880486d8f0461c92a00f71e7f539f0dd5a271 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sat, 17 Apr 2021 16:08:04 +0300 Subject: [PATCH 1/8] [common] refactoring --- apps/common/main/lib/controller/Themes.js | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index c8c2e2427..e17a7eee7 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -126,34 +126,12 @@ define([ return out_object; } - var refresh_sdk_colors = function () { - if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) { - var style = getComputedStyle(document.body); - if ( !!window.DE ) { - var color_background_normal = style.getPropertyValue('--background-normal'); - this.api.asc_setSkin({ - "RulerOutline": style.getPropertyValue('--border-toolbar'), - "RulerMarkersFillColor": color_background_normal, - "RulerMarkersFillColorOld": color_background_normal, - "RulerTableColor1": color_background_normal, - "RulerLight": style.getPropertyValue("--canvas-ruler-background"), - "RulerDark": style.getPropertyValue("--canvas-ruler-margins-background"), - "RulerTextColor": style.getPropertyValue("--canvas-ruler-mark"), - "RulerTableColor2": style.getPropertyValue("--canvas-ruler-handle-border"), - "RulerTableColor2Old": style.getPropertyValue("--canvas-ruler-handle-border-disabled"), - "RulerTabsColor": style.getPropertyValue("--canvas-high-contrast"), - "RulerTabsColorOld": style.getPropertyValue("--canvas-high-contrast-disabled"), - }); - } - } - } return { THEME_LIGHT_ID: 'theme-light', THEME_DARK_ID: 'theme-dark', init: function (api) { var me = this; - refresh_sdk_colors = refresh_sdk_colors.bind(this); $(window).on('storage', function (e) { if ( e.key == 'ui-theme' ) { From 0cec65caae7c1286e5d4249ab36ab9d9dbc136e7 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sat, 17 Apr 2021 16:10:35 +0300 Subject: [PATCH 2/8] [themes] added new theme --- apps/common/main/lib/controller/Themes.js | 2 + apps/common/main/resources/less/buttons.less | 2 + .../resources/less/colors-table-classic.less | 121 ++++++++++++++++++ .../main/app/view/FileMenuPanels.js | 1 + .../main/resources/less/app.less | 1 + 5 files changed, 127 insertions(+) create mode 100644 apps/common/main/resources/less/colors-table-classic.less diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index e17a7eee7..7a70c233e 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -15,6 +15,7 @@ define([ var themes_map = { 'theme-light': 'light', + 'theme-classic-light': 'light', 'theme-dark': 'dark' } @@ -128,6 +129,7 @@ define([ return { THEME_LIGHT_ID: 'theme-light', + THEME_CLASSIC_LIGHT_ID: 'theme-classic-light', THEME_DARK_ID: 'theme-dark', init: function (api) { diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 1ae6fecb2..6c8db3dad 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -77,6 +77,8 @@ &.active:not(.disabled){ .caret { transform: rotate(45deg); + border-color: @icon-normal-pressed-ie; + border-color: @icon-normal-pressed; } } diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less new file mode 100644 index 000000000..53b8097b1 --- /dev/null +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -0,0 +1,121 @@ + +:root { + .theme-classic-light { + --toolbar-header-document: #446995; + --toolbar-header-spreadsheet: #40865c; + --toolbar-header-presentation: #aa5252; + + --background-normal: #fff; + --background-toolbar: #f1f1f1; + --background-toolbar-additional: #f1f1f1; + --background-primary-dialog-button: #7d858c; + --background-tab-underline: #444; + --background-notification-popover: #fcfed7; + --background-notification-badge: #ffd112; + --background-scrim: fade(#000, 20%); + --background-loader: fade(#000, 65%); + + --highlight-button-hover: #d8dadc; + --highlight-button-pressed: #7d858c; + --highlight-button-pressed-hover: #7d858c; + --highlight-primary-dialog-button-hover: #666d73; + --highlight-header-button-hover: fade(#fff, 20%); + --highlight-header-button-pressed: fade(#000, 20%); + --highlight-toolbar-tab-underline: #444; + --highlight-text-select: #3494fb; + + --border-toolbar: #cbcbcb; + --border-divider: #cbcbcb; + --border-regular-control: #cfcfcf; + --border-toolbar-button-hover: #d8dadc; + --border-preview-hover: #cfcfcf; + --border-preview-select: #848484; + --border-control-focus: #848484; + --border-color-shading: fade(#000, 20%); + --border-error: #d9534f; + + --text-normal: #444; + --text-normal-pressed: #444; + --text-secondary: #a5a5a5; + --text-tertiary: #a5a5a5; + --text-link: #acbfff; + --text-inverse: #333; + --text-toolbar-header: fade(#fff, 80%); + --text-contrast-background: #fff; + + --icon-normal: #444; + --icon-normal-pressed: #fff; + --icon-inverse: #444; + --icon-toolbar-header: fade(#fff, 80%); + --icon-notification-badge: #000; + --icon-contrast-popover: #fff; + --icon-success: #5b9f27; + + // Canvas colors + --canvas-background: #666666; + --canvas-content-background: #fff; + --canvas-page-border: #555; + + --canvas-ruler-background: #555; + --canvas-ruler-margins-background: #444; + --canvas-ruler-mark: #b2b2b2; + --canvas-ruler-handle-border: #b2b2b2; + --canvas-ruler-handle-border-disabled: #717171; + + --canvas-high-contrast: #fff; + --canvas-high-contrast-disabled: #888; + + --canvas-cell-border: fade(#000, 10%); + --canvas-cell-title-border: #757575; + --canvas-cell-title-border-hover: #858585; + --canvas-cell-title-border-selected: #9e9e9e; + --canvas-cell-title-hover: #787878; + --canvas-cell-title-selected: #939393; + + --canvas-dark-cell-title: #111; + --canvas-dark-cell-title-hover: #000; + --canvas-dark-cell-title-selected: #333; + --canvas-dark-cell-title-border: #282828; + --canvas-dark-cell-title-border-hover: #191919; + --canvas-dark-cell-title-border-selected: #474747; + + --canvas-scroll-thumb: #404040; + --canvas-scroll-thumb-hover: #999; + --canvas-scroll-thumb-pressed: #adadad; + --canvas-scroll-thumb-border: #2a2a2a; + --canvas-scroll-thumb-border-hover: #2a2a2a; + --canvas-scroll-thumb-border-pressed: #2a2a2a; + --canvas-scroll-arrow: #999; + --canvas-scroll-arrow-hover: #404040; + --canvas-scroll-arrow-pressed: #404040; + --canvas-scroll-thumb-target: #999; + --canvas-scroll-thumb-target-hover: #404040; + --canvas-scroll-thumb-target-pressed: #404040; + + // Others + + --button-small-normal-icon-offset-x: 0; + --button-small-active-icon-offset-x: -20px; + --button-large-normal-icon-offset-x: 0; + --button-large-active-icon-offset-x: -31px; + --button-huge-normal-icon-offset-x: 0; + --button-huge-active-icon-offset-x: -40px; + --button-xhuge-normal-icon-offset-x: 0; + --button-xhuge-active-icon-offset-x: -28px; + //--button-xhuge-normal-icon-offset-x: -37px; + //--button-xhuge-active-icon-offset-x: -37px; + + --modal-window-mask-opacity: 0.6; + --image-border-types-filter: invert(100%) brightness(4); + --image-border-types-filter-selected: invert(100%) brightness(4); + --component-normal-icon-filter: invert(100%); + + --component-normal-icon-opacity: .8; + --component-hover-icon-opacity: .8; + --component-active-icon-opacity: .8; + --component-active-hover-icon-opacity: .8; + --component-disabled-opacity: .3; + + --menu-icon-item-checked-offset-x: -20px; + } +} diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js index ddd30ccbf..2ac8862ba 100644 --- a/apps/documenteditor/main/app/view/FileMenuPanels.js +++ b/apps/documenteditor/main/app/view/FileMenuPanels.js @@ -466,6 +466,7 @@ define([ cls : 'input-group-nr', data : [ { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight }, + { value: Common.UI.Themes.THEME_CLASSIC_LIGHT_ID, displayValue: "Classic light" }, { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark } ] }); diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less index 07982a8c8..7e9bf70d3 100644 --- a/apps/documenteditor/main/resources/less/app.less +++ b/apps/documenteditor/main/resources/less/app.less @@ -10,6 +10,7 @@ // Bootstrap overwrite @import "../../../../common/main/resources/less/variables.less"; @import "../../../../common/main/resources/less/colors-table.less"; +@import "../../../../common/main/resources/less/colors-table-classic.less"; @import "../../../../common/main/resources/less/colors-table-dark.less"; // From 57c9c6268e7070917075e88ba5e39d47523c232a Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sun, 18 Apr 2021 17:32:39 +0300 Subject: [PATCH 3/8] [common] extended theme's object --- apps/common/main/lib/controller/Themes.js | 85 ++++++++++--------- apps/common/main/lib/view/Header.js | 1 - .../main/app/view/FileMenuPanels.js | 19 +++-- apps/documenteditor/main/locale/en.json | 9 +- .../main/app/view/FileMenuPanels.js | 16 ++-- apps/presentationeditor/main/locale/en.json | 9 +- .../main/resources/less/app.less | 1 + .../main/app/view/FileMenuPanels.js | 16 ++-- apps/spreadsheeteditor/main/locale/en.json | 9 +- .../main/resources/less/app.less | 1 + 10 files changed, 93 insertions(+), 73 deletions(-) diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 7a70c233e..d7e8cfdf6 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -7,24 +7,22 @@ define([ ], function () { 'use strict'; - Common.UI.Themes = new (function() { - var sdk_themes_alias = { - 'theme-light': 'flat', - 'theme-dark': 'flatDark' - }; - + Common.UI.Themes = new (function(locale) { + !locale && (locale = {}); + var id_default_theme = 'theme-classic-light'; var themes_map = { - 'theme-light': 'light', - 'theme-classic-light': 'light', - 'theme-dark': 'dark' - } - - sdk_themes_alias.contains = function (name) { - return !!this[name]; - } - - themes_map.contains = function (name) { - return !!this[name]; + 'theme-light': { + text: locale.txtThemeLight || 'Light', + type: 'light' + }, + 'theme-classic-light': { + text: locale.txtThemeClassicLight || 'Classic Light', + type: 'light' + }, + 'theme-dark': { + text: locale.txtThemeDark || 'Dark', + type: 'dark' + }, } var name_colors = [ @@ -128,10 +126,6 @@ define([ } return { - THEME_LIGHT_ID: 'theme-light', - THEME_CLASSIC_LIGHT_ID: 'theme-classic-light', - THEME_DARK_ID: 'theme-dark', - init: function (api) { var me = this; @@ -142,7 +136,7 @@ define([ }) this.api = api; - var theme_name = Common.localStorage.getItem('ui-theme', 'theme-light'); + var theme_name = Common.localStorage.getItem('ui-theme', id_default_theme); if ( !$('body').hasClass(theme_name) ) { $('body').addClass(theme_name); @@ -152,50 +146,57 @@ define([ obj.type = themes_map[theme_name]; obj.name = theme_name; api.asc_setSkin(obj); - - // app.eventbus.addListeners({ - // 'FileMenu': { - // 'settings:apply': function (menu) { - // } - // } - // }, {id: 'Themes'}); - - // getComputedStyle(document.documentElement).getPropertyValue('--background-normal'); }, available: function () { return !Common.Utils.isIE; }, - current: function () { - return Common.localStorage.getItem('ui-theme') || 'theme-light'; + map: function () { + return themes_map + }, + + get: function (id) { + return themes_map[id] + }, + + currentThemeId: function () { + return Common.localStorage.getItem('ui-theme') || id_default_theme; + }, + + defaultThemeId: function () { + return id_default_theme; + }, + + defaultTheme: function () { + return themes_map[id_default_theme] }, isDarkTheme: function () { return themes_map[this.current()] == 'dark'; }, - setTheme: function (name) { - if ( themes_map.contains(name) ) { + setTheme: function (id) { + if ( !!themes_map[id] ) { var classname = document.documentElement.className.replace(/theme-\w+\s?/, ''); document.body.className = classname; - $('body').addClass(name); + $('body').addClass(id); var obj = get_current_theme_colors(name_colors); - obj.type = themes_map[name]; - obj.name = name; + obj.type = themes_map[id].type; + obj.name = id; this.api.asc_setSkin(obj); - Common.localStorage.setItem('ui-theme', name); - Common.NotificationCenter.trigger('uitheme:changed', name); + Common.localStorage.setItem('ui-theme', id); + Common.NotificationCenter.trigger('uitheme:changed', id); } }, toggleTheme: function () { - this.setTheme(this.current() == 'theme-dark' ? 'theme-light' : 'theme-dark'); + this.setTheme(this.current() == 'theme-dark' ? id_default_theme : 'theme-dark'); } } - })(); + })(Common.UI.Themes); }); diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js index cf2ef9395..60802aaae 100644 --- a/apps/common/main/lib/view/Header.js +++ b/apps/common/main/lib/view/Header.js @@ -782,7 +782,6 @@ define([ textAdvSettings: 'Advanced Settings', tipViewSettings: 'View Settings', textRemoveFavorite: 'Remove from Favorites', - textDarkTheme: 'Dark theme', textAddFavorite: 'Mark as favorite' } }(), Common.Views.Header || {})) diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js index 2ac8862ba..f097325a7 100644 --- a/apps/documenteditor/main/app/view/FileMenuPanels.js +++ b/apps/documenteditor/main/app/view/FileMenuPanels.js @@ -464,11 +464,6 @@ define([ style : 'width: 160px;', editable : false, cls : 'input-group-nr', - data : [ - { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight }, - { value: Common.UI.Themes.THEME_CLASSIC_LIGHT_ID, displayValue: "Classic light" }, - { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark } - ] }); $markup.find('.btn.primary').each(function(index, el){ @@ -601,8 +596,16 @@ define([ this.chPaste.setValue(Common.Utils.InternalSettings.get("de-settings-paste-button")); - item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()}); - this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID); + var data = []; + for (var t in Common.UI.Themes.map()) { + data.push({value: t, displayValue: Common.UI.Themes.get(t).text}); + } + + if ( data.length ) { + this.cmbTheme.setData(data); + item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()}); + this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId()); + } }, applySettings: function() { @@ -731,8 +734,6 @@ define([ strPasteButton: 'Show Paste Options button when content is pasted', txtProofing: 'Proofing', strTheme: 'Theme', - txtThemeLight: 'Light', - txtThemeDark: 'Dark', txtAutoCorrect: 'AutoCorrect options...' }, DE.Views.FileMenuPanels.Settings || {})); diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index d8a7e29a6..aa582576e 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -192,6 +192,9 @@ "Common.UI.Window.textInformation": "Information", "Common.UI.Window.textWarning": "Warning", "Common.UI.Window.yesButtonText": "Yes", + "Common.UI.Themes.txtThemeDark": "Dark", + "Common.UI.Themes.txtThemeLight": "Light", + "Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.Utils.Metric.txtCm": "cm", "Common.Utils.Metric.txtPt": "pt", "Common.Views.About.txtAddress": "address: ", @@ -260,7 +263,7 @@ "Common.Views.Header.textAdvSettings": "Advanced settings", "Common.Views.Header.textBack": "Open file location", "Common.Views.Header.textCompactView": "Hide Toolbar", - "Common.Views.Header.textDarkTheme": "Dark theme", + "del_Common.Views.Header.textDarkTheme": "Dark theme", "Common.Views.Header.textHideLines": "Hide Rulers", "Common.Views.Header.textHideStatusBar": "Hide Status Bar", "Common.Views.Header.textRemoveFavorite": "Remove from Favorites", @@ -1716,8 +1719,8 @@ "DE.Views.FileMenuPanels.Settings.txtSpellCheck": "Spell Checking", "DE.Views.FileMenuPanels.Settings.txtStopMacros": "Disable All", "DE.Views.FileMenuPanels.Settings.txtStopMacrosDesc": "Disable all macros without a notification", - "DE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark", - "DE.Views.FileMenuPanels.Settings.txtThemeLight": "Light", + "del_DE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark", + "del_DE.Views.FileMenuPanels.Settings.txtThemeLight": "Light", "DE.Views.FileMenuPanels.Settings.txtWarnMacros": "Show Notification", "DE.Views.FileMenuPanels.Settings.txtWarnMacrosDesc": "Disable all macros with a notification", "DE.Views.FileMenuPanels.Settings.txtWin": "as Windows", diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js index 05fc32092..c775fee34 100644 --- a/apps/presentationeditor/main/app/view/FileMenuPanels.js +++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js @@ -403,10 +403,6 @@ define([ style : 'width: 160px;', editable : false, cls : 'input-group-nr', - data : [ - { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight }, - { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark } - ] }); $markup.find('.btn.primary').each(function(index, el){ @@ -529,8 +525,16 @@ define([ this.chPaste.setValue(Common.Utils.InternalSettings.get("pe-settings-paste-button")); - item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()}); - this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID); + var data = []; + for (var t in Common.UI.Themes.map()) { + data.push({value: t, displayValue: Common.UI.Themes.get(t).text}); + } + + if ( data.length ) { + this.cmbTheme.setData(data); + item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()}); + this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId()); + } }, applySettings: function() { diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index f25eeddf0..d5e1ce708 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -83,6 +83,9 @@ "Common.UI.Window.textInformation": "Information", "Common.UI.Window.textWarning": "Warning", "Common.UI.Window.yesButtonText": "Yes", + "Common.UI.Themes.txtThemeDark": "Dark", + "Common.UI.Themes.txtThemeLight": "Light", + "Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.Utils.Metric.txtCm": "cm", "Common.Utils.Metric.txtPt": "pt", "Common.Views.About.txtAddress": "address: ", @@ -148,7 +151,7 @@ "Common.Views.Header.textAdvSettings": "Advanced settings", "Common.Views.Header.textBack": "Open file location", "Common.Views.Header.textCompactView": "Hide Toolbar", - "Common.Views.Header.textDarkTheme": "Dark theme", + "del_Common.Views.Header.textDarkTheme": "Dark theme", "Common.Views.Header.textHideLines": "Hide Rulers", "Common.Views.Header.textHideStatusBar": "Hide Status Bar", "Common.Views.Header.textRemoveFavorite": "Remove from Favorites", @@ -1352,8 +1355,8 @@ "PE.Views.FileMenuPanels.Settings.txtSpellCheck": "Spell Checking", "PE.Views.FileMenuPanels.Settings.txtStopMacros": "Disable All", "PE.Views.FileMenuPanels.Settings.txtStopMacrosDesc": "Disable all macros without a notification", - "PE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark", - "PE.Views.FileMenuPanels.Settings.txtThemeLight": "Light", + "del_PE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark", + "del_PE.Views.FileMenuPanels.Settings.txtThemeLight": "Light", "PE.Views.FileMenuPanels.Settings.txtWarnMacros": "Show Notification", "PE.Views.FileMenuPanels.Settings.txtWarnMacrosDesc": "Disable all macros with a notification", "PE.Views.FileMenuPanels.Settings.txtWin": "as Windows", diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 5f1c42b0c..cb08bdcb4 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -10,6 +10,7 @@ // Bootstrap overwrite @import "../../../../common/main/resources/less/variables.less"; @import "../../../../common/main/resources/less/colors-table.less"; +@import "../../../../common/main/resources/less/colors-table-classic.less"; @import "../../../../common/main/resources/less/colors-table-dark.less"; // diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js index a78bb458c..ded4333a6 100644 --- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js +++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js @@ -1009,10 +1009,6 @@ define([ style : 'width: 160px;', editable : false, cls : 'input-group-nr', - data : [ - { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight }, - { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark } - ] }); $markup.find('.btn.primary').each(function(index, el){ @@ -1175,8 +1171,16 @@ define([ this.chPaste.setValue(Common.Utils.InternalSettings.get("sse-settings-paste-button")); - item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()}); - this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID); + var data = []; + for (var t in Common.UI.Themes.map()) { + data.push({value: t, displayValue: Common.UI.Themes.get(t).text}); + } + + if ( data.length ) { + this.cmbTheme.setData(data); + item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()}); + this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId()); + } }, applySettings: function() { diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index c8483be4b..32c9f8fdf 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -84,6 +84,9 @@ "Common.UI.Window.textInformation": "Information", "Common.UI.Window.textWarning": "Warning", "Common.UI.Window.yesButtonText": "Yes", + "Common.UI.Themes.txtThemeDark": "Dark", + "Common.UI.Themes.txtThemeLight": "Light", + "Common.UI.Themes.txtThemeClassicLight": "Classic Light", "Common.Utils.Metric.txtCm": "cm", "Common.Utils.Metric.txtPt": "pt", "Common.Views.About.txtAddress": "address: ", @@ -144,7 +147,7 @@ "Common.Views.Header.textAdvSettings": "Advanced settings", "Common.Views.Header.textBack": "Open file location", "Common.Views.Header.textCompactView": "Hide Toolbar", - "Common.Views.Header.textDarkTheme": "Dark theme", + "del_Common.Views.Header.textDarkTheme": "Dark theme", "Common.Views.Header.textHideLines": "Hide Rulers", "Common.Views.Header.textHideStatusBar": "Hide Status Bar", "Common.Views.Header.textRemoveFavorite": "Remove from Favorites", @@ -1938,8 +1941,8 @@ "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtRunMacrosDesc": "Enable all macros without a notification", "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtStopMacros": "Disable All", "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtStopMacrosDesc": "Disable all macros without a notification", - "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeDark": "Dark", - "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeLight": "Light", + "del_SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeDark": "Dark", + "del_SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeLight": "Light", "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWarnMacros": "Show Notification", "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWarnMacrosDesc": "Disable all macros with a notification", "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWin": "as Windows", diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less index fed2e5b4c..d0cd39be2 100644 --- a/apps/spreadsheeteditor/main/resources/less/app.less +++ b/apps/spreadsheeteditor/main/resources/less/app.less @@ -10,6 +10,7 @@ // Bootstrap overwrite @import "../../../../common/main/resources/less/variables.less"; @import "../../../../common/main/resources/less/colors-table.less"; +@import "../../../../common/main/resources/less/colors-table-classic.less"; @import "../../../../common/main/resources/less/colors-table-dark.less"; // From 7ad8ccd16a8c4f741a442a40be1baa143f49b527 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sun, 18 Apr 2021 17:33:13 +0300 Subject: [PATCH 4/8] [common] changed theme's color --- apps/common/main/resources/less/colors-table-classic.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index 53b8097b1..cc04526bd 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -39,7 +39,7 @@ --text-secondary: #a5a5a5; --text-tertiary: #a5a5a5; --text-link: #acbfff; - --text-inverse: #333; + --text-inverse: #fff; --text-toolbar-header: fade(#fff, 80%); --text-contrast-background: #fff; From 30148bbd6d01f89fed9b7927bab3df2cc961f0ec Mon Sep 17 00:00:00 2001 From: evgenykatyshev Date: Wed, 21 Apr 2021 16:04:51 +0300 Subject: [PATCH 5/8] Fix colors --- apps/common/main/resources/less/colors-table-classic.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index cc04526bd..40c7d2067 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -35,12 +35,12 @@ --border-error: #d9534f; --text-normal: #444; - --text-normal-pressed: #444; + --text-normal-pressed: #fff; --text-secondary: #a5a5a5; --text-tertiary: #a5a5a5; --text-link: #acbfff; --text-inverse: #fff; - --text-toolbar-header: fade(#fff, 80%); + --text-toolbar-header: #fff; --text-contrast-background: #fff; --icon-normal: #444; @@ -52,7 +52,7 @@ --icon-success: #5b9f27; // Canvas colors - --canvas-background: #666666; + --canvas-background: #e2e2e2; --canvas-content-background: #fff; --canvas-page-border: #555; From ba5c1ba4ab161b9aa21a897507e5d690ca33ef27 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 21 Apr 2021 17:09:22 +0300 Subject: [PATCH 6/8] [themes] fixed some colors for "classic" theme --- apps/common/main/resources/less/buttons.less | 4 ++-- apps/common/main/resources/less/dropdown-menu.less | 4 ++-- apps/common/main/resources/less/treeview.less | 2 ++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 6c8db3dad..8a3b7218f 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -358,8 +358,8 @@ &:active:not(.disabled), &.active:not(.disabled) { - color: @text-normal-ie; - color: @text-normal; + color: @text-normal-pressed-ie; + color: @text-normal-pressed; background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; } diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less index 7a1b1e15a..ece39d03f 100644 --- a/apps/common/main/resources/less/dropdown-menu.less +++ b/apps/common/main/resources/less/dropdown-menu.less @@ -46,8 +46,8 @@ } &:hover { - color: @text-normal-pressed-ie; - color: @text-normal-pressed; + color: @text-normal-ie; + color: @text-normal; background-color: @highlight-button-hover-ie; background-color: @highlight-button-hover; } diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less index cd7e0e002..6a14d2827 100644 --- a/apps/common/main/resources/less/treeview.less +++ b/apps/common/main/resources/less/treeview.less @@ -40,6 +40,8 @@ &.selected { background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; + color: @text-normal-pressed-ie; + color: @text-normal-pressed; } &.selected .empty { From 76107bbc34d5a6cfe66f6a9f6593a4ab7d4cfb2d Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 21 Apr 2021 23:50:50 +0300 Subject: [PATCH 7/8] [themes] fixed style for border's combobox --- apps/common/main/resources/less/colors-table-classic.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index 40c7d2067..c92beb202 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -106,7 +106,7 @@ //--button-xhuge-active-icon-offset-x: -37px; --modal-window-mask-opacity: 0.6; - --image-border-types-filter: invert(100%) brightness(4); + --image-border-types-filter: none; --image-border-types-filter-selected: invert(100%) brightness(4); --component-normal-icon-filter: invert(100%); From 7d8787b46f678ab18bb8b2ca232555d2559d7ef9 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 22 Apr 2021 12:47:36 +0300 Subject: [PATCH 8/8] [themes] added options to load single theme --- apps/common/main/lib/controller/Themes.js | 71 +++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index d7e8cfdf6..40adbf364 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -125,6 +125,75 @@ define([ return out_object; } + var create_colors_css = function (id, colors) { + if ( !!colors && !!id ) { + var _css_array = [':root .', id, '{']; + for (var c in colors) { + _css_array.push('--', c, ':', colors[c], ';'); + } + + _css_array.push('}'); + return _css_array.join(''); + } + } + + var write_theme_css = function (css) { + if ( !!css ) { + var style = document.createElement('style'); + style.type = 'text/css'; + style.innerHTML = css; + document.getElementsByTagName('head')[0].appendChild(style); + } + } + + var parse_themes_object = function (obj) { + if ( !!obj.themes && obj.themes instanceof Array ) { + obj.themes.forEach(function (item) { + if ( !!item.id ) { + themes_map[item.id] = {text: item.name, type: item.type}; + write_theme_css(create_colors_css(item.id, item.colors)); + } else + if ( typeof item == 'string' ) { + get_themes_config(item) + } + }); + } else + if ( obj.id ) { + themes_map[obj.id] = {text: obj.name, type: obj.type}; + write_theme_css( create_colors_css(obj.id, obj.colors) ); + } + } + + var get_themes_config = function (url) { + fetch(url, { + method: 'get', + headers: { + 'Accept': 'application/json', + }, + }).then(function(response) { + if (!response.ok) { + throw new Error('server error'); + } + return response.json(); + }).then(function(response) { + if ( response.then ) { + // return response.json(); + } else { + parse_themes_object(response); + + /* to break promises chain */ + throw new Error('loaded'); + } + }).catch(function(e) { + if ( e.message == 'loaded' ) { + } else console.log('fetch error: ' + e); + }); + } + + var on_document_ready = function (el) { + // get_themes_config('../../common/main/resources/themes/themes.json') + } + return { init: function (api) { var me = this; @@ -146,6 +215,8 @@ define([ obj.type = themes_map[theme_name]; obj.name = theme_name; api.asc_setSkin(obj); + + Common.NotificationCenter.on('document:ready', on_document_ready.bind(this)); }, available: function () {