feat(themes): theme switching

#62 #59
frntl · Aug 10, 2016 · 090d4bb · 090d4bb
1 parent a7959e7
commit 090d4bb
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 437 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "start": "NODE_ENV=development ./node_modules/.bin/electron app/main.js",
     "prewatch": "echo ' cleaning app/ folder except node_modules' && find app/* -maxdepth 0 -name 'node_modules' -prune -o -exec rm -rf '{}' ';'",
     "watch": "./node_modules/.bin/babel src -w -d app -D",
-    "sass": "./node_modules/.bin/node-sass -w src/views/themes/default/scss/ -o src/views/themes/default/css/ --output-style=compact",
+    "sassblank": "./node_modules/.bin/node-sass -w src/views/themes/blank/scss/ -o src/views/themes/blank/css/ --output-style=compact",
+    "sassdefault": "./node_modules/.bin/node-sass -w src/views/themes/default/scss/ -o src/views/themes/default/css/ --output-style=compact",
     "test": "./node_modules/.bin/mocha --compilers js:babel-register",
     "pandoc": "echo 'trying to create markdown via pandoc for testing css in ./test/index.html' && sh bin/pandoc.sh",
     "postinstall": "install-app-deps",

diff --git a/src/config/default.json b/src/config/default.json
@@ -2,7 +2,8 @@
   "defaults": {
     "recentFiles": [],
     "showIntroOnStratup": true,
-    "maxRecentFiles":10
+    "maxRecentFiles":10,
+    "currentTheme": "default"
   },
   "name": "frontal"
 }
diff --git a/src/help/help-loader.js b/src/help/help-loader.js
@@ -34,7 +34,7 @@ export function initialHelpLoader(wins) {
   wins.forEach((w, i, arr) => {
     w.webContents.on('did-finish-load', () => {
       send(w, 'slides', slidesHTML);
-      send(w, 'switch-theme', {path: 'themes/default'});
+      send(w, 'switch-theme', global.config.get('currentTheme'));
     });
   });
 }
diff --git a/src/lib/files.js b/src/lib/files.js
@@ -7,6 +7,7 @@ import {watch} from './watcher';
 import {yamlLoader} from './load-yaml';
 import {tomlLoader} from './load-toml';
 import {dirname, resolve} from 'path';
+import * as fs from 'fs';
 
 export function detectTomlConfig(filePath) {
   var onlypath = dirname(filePath);
@@ -55,3 +56,20 @@ export function processFile(file) {
   sender([global.slidesWindow, global.commentsWindow], 'slides', slidesHTML);
 }
 
+
+export function getDirs (rootDir, cb) {
+  let files = fs.readdirSync(rootDir);
+  // console.log(files);
+  var dirs = [];
+  for (let index = 0; index < files.length; index++) {
+    let file = files[index];
+    // if (file[0] !== '.') {
+    let filePath = rootDir + '/' + file;
+    let stat = fs.statSync(filePath);
+    if(stat.isDirectory()) {
+      dirs.push(file);
+      // }
+    }
+  }
+  return dirs;
+}
diff --git a/src/menu.js b/src/menu.js
@@ -71,6 +71,31 @@ export function buildTemplate(windows) {
   }, {
     label: 'View',
     submenu: [{
+      label: 'Themes',
+      submenu:
+      (()=>{
+        let currentTheme = global.config.get('currentTheme');
+        let dirs = getDirs(__dirname + '/views/themes');
+        let res = [];
+        for(let i = 0; i < dirs.length; i++) {
+          res.push({
+            label: dirs[i],
+            type: 'radio',
+            checked: (dirs[i] === currentTheme ? true : false),
+            click: ()=>{
+              console.log(`in menu creation ${dirs[i]}`);
+              switchTheme(`${dirs[i]}`);
+            }});
+        }
+        res.push({type: 'separator'});
+        res.push({label: 'Load Custom CSS...', click: ()=>{
+          console.log('should load a custom CSS');
+        }});
+        return res;
+      })()
+    }, {
+      type: 'separator'
+    }, {
       label: 'Previous',
       accelerator: 'Up',
       click: function() {

diff --git a/src/views/comments.html b/src/views/comments.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <title>Speaker Notes</title>
-    <link rel="stylesheet" type="text/css" href="./themes/default/css/default-comments.css">
+
+    <link rel="stylesheet" id="comments-link" type="text/css" href="./themes/default/css/main-comments.css">
   </head>
   <body id="notes">
   <header id="speaker-notes">

diff --git a/src/views/lib/slide-functions.js b/src/views/lib/slide-functions.js
@@ -5,6 +5,7 @@
 // - require all files in theme/js
 // and execute them
 // the js file can export one default function so we only have to execute on thing
+const {ipcRenderer} = require('electron');
 
 var libs = require('require-all')(__dirname + '/themes/default/js');
 const $ = require('jquery');

diff --git a/src/views/renderer.js b/src/views/renderer.js
@@ -152,12 +152,20 @@ window.onload = () => { // eslint-disable-line no-undef
     });
   }
 
-  function changeCSS(cssFilePath, cssLinkIndex) {
+  function switchCSS(themeName, cssLinkIndex) {
+    let cssFilePath = __dirname + '/themes/' + themeName + '/css/';
     let oldLink = document.getElementsByTagName('link').item(cssLinkIndex); // eslint-disable-line no-undef
     let newLink = document.createElement('link'); // eslint-disable-line no-undef
     newLink.setAttribute('rel', 'stylesheet');
     newLink.setAttribute('type', 'text/css');
-    newLink.setAttribute('href', cssFilePath);
+    if(oldLink.id === 'slides-link') {
+      newLink.setAttribute('id', 'slides-link');
+      newLink.setAttribute('href', cssFilePath + 'main.css');
+
+    }else if(oldLink.id === 'comments-link') {
+      newLink.setAttribute('id', 'comments-link');
+      newLink.setAttribute('href', cssFilePath + 'main-comments.css');
+    }
     document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink); // eslint-disable-line no-undef
   }
   // -----------execution-------------------
@@ -211,10 +219,13 @@ window.onload = () => { // eslint-disable-line no-undef
   ipcRenderer.on('hello', (event, arg) => {
     // console.log('hello');
   });
+
   ipcRenderer.on('switch-theme', (event, arg) => {
-    console.log(arg);
-    themeLoaderJS(__dirname + '/' + arg.msg.path + '/js');
+    console.log('switcht ', arg.msg);
+    // themeLoaderJS(__dirname + '/' + arg.msg.path + '/js');
+    switchCSS(arg.msg, 0);
   });
+
   ipcRenderer.on('plus', (event, arg) => {
     // console.log(arg);
     // zoomFactorSlides += 0.1;

diff --git a/src/views/slides.html b/src/views/slides.html
@@ -3,8 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Slides</title>
-    <link rel="stylesheet" type="text/css" href="./themes/default/css/default.css">
-    <link rel="stylesheet" href="./themes/default/css/solarized-light-default.css">
+    <link rel="stylesheet" id="slides-link" type="text/css" href="./themes/default/css/main.css">
   </head>
   <body id="frontal">
   <header id="header"></header>

diff --git a/src/views/themes/default/css/default-comments.css b/src/views/themes/default/css/default-comments.css
diff --git a/src/views/themes/default/scss/default-comments.scss b/src/views/themes/default/scss/default-comments.scss