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

Merge pull request #827 from ONLYOFFICE/feature/classic-light-theme

Browse source 
Feature/classic light theme
This commit is contained in:
maxkadushkin 2021-04-22 12:54:33 +03:00 committed by GitHub
parent d0e8931a29 7d8787b46f
commit 0caa949644
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 290 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,23 +7,22 @@ define([
], function () {
'use strict';
Common.UI.Themes = new (function() {
var sdk_themes_alias = {
'theme-light': 'flat',
'theme-dark': 'flatDark'
};
Common.UI.Themes = new (function(locale) {
!locale && (locale = {});
var id_default_theme = 'theme-classic-light';
var themes_map = {
'theme-light': 'light',
'theme-dark': 'dark'
}
sdk_themes_alias.contains = function (name) {
return !!this[name];
}
themes_map.contains = function (name) {
return !!this[name];
'theme-light': {
text: locale.txtThemeLight || 'Light',
type: 'light'
},
'theme-classic-light': {
text: locale.txtThemeClassicLight || 'Classic Light',
type: 'light'
},
'theme-dark': {
text: locale.txtThemeDark || 'Dark',
type: 'dark'
},
}
var name_colors = [
@ -126,34 +125,78 @@ define([
return out_object;
}
var refresh_sdk_colors = function () {
if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
var style = getComputedStyle(document.body);
if ( !!window.DE ) {
var color_background_normal = style.getPropertyValue('--background-normal');
this.api.asc_setSkin({
"RulerOutline": style.getPropertyValue('--border-toolbar'),
"RulerMarkersFillColor": color_background_normal,
"RulerMarkersFillColorOld": color_background_normal,
"RulerTableColor1": color_background_normal,
"RulerLight": style.getPropertyValue("--canvas-ruler-background"),
"RulerDark": style.getPropertyValue("--canvas-ruler-margins-background"),
"RulerTextColor": style.getPropertyValue("--canvas-ruler-mark"),
"RulerTableColor2": style.getPropertyValue("--canvas-ruler-handle-border"),
"RulerTableColor2Old": style.getPropertyValue("--canvas-ruler-handle-border-disabled"),
"RulerTabsColor": style.getPropertyValue("--canvas-high-contrast"),
"RulerTabsColorOld": style.getPropertyValue("--canvas-high-contrast-disabled"),
});
var create_colors_css = function (id, colors) {
if ( !!colors && !!id ) {
var _css_array = [':root .', id, '{'];
for (var c in colors) {
_css_array.push('--', c, ':', colors[c], ';');
}
_css_array.push('}');
return _css_array.join('');
}
}
return {
THEME_LIGHT_ID: 'theme-light',
THEME_DARK_ID: 'theme-dark',
var write_theme_css = function (css) {
if ( !!css ) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(style);
}
}
var parse_themes_object = function (obj) {
if ( !!obj.themes && obj.themes instanceof Array ) {
obj.themes.forEach(function (item) {
if ( !!item.id ) {
themes_map[item.id] = {text: item.name, type: item.type};
write_theme_css(create_colors_css(item.id, item.colors));
} else
if ( typeof item == 'string' ) {
get_themes_config(item)
}
});
} else
if ( obj.id ) {
themes_map[obj.id] = {text: obj.name, type: obj.type};
write_theme_css( create_colors_css(obj.id, obj.colors) );
}
}
var get_themes_config = function (url) {
fetch(url, {
method: 'get',
headers: {
'Accept': 'application/json',
},
}).then(function(response) {
if (!response.ok) {
throw new Error('server error');
}
return response.json();
}).then(function(response) {
if ( response.then ) {
// return response.json();
} else {
parse_themes_object(response);
/* to break promises chain */
throw new Error('loaded');
}
}).catch(function(e) {
if ( e.message == 'loaded' ) {
} else console.log('fetch error: ' + e);
});
}
var on_document_ready = function (el) {
// get_themes_config('../../common/main/resources/themes/themes.json')
}
return {
init: function (api) {
var me = this;
refresh_sdk_colors = refresh_sdk_colors.bind(this);
$(window).on('storage', function (e) {
if ( e.key == 'ui-theme' ) {
@ -162,7 +205,7 @@ define([
})
this.api = api;
var theme_name = Common.localStorage.getItem('ui-theme', 'theme-light');
var theme_name = Common.localStorage.getItem('ui-theme', id_default_theme);
if ( !$('body').hasClass(theme_name) ) {
$('body').addClass(theme_name);
@ -173,49 +216,58 @@ define([
obj.name = theme_name;
api.asc_setSkin(obj);
// app.eventbus.addListeners({
// 'FileMenu': {
// 'settings:apply': function (menu) {
// }
// }
// }, {id: 'Themes'});
// getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
Common.NotificationCenter.on('document:ready', on_document_ready.bind(this));
},
available: function () {
return !Common.Utils.isIE;
},
current: function () {
return Common.localStorage.getItem('ui-theme') || 'theme-light';
map: function () {
return themes_map
},
get: function (id) {
return themes_map[id]
},
currentThemeId: function () {
return Common.localStorage.getItem('ui-theme') || id_default_theme;
},
defaultThemeId: function () {
return id_default_theme;
},
defaultTheme: function () {
return themes_map[id_default_theme]
},
isDarkTheme: function () {
return themes_map[this.current()] == 'dark';
},
setTheme: function (name) {
if ( themes_map.contains(name) ) {
setTheme: function (id) {
if ( !!themes_map[id] ) {
var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
document.body.className = classname;
$('body').addClass(name);
$('body').addClass(id);
var obj = get_current_theme_colors(name_colors);
obj.type = themes_map[name];
obj.name = name;
obj.type = themes_map[id].type;
obj.name = id;
this.api.asc_setSkin(obj);
Common.localStorage.setItem('ui-theme', name);
Common.NotificationCenter.trigger('uitheme:changed', name);
Common.localStorage.setItem('ui-theme', id);
Common.NotificationCenter.trigger('uitheme:changed', id);
}
},
toggleTheme: function () {
this.setTheme(this.current() == 'theme-dark' ? 'theme-light' : 'theme-dark');
this.setTheme(this.current() == 'theme-dark' ? id_default_theme : 'theme-dark');
}
}
})();
})(Common.UI.Themes);
});

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

@ -782,7 +782,6 @@ define([
textAdvSettings: 'Advanced Settings',
tipViewSettings: 'View Settings',
textRemoveFavorite: 'Remove from Favorites',
textDarkTheme: 'Dark theme',
textAddFavorite: 'Mark as favorite'
}
}(), Common.Views.Header || {}))

6
apps/common/main/resources/less/buttons.less
View file

@ -77,6 +77,8 @@
&.active:not(.disabled){
.caret {
transform: rotate(45deg);
border-color: @icon-normal-pressed-ie;
border-color: @icon-normal-pressed;
}
}
@ -356,8 +358,8 @@
&:active:not(.disabled),
&.active:not(.disabled) {
color: @text-normal-ie;
color: @text-normal;
color: @text-normal-pressed-ie;
color: @text-normal-pressed;
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed;
}

121
apps/common/main/resources/less/colors-table-classic.less Normal file
View file

@ -0,0 +1,121 @@
:root {
.theme-classic-light {
--toolbar-header-document: #446995;
--toolbar-header-spreadsheet: #40865c;
--toolbar-header-presentation: #aa5252;
--background-normal: #fff;
--background-toolbar: #f1f1f1;
--background-toolbar-additional: #f1f1f1;
--background-primary-dialog-button: #7d858c;
--background-tab-underline: #444;
--background-notification-popover: #fcfed7;
--background-notification-badge: #ffd112;
--background-scrim: fade(#000, 20%);
--background-loader: fade(#000, 65%);
--highlight-button-hover: #d8dadc;
--highlight-button-pressed: #7d858c;
--highlight-button-pressed-hover: #7d858c;
--highlight-primary-dialog-button-hover: #666d73;
--highlight-header-button-hover: fade(#fff, 20%);
--highlight-header-button-pressed: fade(#000, 20%);
--highlight-toolbar-tab-underline: #444;
--highlight-text-select: #3494fb;
--border-toolbar: #cbcbcb;
--border-divider: #cbcbcb;
--border-regular-control: #cfcfcf;
--border-toolbar-button-hover: #d8dadc;
--border-preview-hover: #cfcfcf;
--border-preview-select: #848484;
--border-control-focus: #848484;
--border-color-shading: fade(#000, 20%);
--border-error: #d9534f;
--text-normal: #444;
--text-normal-pressed: #fff;
--text-secondary: #a5a5a5;
--text-tertiary: #a5a5a5;
--text-link: #acbfff;
--text-inverse: #fff;
--text-toolbar-header: #fff;
--text-contrast-background: #fff;
--icon-normal: #444;
--icon-normal-pressed: #fff;
--icon-inverse: #444;
--icon-toolbar-header: fade(#fff, 80%);
--icon-notification-badge: #000;
--icon-contrast-popover: #fff;
--icon-success: #5b9f27;
// Canvas colors
--canvas-background: #e2e2e2;
--canvas-content-background: #fff;
--canvas-page-border: #555;
--canvas-ruler-background: #555;
--canvas-ruler-margins-background: #444;
--canvas-ruler-mark: #b2b2b2;
--canvas-ruler-handle-border: #b2b2b2;
--canvas-ruler-handle-border-disabled: #717171;
--canvas-high-contrast: #fff;
--canvas-high-contrast-disabled: #888;
--canvas-cell-border: fade(#000, 10%);
--canvas-cell-title-border: #757575;
--canvas-cell-title-border-hover: #858585;
--canvas-cell-title-border-selected: #9e9e9e;
--canvas-cell-title-hover: #787878;
--canvas-cell-title-selected: #939393;
--canvas-dark-cell-title: #111;
--canvas-dark-cell-title-hover: #000;
--canvas-dark-cell-title-selected: #333;
--canvas-dark-cell-title-border: #282828;
--canvas-dark-cell-title-border-hover: #191919;
--canvas-dark-cell-title-border-selected: #474747;
--canvas-scroll-thumb: #404040;
--canvas-scroll-thumb-hover: #999;
--canvas-scroll-thumb-pressed: #adadad;
--canvas-scroll-thumb-border: #2a2a2a;
--canvas-scroll-thumb-border-hover: #2a2a2a;
--canvas-scroll-thumb-border-pressed: #2a2a2a;
--canvas-scroll-arrow: #999;
--canvas-scroll-arrow-hover: #404040;
--canvas-scroll-arrow-pressed: #404040;
--canvas-scroll-thumb-target: #999;
--canvas-scroll-thumb-target-hover: #404040;
--canvas-scroll-thumb-target-pressed: #404040;
// Others
--button-small-normal-icon-offset-x: 0;
--button-small-active-icon-offset-x: -20px;
--button-large-normal-icon-offset-x: 0;
--button-large-active-icon-offset-x: -31px;
--button-huge-normal-icon-offset-x: 0;
--button-huge-active-icon-offset-x: -40px;
--button-xhuge-normal-icon-offset-x: 0;
--button-xhuge-active-icon-offset-x: -28px;
//--button-xhuge-normal-icon-offset-x: -37px;
//--button-xhuge-active-icon-offset-x: -37px;
--modal-window-mask-opacity: 0.6;
--image-border-types-filter: none;
--image-border-types-filter-selected: invert(100%) brightness(4);
--component-normal-icon-filter: invert(100%);
--component-normal-icon-opacity: .8;
--component-hover-icon-opacity: .8;
--component-active-icon-opacity: .8;
--component-active-hover-icon-opacity: .8;
--component-disabled-opacity: .3;
--menu-icon-item-checked-offset-x: -20px;
}
}

4
apps/common/main/resources/less/dropdown-menu.less
View file

@ -46,8 +46,8 @@
}
&:hover {
color: @text-normal-pressed-ie;
color: @text-normal-pressed;
color: @text-normal-ie;
color: @text-normal;
background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover;
}

2
apps/common/main/resources/less/treeview.less
View file

@ -40,6 +40,8 @@
&.selected {
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed;
color: @text-normal-pressed-ie;
color: @text-normal-pressed;
}
&.selected .empty {

18
apps/documenteditor/main/app/view/FileMenuPanels.js
View file

@ -464,10 +464,6 @@ define([
style : 'width: 160px;',
editable : false,
cls : 'input-group-nr',
data : [
{ value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
{ value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
]
});
$markup.find('.btn.primary').each(function(index, el){
@ -600,8 +596,16 @@ define([
this.chPaste.setValue(Common.Utils.InternalSettings.get("de-settings-paste-button"));
item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()});
this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID);
var data = [];
for (var t in Common.UI.Themes.map()) {
data.push({value: t, displayValue: Common.UI.Themes.get(t).text});
}
if ( data.length ) {
this.cmbTheme.setData(data);
item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()});
this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId());
}
},
applySettings: function() {
@ -730,8 +734,6 @@ define([
strPasteButton: 'Show Paste Options button when content is pasted',
txtProofing: 'Proofing',
strTheme: 'Theme',
txtThemeLight: 'Light',
txtThemeDark: 'Dark',
txtAutoCorrect: 'AutoCorrect options...'
}, DE.Views.FileMenuPanels.Settings || {}));

9
apps/documenteditor/main/locale/en.json
View file

@ -192,6 +192,9 @@
"Common.UI.Window.textInformation": "Information",
"Common.UI.Window.textWarning": "Warning",
"Common.UI.Window.yesButtonText": "Yes",
"Common.UI.Themes.txtThemeDark": "Dark",
"Common.UI.Themes.txtThemeLight": "Light",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light",
"Common.Utils.Metric.txtCm": "cm",
"Common.Utils.Metric.txtPt": "pt",
"Common.Views.About.txtAddress": "address: ",
@ -260,7 +263,7 @@
"Common.Views.Header.textAdvSettings": "Advanced settings",
"Common.Views.Header.textBack": "Open file location",
"Common.Views.Header.textCompactView": "Hide Toolbar",
"Common.Views.Header.textDarkTheme": "Dark theme",
"del_Common.Views.Header.textDarkTheme": "Dark theme",
"Common.Views.Header.textHideLines": "Hide Rulers",
"Common.Views.Header.textHideStatusBar": "Hide Status Bar",
"Common.Views.Header.textRemoveFavorite": "Remove from Favorites",
@ -1720,8 +1723,8 @@
"DE.Views.FileMenuPanels.Settings.txtSpellCheck": "Spell Checking",
"DE.Views.FileMenuPanels.Settings.txtStopMacros": "Disable All",
"DE.Views.FileMenuPanels.Settings.txtStopMacrosDesc": "Disable all macros without a notification",
"DE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark",
"DE.Views.FileMenuPanels.Settings.txtThemeLight": "Light",
"del_DE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark",
"del_DE.Views.FileMenuPanels.Settings.txtThemeLight": "Light",
"DE.Views.FileMenuPanels.Settings.txtWarnMacros": "Show Notification",
"DE.Views.FileMenuPanels.Settings.txtWarnMacrosDesc": "Disable all macros with a notification",
"DE.Views.FileMenuPanels.Settings.txtWin": "as Windows",

1
apps/documenteditor/main/resources/less/app.less
View file

@ -10,6 +10,7 @@
// Bootstrap overwrite
@import "../../../../common/main/resources/less/variables.less";
@import "../../../../common/main/resources/less/colors-table.less";
@import "../../../../common/main/resources/less/colors-table-classic.less";
@import "../../../../common/main/resources/less/colors-table-dark.less";
//

16
apps/presentationeditor/main/app/view/FileMenuPanels.js
View file

@ -403,10 +403,6 @@ define([
style : 'width: 160px;',
editable : false,
cls : 'input-group-nr',
data : [
{ value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
{ value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
]
});
$markup.find('.btn.primary').each(function(index, el){
@ -529,8 +525,16 @@ define([
this.chPaste.setValue(Common.Utils.InternalSettings.get("pe-settings-paste-button"));
item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()});
this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID);
var data = [];
for (var t in Common.UI.Themes.map()) {
data.push({value: t, displayValue: Common.UI.Themes.get(t).text});
}
if ( data.length ) {
this.cmbTheme.setData(data);
item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()});
this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId());
}
},
applySettings: function() {

9
apps/presentationeditor/main/locale/en.json
View file

@ -83,6 +83,9 @@
"Common.UI.Window.textInformation": "Information",
"Common.UI.Window.textWarning": "Warning",
"Common.UI.Window.yesButtonText": "Yes",
"Common.UI.Themes.txtThemeDark": "Dark",
"Common.UI.Themes.txtThemeLight": "Light",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light",
"Common.Utils.Metric.txtCm": "cm",
"Common.Utils.Metric.txtPt": "pt",
"Common.Views.About.txtAddress": "address: ",
@ -148,7 +151,7 @@
"Common.Views.Header.textAdvSettings": "Advanced settings",
"Common.Views.Header.textBack": "Open file location",
"Common.Views.Header.textCompactView": "Hide Toolbar",
"Common.Views.Header.textDarkTheme": "Dark theme",
"del_Common.Views.Header.textDarkTheme": "Dark theme",
"Common.Views.Header.textHideLines": "Hide Rulers",
"Common.Views.Header.textHideStatusBar": "Hide Status Bar",
"Common.Views.Header.textRemoveFavorite": "Remove from Favorites",
@ -1352,8 +1355,8 @@
"PE.Views.FileMenuPanels.Settings.txtSpellCheck": "Spell Checking",
"PE.Views.FileMenuPanels.Settings.txtStopMacros": "Disable All",
"PE.Views.FileMenuPanels.Settings.txtStopMacrosDesc": "Disable all macros without a notification",
"PE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark",
"PE.Views.FileMenuPanels.Settings.txtThemeLight": "Light",
"del_PE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark",
"del_PE.Views.FileMenuPanels.Settings.txtThemeLight": "Light",
"PE.Views.FileMenuPanels.Settings.txtWarnMacros": "Show Notification",
"PE.Views.FileMenuPanels.Settings.txtWarnMacrosDesc": "Disable all macros with a notification",
"PE.Views.FileMenuPanels.Settings.txtWin": "as Windows",

1
apps/presentationeditor/main/resources/less/app.less
View file

@ -10,6 +10,7 @@
// Bootstrap overwrite
@import "../../../../common/main/resources/less/variables.less";
@import "../../../../common/main/resources/less/colors-table.less";
@import "../../../../common/main/resources/less/colors-table-classic.less";
@import "../../../../common/main/resources/less/colors-table-dark.less";
//

16
apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
View file

@ -1009,10 +1009,6 @@ define([
style : 'width: 160px;',
editable : false,
cls : 'input-group-nr',
data : [
{ value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
{ value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
]
});
$markup.find('.btn.primary').each(function(index, el){
@ -1175,8 +1171,16 @@ define([
this.chPaste.setValue(Common.Utils.InternalSettings.get("sse-settings-paste-button"));
item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()});
this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID);
var data = [];
for (var t in Common.UI.Themes.map()) {
data.push({value: t, displayValue: Common.UI.Themes.get(t).text});
}
if ( data.length ) {
this.cmbTheme.setData(data);
item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()});
this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId());
}
},
applySettings: function() {

9
apps/spreadsheeteditor/main/locale/en.json
View file

@ -84,6 +84,9 @@
"Common.UI.Window.textInformation": "Information",
"Common.UI.Window.textWarning": "Warning",
"Common.UI.Window.yesButtonText": "Yes",
"Common.UI.Themes.txtThemeDark": "Dark",
"Common.UI.Themes.txtThemeLight": "Light",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light",
"Common.Utils.Metric.txtCm": "cm",
"Common.Utils.Metric.txtPt": "pt",
"Common.Views.About.txtAddress": "address: ",
@ -144,7 +147,7 @@
"Common.Views.Header.textAdvSettings": "Advanced settings",
"Common.Views.Header.textBack": "Open file location",
"Common.Views.Header.textCompactView": "Hide Toolbar",
"Common.Views.Header.textDarkTheme": "Dark theme",
"del_Common.Views.Header.textDarkTheme": "Dark theme",
"Common.Views.Header.textHideLines": "Hide Rulers",
"Common.Views.Header.textHideStatusBar": "Hide Status Bar",
"Common.Views.Header.textRemoveFavorite": "Remove from Favorites",
@ -1938,8 +1941,8 @@
"SSE.Views.FileMenuPanels.MainSettingsGeneral.txtRunMacrosDesc": "Enable all macros without a notification",
"SSE.Views.FileMenuPanels.MainSettingsGeneral.txtStopMacros": "Disable All",
"SSE.Views.FileMenuPanels.MainSettingsGeneral.txtStopMacrosDesc": "Disable all macros without a notification",
"SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeDark": "Dark",
"SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeLight": "Light",
"del_SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeDark": "Dark",
"del_SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeLight": "Light",
"SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWarnMacros": "Show Notification",
"SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWarnMacrosDesc": "Disable all macros with a notification",
"SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWin": "as Windows",

1
apps/spreadsheeteditor/main/resources/less/app.less
View file

@ -10,6 +10,7 @@
// Bootstrap overwrite
@import "../../../../common/main/resources/less/variables.less";
@import "../../../../common/main/resources/less/colors-table.less";
@import "../../../../common/main/resources/less/colors-table-classic.less";
@import "../../../../common/main/resources/less/colors-table-dark.less";
//