From cfb9ef262cbff2e3a14d9d4f5503fa90f6eddc2f Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 15 Jul 2016 01:37:19 -0300 Subject: [PATCH] Start the implementation of themes --- build/webpack.base.conf.js | 20 +++++++++------- build/webpack.dev.conf.js | 20 ++++++++-------- package.json | 1 + src/components/mdBottomBar/index.js | 3 +++ src/components/mdBottomBar/mdBottomBar.scss | 1 + src/components/mdBottomBar/mdBottomBar.theme | 18 +++++++++++++++ src/components/mdButton/index.js | 3 +++ src/components/mdButton/mdButton.theme | 15 ++++++++++++ src/components/mdTheme/index.js | 24 ++++++++++++++++++-- src/core/core.vue | 6 +++++ src/core/structure.scss | 1 + src/main.js | 10 ++++---- 12 files changed, 97 insertions(+), 25 deletions(-) create mode 100644 src/components/mdBottomBar/mdBottomBar.theme create mode 100644 src/components/mdButton/mdButton.theme diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 78552fd..d86dc1c 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -1,7 +1,7 @@ -var path = require('path') -var config = require('../config') -var utils = require('./utils') -var projectRoot = path.resolve(__dirname, '../') +var path = require('path'); +var config = require('../config'); +var utils = require('./utils'); +var projectRoot = path.resolve(__dirname, '../'); module.exports = { entry: { @@ -16,9 +16,9 @@ module.exports = { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], alias: { - 'src': path.resolve(__dirname, '../src'), - 'assets': path.resolve(__dirname, '../src/assets'), - 'components': path.resolve(__dirname, '../src/components') + src: path.resolve(__dirname, '../src'), + assets: path.resolve(__dirname, '../src/assets'), + components: path.resolve(__dirname, '../src/components') } }, resolveLoader: { @@ -54,6 +54,10 @@ module.exports = { test: /\.json$/, loader: 'json' }, + { + test: /\.theme$/, + loaders: ['raw', 'sass'] + }, { test: /\.html$/, loader: 'vue-html' @@ -82,4 +86,4 @@ module.exports = { vue: { loaders: utils.cssLoaders() } -} +}; diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 662df01..fd8086e 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -1,14 +1,14 @@ -var config = require('../config') -var webpack = require('webpack') -var merge = require('webpack-merge') -var utils = require('./utils') -var baseWebpackConfig = require('./webpack.base.conf') -var HtmlWebpackPlugin = require('html-webpack-plugin') +var config = require('../config'); +var webpack = require('webpack'); +var merge = require('webpack-merge'); +var utils = require('./utils'); +var baseWebpackConfig = require('./webpack.base.conf'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); // add hot-reload related code to entry chunks -Object.keys(baseWebpackConfig.entry).forEach(function (name) { - baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) -}) +Object.keys(baseWebpackConfig.entry).forEach(function(name) { + baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]); +}); module.exports = merge(baseWebpackConfig, { module: { @@ -31,4 +31,4 @@ module.exports = merge(baseWebpackConfig, { inject: true }) ] -}) +}); diff --git a/package.json b/package.json index f91ca3d..d6b643a 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "json-loader": "^0.5.4", "node-sass": "^3.8.0", "ora": "^0.2.3", + "raw-loader": "^0.5.1", "sass-loader": "^4.0.0", "shelljs": "^0.7.0", "url-loader": "^0.5.7", diff --git a/src/components/mdBottomBar/index.js b/src/components/mdBottomBar/index.js index 7b0ef06..651360b 100644 --- a/src/components/mdBottomBar/index.js +++ b/src/components/mdBottomBar/index.js @@ -1,7 +1,10 @@ import MdBottomBar from './mdBottomBar.vue'; import MdBottomBarItem from './mdBottomBarItem.vue'; +import MdBottomBarTheme from './mdBottomBar.theme'; export default function install(Vue) { Vue.component('md-bottom-bar', Vue.extend(MdBottomBar)); Vue.component('md-bottom-bar-item', Vue.extend(MdBottomBarItem)); + + window.VueMaterial.styles.push(MdBottomBarTheme); } diff --git a/src/components/mdBottomBar/mdBottomBar.scss b/src/components/mdBottomBar/mdBottomBar.scss index bdde92d..58a29ab 100644 --- a/src/components/mdBottomBar/mdBottomBar.scss +++ b/src/components/mdBottomBar/mdBottomBar.scss @@ -77,6 +77,7 @@ .md-text { transform: scale(.8571) translateY(2px); transition: $swift-ease-out, + color $swift-linear-duration $swift-linear-timing-function, opacity $swift-linear-duration $swift-linear-timing-function; } diff --git a/src/components/mdBottomBar/mdBottomBar.theme b/src/components/mdBottomBar/mdBottomBar.theme new file mode 100644 index 0000000..bfc33df --- /dev/null +++ b/src/components/mdBottomBar/mdBottomBar.theme @@ -0,0 +1,18 @@ +.THEME_NAME { + .md-bottom-bar { + &:not(.md-shift) { + .md-active { + color: PRIMARY; + } + } + + &.md-shift { + background-color: PRIMARY; + color: #fff; + + &.md-accent { + background-color: ACCENT; + } + } + } +} diff --git a/src/components/mdButton/index.js b/src/components/mdButton/index.js index dbf3465..b36e571 100644 --- a/src/components/mdButton/index.js +++ b/src/components/mdButton/index.js @@ -1,7 +1,10 @@ import MdButton from './mdButton.vue'; import MdLinkButton from './mdLinkButton.vue'; +import MdButtonTheme from './mdButton.theme'; export default function install(Vue) { Vue.component('md-button', Vue.extend(MdButton)); Vue.component('md-link-button', Vue.extend(MdLinkButton)); + + window.VueMaterial.styles.push(MdButtonTheme); } diff --git a/src/components/mdButton/mdButton.theme b/src/components/mdButton/mdButton.theme new file mode 100644 index 0000000..8100ea0 --- /dev/null +++ b/src/components/mdButton/mdButton.theme @@ -0,0 +1,15 @@ +.THEME_NAME { + .md-button { + &.md-primary { + background-color: PRIMARY; + + &:hover { + background-color: ACCENT; + } + } + + &.md-accent { + background-color: ACCENT; + } + } +} diff --git a/src/components/mdTheme/index.js b/src/components/mdTheme/index.js index f5aaed7..1fe0712 100644 --- a/src/components/mdTheme/index.js +++ b/src/components/mdTheme/index.js @@ -5,6 +5,8 @@ const createNewStyleElement = (style, name) => { if (!head.querySelector('#' + styleId)) { let newTag = document.createElement('style'); + style = style.replace(/THEME_NAME/g, styleId); + newTag.type = 'text/css'; newTag.id = styleId; newTag.textContent = style; @@ -13,8 +15,24 @@ const createNewStyleElement = (style, name) => { } }; +const parseStyle = (style, theme) => { + style = style + .replace(/PRIMARY/g, theme.primary) + .replace(/ACCENT/g, theme.accent) + .replace(/BACKGROUND/g, theme.background); + + return style; +}; + const registerTheme = (theme, name) => { - createNewStyleElement('', name); + let themeStyles = window.VueMaterial.styles; + let parsedStyle = []; + + themeStyles.forEach((style) => { + parsedStyle.push(parseStyle(style, theme)); + }); + + createNewStyleElement(parsedStyle.join('\n'), name); }; export default function install(Vue, themes) { @@ -22,10 +40,12 @@ export default function install(Vue, themes) { if (themeNames.length) { themeNames.forEach((name) => { - registerTheme(themes[name].primary, name); + registerTheme(themes[name], name); }); } + document.body.classList.add('md-theme-default'); + Vue.directive('mdTheme', (theme) => { if (theme) { console.log(theme); diff --git a/src/core/core.vue b/src/core/core.vue index 7d0ef94..c8f1880 100644 --- a/src/core/core.vue +++ b/src/core/core.vue @@ -1,3 +1,9 @@ + +