diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 1341a07438..d8b2a398c0 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -410,6 +410,7 @@ define([ Common.NotificationCenter.trigger('contenttheme:dark', this.isContentThemeDark()); } else { this.api.asc_setContentDarkMode(false); + Common.NotificationCenter.trigger('contenttheme:dark', false); } const colors_obj = get_current_theme_colors(); @@ -570,7 +571,7 @@ define([ if ( set_dark != window.uitheme.iscontentdark || force ) { window.uitheme.iscontentdark = set_dark; - if ( this.isDarkTheme() ) + if ( this.isDarkTheme() && this.api.asc_setContentDarkMode ) this.api.asc_setContentDarkMode(set_dark); if ( !(keep === false) && Common.localStorage.getItem('content-theme') != mode ) @@ -584,7 +585,7 @@ define([ window.uitheme.iscontentdark = !window.uitheme.iscontentdark; Common.localStorage.setItem('content-theme', window.uitheme.iscontentdark ? 'dark' : 'light'); - if ( this.isDarkTheme() ) + if ( this.isDarkTheme() && this.api.asc_setContentDarkMode ) this.api.asc_setContentDarkMode(window.uitheme.iscontentdark); Common.NotificationCenter.trigger('contenttheme:dark', window.uitheme.iscontentdark); diff --git a/apps/common/main/resources/img/toolbar/icons.svg b/apps/common/main/resources/img/toolbar/icons.svg index 62825da5b9..0f81bf1b5c 100644 --- a/apps/common/main/resources/img/toolbar/icons.svg +++ b/apps/common/main/resources/img/toolbar/icons.svg @@ -1177,6 +1177,10 @@ + + + + diff --git a/apps/spreadsheeteditor/main/app/controller/ViewTab.js b/apps/spreadsheeteditor/main/app/controller/ViewTab.js index 311ebb29da..86dbc2abf0 100644 --- a/apps/spreadsheeteditor/main/app/controller/ViewTab.js +++ b/apps/spreadsheeteditor/main/app/controller/ViewTab.js @@ -50,6 +50,7 @@ define([ onLaunch: function () { this._state = {}; Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this)); + Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this)); Common.NotificationCenter.on('tabstyle:changed', this.onTabStyleChange.bind(this)); }, @@ -99,7 +100,8 @@ define([ 'viewtab:viewmode': this.onPreviewMode, 'macros:click': this.onClickMacros, 'macros:record': _.bind(this.onClickMacrosRec, this), - 'macros:pause': _.bind(this.onClickMacrosPause, this) + 'macros:pause': _.bind(this.onClickMacrosPause, this), + 'darkmode:change': _.bind(this.onChangeDarkMode, this) }, 'Statusbar': { 'sheet:changed': this.onApiSheetChanged.bind(this), @@ -296,9 +298,27 @@ define([ this.view.btnInterfaceTheme.menu.clearAll(true); menu_item.setChecked(true, true); } + Common.Utils.lockControls(Common.enumLock.inLightTheme, !Common.UI.Themes.isDarkTheme(), {array: [this.view.btnDarkDocument]}); } }, + onChangeDarkMode: function (isdarkmode) { + // same 500ms debounce as documenteditor's ViewTab.js already had + // TODO: look if is not a better solution + if (!this._darkModeTimer) { + var me = this; + me._darkModeTimer = setTimeout(function() { + me._darkModeTimer = undefined; + }, 500); + Common.UI.Themes.setContentTheme(isdarkmode ? 'dark' : 'light'); + } else + this.onContentThemeChangedToDark(Common.UI.Themes.isContentThemeDark()); + }, + + onContentThemeChangedToDark: function (isdark) { + this.view && this.view.btnDarkDocument.toggle(isdark, true); + }, + onTabStyleChange: function () { if (this.view && this.view.menuTabStyle) { _.each(this.view.menuTabStyle.items, function(item){ diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index bcddadf432..c73105543f 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -108,6 +108,7 @@ define([ userProtected: 'cell-user-protected', pageBreakLock: 'page-break-lock', externalChartProtected: 'external-chart-protected', + inLightTheme: 'light-theme', fileMenuOpened: 'file-menu-opened', cantMergeShape: 'merge-shape-lock', cantSave: 'cant-save', diff --git a/apps/spreadsheeteditor/main/app/view/ViewTab.js b/apps/spreadsheeteditor/main/app/view/ViewTab.js index e73cb8b6fa..f3dbb55574 100644 --- a/apps/spreadsheeteditor/main/app/view/ViewTab.js +++ b/apps/spreadsheeteditor/main/app/view/ViewTab.js @@ -66,6 +66,7 @@ define([ '
' + '
' + '' + + '' + '
' + '
' + '
' + @@ -171,6 +172,9 @@ define([ me.chRightMenu.on('change', _.bind(function (checkbox, state) { me.fireEvent('rightmenu:hide', [me.chRightMenu, state === 'checked']); }, me)); + me.btnDarkDocument.on('click', _.bind(function (e) { + me.fireEvent('darkmode:change', [e.pressed]); + }, me)); me.btnMacros && me.btnMacros.on('click', function () { me.fireEvent('macros:click'); }); @@ -384,6 +388,18 @@ define([ }); this.lockedControls.push(this.btnInterfaceTheme); + this.btnDarkDocument = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-dark-mode', + lock: [_set.inLightTheme], + caption: this.textDarkDocument, + enableToggle: true, + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: 'small' + }); + this.lockedControls.push(this.btnDarkDocument); + this.chFormula = new Common.UI.CheckBox({ labelText: this.textFormula, value: !Common.localStorage.getBool('sse-hidden-formula'), @@ -454,6 +470,7 @@ define([ this.cmbZoom.setValue(100); $host.find('#slot-lbl-zoom').text(this.textZoom); this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme')); + this.btnDarkDocument.render($host.find('#slot-btn-dark-document')); this.chFormula.render($host.find('#slot-chk-formula')); this.chStatusbar.render($host.find('#slot-chk-statusbar')); this.chToolbar.render($host.find('#slot-chk-toolbar')); @@ -490,6 +507,7 @@ define([ } me.btnMacros && me.btnMacros.updateHint(me.tipMacros); me.btnInterfaceTheme.updateHint(me.tipInterfaceTheme); + me.btnDarkDocument.updateHint(me.tipDarkDocument); me.btnRecMacro && me.btnRecMacro.updateHint(me.tipRecMacro); me.btnPauseMacro && me.btnPauseMacro.updateHint(me.tipPauseMacro); @@ -618,7 +636,13 @@ define([ me.btnInterfaceTheme.menu.on('item:click', _.bind(function (menu, item) { var value = item.value; Common.UI.Themes.setTheme(value); + Common.Utils.lockControls(Common.enumLock.inLightTheme, !Common.UI.Themes.isDarkTheme(), {array: [me.btnDarkDocument]}); }, me)); + + setTimeout(function () { + me.btnDarkDocument.toggle(Common.UI.Themes.isContentThemeDark(), true); + Common.Utils.lockControls(Common.enumLock.inLightTheme, !Common.UI.Themes.isDarkTheme(), {array: [me.btnDarkDocument]}); + }, 0); } } @@ -736,6 +760,8 @@ define([ textInterfaceTheme: 'Interface theme', textShowFrozenPanesShadow: 'Show frozen panes shadow', tipInterfaceTheme: 'Interface theme', + textDarkDocument: 'Dark document', + tipDarkDocument: 'Dark document', textLeftMenu: 'Left panel', textRightMenu: 'Right panel', txtViewNormal: 'Normal', diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/icons.svg b/apps/spreadsheeteditor/main/resources/img/toolbar/icons.svg index aa0c3e139d..67e880a550 100644 --- a/apps/spreadsheeteditor/main/resources/img/toolbar/icons.svg +++ b/apps/spreadsheeteditor/main/resources/img/toolbar/icons.svg @@ -832,6 +832,10 @@ + + + + diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/v2/2.5x/big/btn-dark-mode.svg b/apps/spreadsheeteditor/main/resources/img/toolbar/v2/2.5x/big/btn-dark-mode.svg new file mode 100644 index 0000000000..885cbad213 --- /dev/null +++ b/apps/spreadsheeteditor/main/resources/img/toolbar/v2/2.5x/big/btn-dark-mode.svg @@ -0,0 +1,5 @@ + + + + +