[DE] Add handler to dark mode button in view tab, change icons
This commit is contained in:
parent
b68e5b68f5
commit
980cfb73f9
|
@ -59,6 +59,7 @@ define([
|
||||||
onLaunch: function () {
|
onLaunch: function () {
|
||||||
this._state = {};
|
this._state = {};
|
||||||
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
|
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
|
||||||
|
Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
|
||||||
},
|
},
|
||||||
|
|
||||||
setApi: function (api) {
|
setApi: function (api) {
|
||||||
|
@ -81,7 +82,8 @@ define([
|
||||||
'zoom:value': _.bind(this.onChangeZoomValue, this),
|
'zoom:value': _.bind(this.onChangeZoomValue, this),
|
||||||
'zoom:topage': _.bind(this.onBtnZoomTo, this, 'topage'),
|
'zoom:topage': _.bind(this.onBtnZoomTo, this, 'topage'),
|
||||||
'zoom:towidth': _.bind(this.onBtnZoomTo, this, 'towidth'),
|
'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': {
|
'Toolbar': {
|
||||||
'view:compact': _.bind(function (toolbar, state) {
|
'view:compact': _.bind(function (toolbar, state) {
|
||||||
|
@ -188,5 +190,13 @@ define([
|
||||||
Common.NotificationCenter.trigger('edit:complete', this.view);
|
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 || {}));
|
}, DE.Controllers.ViewTab || {}));
|
||||||
});
|
});
|
|
@ -51,27 +51,30 @@ define([
|
||||||
|
|
||||||
setEvents() {
|
setEvents() {
|
||||||
var me = this;
|
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.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.fireEvent('zoom:value', [record.value]);
|
||||||
});
|
});
|
||||||
me.btnFitToPage && me.btnFitToPage.on('click', function () {
|
me.btnFitToPage.on('click', function () {
|
||||||
me.fireEvent('zoom:topage');
|
me.fireEvent('zoom:topage');
|
||||||
});
|
});
|
||||||
me.btnFitToWidth && me.btnFitToWidth.on('click', function () {
|
me.btnFitToWidth.on('click', function () {
|
||||||
me.fireEvent('zoom:towidth');
|
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.fireEvent('toolbar:setcompact', [me.chToolbar, state !== 'checked']);
|
||||||
}, me));
|
}, 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.fireEvent('statusbar:hide', [me.chStatusbar, state !== 'checked']);
|
||||||
}, me));
|
}, 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.fireEvent('rulers:change', [me.chRulers, state === 'checked']);
|
||||||
}, me));
|
}, me));
|
||||||
|
me.btnDarkDocument.on('click', _.bind(function () {
|
||||||
|
me.fireEvent('darkmode:change');
|
||||||
|
}, me));
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function (options) {
|
initialize: function (options) {
|
||||||
|
@ -87,7 +90,7 @@ define([
|
||||||
this.btnNavigation = new Common.UI.Button({
|
this.btnNavigation = new Common.UI.Button({
|
||||||
parentEl: $host.find('#slot-btn-navigation'),
|
parentEl: $host.find('#slot-btn-navigation'),
|
||||||
cls: 'btn-toolbar x-huge icon-top',
|
cls: 'btn-toolbar x-huge icon-top',
|
||||||
iconCls: 'toolbar__icon btn-navigation',
|
iconCls: 'toolbar__icon btn-menu-navigation',
|
||||||
caption: this.textNavigation,
|
caption: this.textNavigation,
|
||||||
enableToggle: true,
|
enableToggle: true,
|
||||||
dataHint: '1',
|
dataHint: '1',
|
||||||
|
@ -149,9 +152,8 @@ define([
|
||||||
this.btnInterfaceTheme = new Common.UI.Button({
|
this.btnInterfaceTheme = new Common.UI.Button({
|
||||||
parentEl: $host.find('#slot-btn-interface-theme'),
|
parentEl: $host.find('#slot-btn-interface-theme'),
|
||||||
cls: 'btn-toolbar x-huge icon-top',
|
cls: 'btn-toolbar x-huge icon-top',
|
||||||
iconCls: 'toolbar__icon',
|
iconCls: 'toolbar__icon day',
|
||||||
caption: this.textInterfaceTheme,
|
caption: this.textInterfaceTheme,
|
||||||
split: true,
|
|
||||||
menu: true,
|
menu: true,
|
||||||
dataHint: '1',
|
dataHint: '1',
|
||||||
dataHintDirection: 'bottom',
|
dataHintDirection: 'bottom',
|
||||||
|
@ -164,6 +166,7 @@ define([
|
||||||
cls: 'btn-toolbar x-huge icon-top',
|
cls: 'btn-toolbar x-huge icon-top',
|
||||||
iconCls: 'toolbar__icon night',
|
iconCls: 'toolbar__icon night',
|
||||||
caption: this.textDarkDocument,
|
caption: this.textDarkDocument,
|
||||||
|
enableToggle: true,
|
||||||
dataHint: '1',
|
dataHint: '1',
|
||||||
dataHintDirection: 'bottom',
|
dataHintDirection: 'bottom',
|
||||||
dataHintOffset: 'small'
|
dataHintOffset: 'small'
|
||||||
|
|
Loading…
Reference in a new issue