Merge pull request #660 from butterproject/btzr/react

Fix new themes
butterproject · Jul 1, 2017 · caed8c4 · caed8c4
2 parents 0ca86d8 + 7fbab40
commit caed8c4
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 664 deletions.
diff --git a/package.json b/package.json
@@ -50,6 +50,9 @@
     "butter-provider-vodo": "git+https://github.com/butterproviders/butter-provider-vodo",
     "butter-provider-youtube": "git+https://github.com/butterproviders/butter-provider-youtube",
     "butter-theme-dark": "github:butterthemes/butter-theme-dark",
+    "butter-theme-flax": "github:butterthemes/butter-theme-flax",
+    "butter-theme-pink": "github:butterthemes/butter-theme-pink",
+    "butter-theme-yellow": "github:butterthemes/butter-theme-yellow",
     "chromecasts": "1.9.0",
     "defer-request": "0.0.3",
     "dlnacasts": "0.1.0",

diff --git a/src/app/index.html b/src/app/index.html
@@ -7,10 +7,9 @@
         <link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/font-awesome.min.css">
         <link rel="stylesheet" type="text/css" href="vendor/dosis-fontface/dosis.css">
         <link rel="stylesheet" type="text/css" href="css/animation.css">
-        <link rel="stylesheet" type="text/css" id="theme" href="themes/Official_-_Dark_theme.css">
+        <link rel="stylesheet" type="text/css" href="themes/temp.css">
         <link rel="stylesheet" type="text/css" href="../../node_modules/butter-component-settings/dist/styles.css">
         <link rel="stylesheet" type="text/css" href="../../node_modules/butter-theme-base/index.css">
-        <link rel="stylesheet" type="text/css" href="../../node_modules/butter-theme-dark/index.css">
     </head>
     <body>
         <div class="main-window-region"></div>
@@ -88,7 +87,7 @@
 
         <script src="lib/subtitle/generic.js"></script>
         <script src="lib/subtitle/server.js"></script>
-        
+
         <!-- Backbone Models -->
         <script src="lib/models/filter.js"></script>
         <script src="lib/models/lang.js"></script>

diff --git a/src/app/lib/models/settings.js b/src/app/lib/models/settings.js
@@ -299,10 +299,12 @@
             icon: 'format_paint',
             action: {
                 type: ACTION_TYPES.DROPDOWN,
+                selected: App.Themes.indexOf(Settings.theme),
                 options: App.Themes,
                 apply: (value) => {
-                    $('link#theme').attr('href', 'themes/' + value);
+                    document.documentElement.className = App.Themes[value];
                     App.vent.trigger('updatePostersSizeStylesheet');
+                    Settings.theme =  App.Themes[value];
                 }
             }
         }, {

diff --git a/src/app/lib/themes.js b/src/app/lib/themes.js
@@ -2,6 +2,26 @@
     'use strict';
 
     var fs = require('fs');
+    var path = require('path');
+
+    function load_themes(themes) {
+        themes.map(theme => {
+            var li = document.createElement('link');
+            li.rel = 'stylesheet';
+            li.href = path.join('../../node_modules', theme, 'index.css');
+            document.head.appendChild(li);
+        });
+    }
+
+    function get_new_themes() {
+        var packageJson = require(path.join(process.cwd(), 'package.json'));
+
+        var themes = Object.keys(packageJson.dependencies)
+            .filter((p) => (/(butter-theme-.*)/.test(p)));
+
+        load_themes(themes);
+        return themes;
+    }
 
     function get_themes() {
         var theme_files = fs.readdirSync('./src/app/themes/');
@@ -24,5 +44,5 @@
         return Object.assign({}, themes, tp_themes);
     }
 
-    App.Themes = get_themes();
+    App.Themes = get_new_themes();
 })(window.App);
diff --git a/src/app/settings.js b/src/app/settings.js
@@ -127,7 +127,7 @@ Settings.chosenPlayer = 'local';
 
 // Advanced UI
 Settings.alwaysOnTop = false;
-Settings.theme = 'Official_-_Dark_theme';
+Settings.theme = 'butter-theme-dark';
 Settings.ratingStars = true; //trigger on click in details
 Settings.hideSeasons = true;
 Settings.startScreen = Object.keys(Settings.tabs)[0];

diff --git a/src/app/styl/Official_-_Black_&_Yellow_theme.styl b/src/app/styl/Official_-_Black_&_Yellow_theme.styl