[DE] added "Dark mode" option
This commit is contained in:
Maxim Kadushkin
parent
a041dddc7b
commit
a791ecdb85
|
|
@ -290,6 +290,20 @@ define([
|
|||
return themes_map[this.currentThemeId()].type == 'dark';
|
||||
},
|
||||
|
||||
isContentThemeDark: function () {
|
||||
return Common.localStorage.getItem("content-theme") == 'dark';
|
||||
},
|
||||
|
||||
toggleContentTheme: function () {
|
||||
var is_current_dark = this.isContentThemeDark();
|
||||
is_current_dark ? Common.localStorage.setItem('content-theme', 'light') : Common.localStorage.setItem('content-theme', 'dark');
|
||||
|
||||
if ( this.api.asc_setContentDarkMode )
|
||||
this.api.asc_setContentDarkMode(!is_current_dark);
|
||||
|
||||
Common.NotificationCenter.trigger('contenttheme:dark', !is_current_dark);
|
||||
},
|
||||
|
||||
setTheme: function (obj, force) {
|
||||
var id = get_ui_theme_name(obj);
|
||||
if ( (this.currentThemeId() != id || force) && !!themes_map[id] ) {
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ define([
|
|||
'</section>'+
|
||||
'</div>' +
|
||||
'<div class="hedset">' +
|
||||
'<div class="btn-slot" id="slot-btn-mode"></div>' +
|
||||
'<div class="btn-slot" id="slot-btn-back"></div>' +
|
||||
'<div class="btn-slot" id="slot-btn-favorite"></div>' +
|
||||
'<div class="btn-slot" id="slot-btn-options"></div>' +
|
||||
|
|
@ -350,6 +351,10 @@ define([
|
|||
|
||||
if ( me.btnOptions )
|
||||
me.btnOptions.updateHint(me.tipViewSettings);
|
||||
|
||||
if ( me.btnContentMode ) {
|
||||
me.btnContentMode.on('click', function (e) { Common.UI.Themes.toggleContentTheme(); });
|
||||
}
|
||||
}
|
||||
|
||||
function onDocNameKeyDown(e) {
|
||||
|
|
@ -386,6 +391,12 @@ define([
|
|||
}
|
||||
}
|
||||
|
||||
function onContentThemeChangedToDark(isdark) {
|
||||
if ( this.btnContentMode ) {
|
||||
this.btnContentMode.changeIcon(!isdark ? {curr: 'btn-mode-dark', next: 'btn-mode-light'} : {curr: 'btn-mode-light', next: 'btn-mode-dark'});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
options: {
|
||||
branding: {},
|
||||
|
|
@ -444,6 +455,7 @@ define([
|
|||
'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);}
|
||||
});
|
||||
Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights);
|
||||
Common.NotificationCenter.on('contenttheme:dark', onContentThemeChangedToDark.bind(this));
|
||||
},
|
||||
|
||||
render: function (el, role) {
|
||||
|
|
@ -536,6 +548,11 @@ define([
|
|||
|
||||
$panelUsers.hide();
|
||||
|
||||
if ( !!DE ) {
|
||||
var mode_cls = Common.UI.Themes.isContentThemeDark() ? 'btn-mode-dark' : 'btn-mode-light';
|
||||
me.btnContentMode = createTitleButton('toolbar__icon icon--inverse ' + mode_cls, $html.findById('#slot-btn-mode'));
|
||||
}
|
||||
|
||||
return $html;
|
||||
} else
|
||||
if ( role == 'title' ) {
|
||||
|
|
|
|||
|
|
@ -153,6 +153,8 @@ define([
|
|||
|
||||
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
|
||||
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
|
||||
Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
|
||||
Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
|
||||
},
|
||||
|
||||
onAppShowed: function (config) {
|
||||
|
|
@ -248,6 +250,14 @@ define([
|
|||
if (!config.isEdit)
|
||||
mnuitemHideRulers.hide();
|
||||
|
||||
me.header.menuItemsDarkMode = new Common.UI.MenuItem({
|
||||
caption: 'Dark mode',
|
||||
checkable: true,
|
||||
checked: Common.UI.Themes.isContentThemeDark(),
|
||||
disabled: !Common.UI.Themes.isDarkTheme(),
|
||||
value: 'mode:dark'
|
||||
});
|
||||
|
||||
me.header.mnuitemFitPage = new Common.UI.MenuItem({
|
||||
caption: me.textFitPage,
|
||||
checkable: true,
|
||||
|
|
@ -286,6 +296,8 @@ define([
|
|||
mnuitemHideStatusBar,
|
||||
mnuitemHideRulers,
|
||||
{caption:'--'},
|
||||
me.header.menuItemsDarkMode,
|
||||
{caption:'--'},
|
||||
me.header.mnuitemFitPage,
|
||||
me.header.mnuitemFitWidth,
|
||||
me.header.mnuZoom,
|
||||
|
|
@ -314,6 +326,7 @@ define([
|
|||
})).on('click', _on_btn_zoom.bind(me, 'up'));
|
||||
|
||||
me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
|
||||
me.header.btnContentMode.setDisabled(!Common.UI.Themes.isDarkTheme());
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -354,6 +367,25 @@ define([
|
|||
this.api.Resize();
|
||||
},
|
||||
|
||||
onThemeChanged: function (id) {
|
||||
var menuItem = this.header.menuItemsDarkMode;
|
||||
if ( !Common.UI.Themes.isDarkTheme() ) {
|
||||
Common.Utils.InternalSettings.set("de-mode-dark", menuItem.isChecked());
|
||||
|
||||
menuItem.setChecked(false);
|
||||
menuItem.setDisabled(true);
|
||||
} else {
|
||||
menuItem.setChecked(Common.Utils.InternalSettings.get("de-mode-dark"));
|
||||
menuItem.setDisabled(false);
|
||||
}
|
||||
|
||||
this.header.btnContentMode.setDisabled(!Common.UI.Themes.isDarkTheme());
|
||||
},
|
||||
|
||||
onContentThemeChangedToDark: function (isdark) {
|
||||
this.header.menuItemsDarkMode.setChecked(isdark, true);
|
||||
},
|
||||
|
||||
onWindowResize: function(e) {
|
||||
this.onLayoutChanged('window');
|
||||
Common.NotificationCenter.trigger('window:resize');
|
||||
|
|
@ -400,6 +432,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', me.header);
|
||||
break;
|
||||
case 'advanced': me.header.fireEvent('file:settings', me.header); break;
|
||||
case 'mode:dark': Common.UI.Themes.toggleContentTheme(); break;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue