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

Merge branch 'feature/document-dark-mode' into develop

Browse source
This commit is contained in:
Maxim Kadushkin 2021-07-20 12:36:30 +03:00
parent 0c3a28b536 a791ecdb85
commit 42c8594563
3 changed files with 64 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/main/lib/controller/Themes.js
View file

@ -297,6 +297,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] ) {

17
apps/common/main/lib/view/Header.js
View file

@ -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: {},
@ -453,6 +464,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) {
@ -548,6 +560,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' ) {

33
apps/documenteditor/main/app/controller/Viewport.js
View file

@ -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;
}
},