[themes] load external themes
This commit is contained in:
Maxim Kadushkin
parent
88c62da5f6
commit
d484103500
|
|
@ -12,21 +12,34 @@ define([
|
|||
var themes_map = {
|
||||
'theme-light': {
|
||||
text: locale.txtThemeLight || 'Light',
|
||||
type: 'light'
|
||||
type: 'light',
|
||||
source: 'static',
|
||||
},
|
||||
'theme-classic-light': {
|
||||
text: locale.txtThemeClassicLight || 'Classic Light',
|
||||
type: 'light'
|
||||
type: 'light',
|
||||
source: 'static',
|
||||
},
|
||||
'theme-dark': {
|
||||
text: locale.txtThemeDark || 'Dark',
|
||||
type: 'dark'
|
||||
type: 'dark',
|
||||
source: 'static',
|
||||
},
|
||||
}
|
||||
|
||||
if ( !!window.currentLoaderTheme ) {
|
||||
themes_map[currentLoaderTheme.id] = {};
|
||||
window.currentLoaderTheme = undefined;
|
||||
}
|
||||
|
||||
var id_default_light_theme = 'theme-classic-light',
|
||||
id_default_dark_theme = 'theme-dark';
|
||||
|
||||
var name_colors = [
|
||||
"toolbar-header-document",
|
||||
"toolbar-header-spreadsheet",
|
||||
"toolbar-header-presentation",
|
||||
|
||||
"background-normal",
|
||||
"background-toolbar",
|
||||
"background-toolbar-additional",
|
||||
|
|
@ -169,33 +182,40 @@ define([
|
|||
}
|
||||
|
||||
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');
|
||||
Common.Utils.loadConfig(url,
|
||||
function ( obj ) {
|
||||
if ( obj != 'error' ) {
|
||||
parse_themes_object(obj);
|
||||
}
|
||||
}
|
||||
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);
|
||||
});
|
||||
);
|
||||
// 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')
|
||||
get_themes_config('../../common/main/resources/themes/themes.json');
|
||||
}
|
||||
|
||||
var get_ui_theme_name = function (objtheme) {
|
||||
|
|
@ -290,6 +310,10 @@ define([
|
|||
type: obj.type,
|
||||
};
|
||||
|
||||
if ( themes_map[id].source != 'static' ) {
|
||||
theme_obj.colors = obj;
|
||||
}
|
||||
|
||||
Common.localStorage.setItem('ui-theme', JSON.stringify(theme_obj));
|
||||
}
|
||||
|
||||
|
|
|
|||
28
apps/common/main/lib/util/themeinit.js
Normal file
28
apps/common/main/lib/util/themeinit.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
|
||||
+function init_themes() {
|
||||
var objtheme = localStorage.getItem("ui-theme");
|
||||
if ( typeof(objtheme) == 'string' &&
|
||||
objtheme.startsWith("{") && objtheme.endsWith("}") )
|
||||
{
|
||||
objtheme = JSON.parse(objtheme);
|
||||
}
|
||||
|
||||
var ui_theme_name = objtheme && typeof(objtheme) == 'object' ? objtheme.id :
|
||||
typeof(objtheme) == 'string' ? objtheme : localStorage.getItem("ui-theme-id");
|
||||
|
||||
if ( !!ui_theme_name ) {
|
||||
if ( !!objtheme && !!objtheme.colors ) {
|
||||
var colors = [];
|
||||
for ( var c in objtheme.colors ) {
|
||||
colors.push('--' + c + ':' + objtheme.colors[c]);
|
||||
}
|
||||
|
||||
var style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.innerHTML = '.' + ui_theme_name + '{'+ colors.join(';') +';}';
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
|
||||
window.currentLoaderTheme = objtheme;
|
||||
}
|
||||
}
|
||||
}();
|
||||
20
apps/common/main/resources/themes/classic-light.json
Normal file
20
apps/common/main/resources/themes/classic-light.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "Classic Light 2",
|
||||
"id": "theme-classic-light2",
|
||||
"type": "light",
|
||||
"colors": {
|
||||
"toolbar-header-document": "#446995",
|
||||
"toolbar-header-spreadsheet": "#40865c",
|
||||
"toolbar-header-presentation": "#aa5252",
|
||||
|
||||
"background-normal": "#f00",
|
||||
"background-toolbar": "#f100f1",
|
||||
"background-toolbar-additional": "#f100f1",
|
||||
"background-primary-dialog-button": "#7d858c",
|
||||
"background-tab-underline": "#444",
|
||||
"background-notification-popover": "#fcfed7",
|
||||
"background-notification-badge": "#ffd112",
|
||||
"background-scrim": "rgba(0,0,0, 0.2)",
|
||||
"background-loader": "rgba(0,0,0, .65)"
|
||||
}
|
||||
}
|
||||
5
apps/common/main/resources/themes/themes.json
Normal file
5
apps/common/main/resources/themes/themes.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"themes": [
|
||||
"../../common/main/resources/themes/classic-light.json"
|
||||
]
|
||||
}
|
||||
|
|
@ -242,6 +242,7 @@
|
|||
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
|
||||
document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
|
||||
</script>
|
||||
<script src="../../common/main/lib/util/themeinit.js"></script>
|
||||
|
||||
<!-- debug begin -->
|
||||
<link rel="stylesheet/less" type="text/css" href="resources/less/app.less" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue