From 980cfb73f92f1cc7881cb7139e8cd6dfe846170f Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Sun, 12 Dec 2021 19:33:44 +0300
Subject: [PATCH] [DE] Add handler to dark mode button in view tab, change
 icons

---
 .../main/app/controller/ViewTab.js            | 12 +++++++++-
 apps/documenteditor/main/app/view/ViewTab.js  | 23 +++++++++++--------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/apps/documenteditor/main/app/controller/ViewTab.js b/apps/documenteditor/main/app/controller/ViewTab.js
index ec69b21ac..65e68a115 100644
--- a/apps/documenteditor/main/app/controller/ViewTab.js
+++ b/apps/documenteditor/main/app/controller/ViewTab.js
@@ -59,6 +59,7 @@ define([
         onLaunch: function () {
             this._state = {};
             Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
         },
 
         setApi: function (api) {
@@ -81,7 +82,8 @@ define([
                     'zoom:value': _.bind(this.onChangeZoomValue, this),
                     'zoom:topage': _.bind(this.onBtnZoomTo, this, 'topage'),
                     'zoom:towidth': _.bind(this.onBtnZoomTo, this, 'towidth'),
-                    'rulers:change': _.bind(this.onChangeRulers, this)
+                    'rulers:change': _.bind(this.onChangeRulers, this),
+                    'darkmode:change': _.bind(this.onChangeDarkMode, this)
                 },
                 'Toolbar': {
                     'view:compact': _.bind(function (toolbar, state) {
@@ -188,5 +190,13 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.view);
         },
 
+        onChangeDarkMode: function () {
+            Common.UI.Themes.toggleContentTheme();
+        },
+
+        onContentThemeChangedToDark: function (isdark) {
+            this.view && this.view.btnDarkDocument.toggle(isdark, true);
+        },
+
     }, DE.Controllers.ViewTab || {}));
 });
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/ViewTab.js b/apps/documenteditor/main/app/view/ViewTab.js
index 082188553..f311f00ae 100644
--- a/apps/documenteditor/main/app/view/ViewTab.js
+++ b/apps/documenteditor/main/app/view/ViewTab.js
@@ -51,27 +51,30 @@ define([
 
             setEvents() {
                 var me = this;
-                me.btnNavigation && me.btnNavigation.on('click', function (btn, e) {
+                me.btnNavigation.on('click', function (btn, e) {
                     me.fireEvent('viewtab:navigation', [btn.pressed]);
                 });
-                me.cmbZoom && me.cmbZoom.on('selected', function (combo, record) {
+                me.cmbZoom.on('selected', function (combo, record) {
                     me.fireEvent('zoom:value', [record.value]);
                 });
-                me.btnFitToPage && me.btnFitToPage.on('click', function () {
+                me.btnFitToPage.on('click', function () {
                     me.fireEvent('zoom:topage');
                 });
-                me.btnFitToWidth && me.btnFitToWidth.on('click', function () {
+                me.btnFitToWidth.on('click', function () {
                     me.fireEvent('zoom:towidth');
                 });
-                me.chToolbar && me.chToolbar.on('change', _.bind(function(checkbox, state) {
+                me.chToolbar.on('change', _.bind(function(checkbox, state) {
                     me.fireEvent('toolbar:setcompact', [me.chToolbar, state !== 'checked']);
                 }, me));
-                me.chStatusbar && me.chStatusbar.on('change', _.bind(function (checkbox, state) {
+                me.chStatusbar.on('change', _.bind(function (checkbox, state) {
                     me.fireEvent('statusbar:hide', [me.chStatusbar, state !== 'checked']);
                 }, me));
-                me.chRulers && me.chRulers.on('change', _.bind(function (checkbox, state) {
+                me.chRulers.on('change', _.bind(function (checkbox, state) {
                     me.fireEvent('rulers:change', [me.chRulers, state === 'checked']);
                 }, me));
+                me.btnDarkDocument.on('click', _.bind(function () {
+                    me.fireEvent('darkmode:change');
+                }, me));
             },
 
             initialize: function (options) {
@@ -87,7 +90,7 @@ define([
                 this.btnNavigation = new Common.UI.Button({
                     parentEl: $host.find('#slot-btn-navigation'),
                     cls: 'btn-toolbar x-huge icon-top',
-                    iconCls: 'toolbar__icon btn-navigation',
+                    iconCls: 'toolbar__icon btn-menu-navigation',
                     caption: this.textNavigation,
                     enableToggle: true,
                     dataHint: '1',
@@ -149,9 +152,8 @@ define([
                 this.btnInterfaceTheme = new Common.UI.Button({
                     parentEl: $host.find('#slot-btn-interface-theme'),
                     cls: 'btn-toolbar x-huge icon-top',
-                    iconCls: 'toolbar__icon',
+                    iconCls: 'toolbar__icon day',
                     caption: this.textInterfaceTheme,
-                    split: true,
                     menu: true,
                     dataHint: '1',
                     dataHintDirection: 'bottom',
@@ -164,6 +166,7 @@ define([
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon night',
                     caption: this.textDarkDocument,
+                    enableToggle: true,
                     dataHint: '1',
                     dataHintDirection: 'bottom',
                     dataHintOffset: 'small'