Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] Add handler to dark mode button in view tab, change icons

Browse source
This commit is contained in:
JuliaSvinareva 2021-12-12 19:33:44 +03:00
parent b68e5b68f5
commit 980cfb73f9
2 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/documenteditor/main/app/controller/ViewTab.js
View file

@ -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 || {}));
});

23
apps/documenteditor/main/app/view/ViewTab.js
View file

@ -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'