[themes] load external themes

apps/common/main/lib/controller/Themes.js

@@ -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, {
+            Common.Utils.loadConfig(url,
-                method: 'get',
+                function ( obj ) {
-                headers: {
+                    if ( obj != 'error' ) {
-                    'Accept': 'application/json',
+                        parse_themes_object(obj);
-                },
+                    }
-            }).then(function(response) {
-                if (!response.ok) {
-                    throw new Error('server error');
                 }
-                return response.json();
+            );
-            }).then(function(response) {
+            // fetch(url, {
-                if ( response.then ) {
+            //     method: 'get',
-                    // return response.json();
+            //     headers: {
-                } else {
+            //         'Accept': 'application/json',
-                    parse_themes_object(response);
+            //     },
-
+            // }).then(function(response) {
-                    /* to break promises chain */
+            //     if (!response.ok) {
-                    throw new Error('loaded');
+            //         throw new Error('server error');
-                }
+            //     }
-            }).catch(function(e) {
+            //     return response.json();
-                if ( e.message == 'loaded' ) {
+            // }).then(function(response) {
-                } else console.log('fetch error: ' + e);
+            //     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));
                     }
 

apps/common/main/lib/util/themeinit.js

@@ -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;
+        }
+    }
+}();

apps/common/main/resources/themes/classic-light.json

@@ -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)"
+        }
+}

apps/common/main/resources/themes/themes.json

@@ -0,0 +1,5 @@
+{
+    "themes": [
+        "../../common/main/resources/themes/classic-light.json"
+    ]
+}

apps/documenteditor/main/index.html

@@ -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" />