From 415f2c89b27744c86e1e302aae52c6f3b88346ca Mon Sep 17 00:00:00 2001
From: Marcos Moura <mrufino@ciandt.com>
Date: Wed, 13 Jul 2016 20:34:36 -0300
Subject: [PATCH] Start the md-theme component

---
 package.json                                |  1 +
 src/components/mdBottomBar/mdBottomBar.scss |  4 +--
 src/components/mdTheme/index.js             | 34 +++++++++++++++++++++
 src/docs.vue                                |  7 ++---
 src/main.js                                 | 17 +++++++++--
 5 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 src/components/mdTheme/index.js

diff --git a/package.json b/package.json
index 9bca981..f91ca3d 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "babel-core": "^6.10.4",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.9.0",
diff --git a/src/components/mdBottomBar/mdBottomBar.scss b/src/components/mdBottomBar/mdBottomBar.scss
index 423767c..23c21d9 100644
--- a/src/components/mdBottomBar/mdBottomBar.scss
+++ b/src/components/mdBottomBar/mdBottomBar.scss
@@ -3,6 +3,7 @@
 .md-bottom-bar {
   width: 100%;
   min-width: 100%;
+  height: 56px;
   position: relative;
   display: flex;
   justify-content: center;
@@ -11,13 +12,12 @@
 .md-bottom-bar-item {
   max-width: 168px;
   min-width: 80px;
-  height: 56px;
+  height: 100%;
   padding: 8px 12px 10px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   justify-content: space-between;
-  flex: 1;
   position: relative;
   border: none;
   background: transparent;
diff --git a/src/components/mdTheme/index.js b/src/components/mdTheme/index.js
new file mode 100644
index 0000000..f5aaed7
--- /dev/null
+++ b/src/components/mdTheme/index.js
@@ -0,0 +1,34 @@
+const createNewStyleElement = (style, name) => {
+  let head = document.head;
+  let styleId = 'md-theme-' + name;
+
+  if (!head.querySelector('#' + styleId)) {
+    let newTag = document.createElement('style');
+
+    newTag.type = 'text/css';
+    newTag.id = styleId;
+    newTag.textContent = style;
+
+    document.head.appendChild(newTag);
+  }
+};
+
+const registerTheme = (theme, name) => {
+  createNewStyleElement('', name);
+};
+
+export default function install(Vue, themes) {
+  let themeNames = Object.keys(themes);
+
+  if (themeNames.length) {
+    themeNames.forEach((name) => {
+      registerTheme(themes[name].primary, name);
+    });
+  }
+
+  Vue.directive('mdTheme', (theme) => {
+    if (theme) {
+      console.log(theme);
+    }
+  });
+}
diff --git a/src/docs.vue b/src/docs.vue
index af7dc02..ce94478 100644
--- a/src/docs.vue
+++ b/src/docs.vue
@@ -36,7 +36,7 @@
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </div>
 
-    <div style="width: 360px; height: 480px;">
+    <div style="width: 360px; height: 480px;" v-md-theme>
       <md-bottom-bar md-shift>
         <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
@@ -47,9 +47,8 @@
 
       <md-bottom-bar style="margin-top: 24px">
         <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-        <md-bottom-bar-item class="md-active" md-icon="books">Books</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="music_note" class="md-active">Music</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="books">Books</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
       </md-bottom-bar>
     </div>
diff --git a/src/main.js b/src/main.js
index 3931068..02604e3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,24 @@
 import Vue from 'vue';
-import Docs from './docs'
-import Core from './core/core';
+import Docs from './docs';
+import './core/core';
+import MdTheme from './components/mdTheme';
 import MdInkRipple from './components/mdInkRipple';
 import MdButton from './components/mdButton';
 import MdIcon from './components/mdIcon';
 import MdBottomBar from './components/mdBottomBar';
 
+Vue.use(MdTheme, {
+  default: {
+    primary: 'blue',
+    accent: 'red',
+    background: 'white'
+  },
+  header: {
+    primary: 'white',
+    accent: 'blue',
+    background: 'white'
+  }
+});
 Vue.use(MdInkRipple);
 Vue.use(MdButton);
 Vue.use(MdIcon);