From 3a1d52efb2b7fac24a14a0a62d44f54925c0a7a1 Mon Sep 17 00:00:00 2001 From: Michel Felipe Date: Mon, 20 Jun 2016 17:01:56 -0300 Subject: [PATCH] Added skin folder structure + skin and theme validation --- README.md | 7 +++++-- gulp/conf.js | 45 ++++++++++++++++++++++++++++++++++++++++++++- themes/angular-participa-consulta/app/layout/skins/_yellow.scss | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ themes/angular-participa-consulta/app/navbar.scss | 12 ------------ themes/angular-participa-consulta/app/participa-consulta.scss | 47 ----------------------------------------------- 5 files changed, 105 insertions(+), 62 deletions(-) create mode 100644 themes/angular-participa-consulta/app/layout/skins/_yellow.scss diff --git a/README.md b/README.md index 69dad79..6b64560 100644 --- a/README.md +++ b/README.md @@ -53,8 +53,10 @@ See some important folders bellow: ## Change skin -- Create a any scss file into your theme folder structure +- Create a any scss file into: `app/layout/skins/` + > **Suggestion:** Create a `sass` file partial. Something like: **`_mycustom.scss`**. - Extend your skin css class from `%skin-base` scss placeholder selector. Something like this: + > **Suggestion:** Use the prefix **`skin-`** to the css class ```sass .skin-custom { @@ -62,9 +64,10 @@ See some important folders bellow: } ``` - Configure application to use the new theme, e.g.: -`npm config set angular-theme:skin custom-skin` +`npm config set angular-theme:skin skin-myscustom` - Start the application with `npm start` scripts ou make a build + > **PS:** If the configured skin is invalid, a error message is showed in the terminal. ## Development environment diff --git a/gulp/conf.js b/gulp/conf.js index 270be75..38c4674 100644 --- a/gulp/conf.js +++ b/gulp/conf.js @@ -9,6 +9,7 @@ var argv = require('minimist')(process.argv.slice(2)); var gutil = require('gulp-util'); var path = require('path'); +var fs = require('fs'); /** * The main paths of your project handle these with care @@ -23,12 +24,54 @@ exports.paths = { themes: 'themes', languages: 'languages' }; + +/** +* Check if theme folder exists on "themes" directory +* +* @param path The string relative path of the theme +*/ +exports.themeExists = function (path) { + try { + fs.statSync(path); + } catch (e) { + throw new Error('The theme "'+exports.paths.theme+ ' on path "'+path+'" was not found'); + } +}; + +/** +* Check if skin file exists on "{theme}/app/layout/skins" directory +* +* @param skin The skin name passed by arg to gulp task +*/ +exports.skinExists = function (skin) { + var skinFile = skin+'.scss'; + if(/skin-/.test(skin)){ + skinFile = skin.replace('skin-','_')+'.scss'; + } + + var skinPath = path.join(exports.paths.themes, exports.paths.theme, '/app/layout/skins/', skinFile); + + try { + fs.statSync(skinPath); + }catch(e) { + throw new Error('The skin "'+skin+'" on path "'+skinPath+'" was not found'); + } +}; + exports.configTheme = function(theme) { + exports.paths.theme = theme || "angular-default"; - exports.paths.allSources = [exports.paths.src, path.join(exports.paths.themes, exports.paths.theme)]; + var themePath = path.join(exports.paths.themes, exports.paths.theme); + + exports.paths.allSources = [exports.paths.src, themePath]; + + + exports.themeExists(themePath); exports.paths.dist = path.join("dist", exports.paths.theme); if(argv.skin) { + exports.skinExists(argv.skin); + exports.paths.skin = argv.skin; } } diff --git a/themes/angular-participa-consulta/app/layout/skins/_yellow.scss b/themes/angular-participa-consulta/app/layout/skins/_yellow.scss new file mode 100644 index 0000000..58947ea --- /dev/null +++ b/themes/angular-participa-consulta/app/layout/skins/_yellow.scss @@ -0,0 +1,56 @@ +.skin-yellow { + @extend %skin-base; + + .notifications-list .item-footer { + background: #DAE1C4; + color: #4F9CAC; + } + + .navbar-nav .open > a, + .navbar-nav .open > a:hover, + .navbar-nav .open > a:focus { + background-color: $selected-color; + color: #000; + } + + .nav .open > a, + .nav .open > a:hover, + .nav .open > a:focus { + border: none; + } + + .dropdown-menu { + li > a:hover { + color: #555; + background-color: #F7F7F7; + } + + .active > a, + .active > a:hover, + .active > a:focus { + color: #000; + background-color: #CCC; + } + } + + .nav .caret { + border-bottom-color: #fff !important; + border-top-color: #fff !important; + } + + .nav .open .caret { + border-bottom-color: #000 !important; + border-top-color: #000 !important; + } + + .navbar-inverse .navbar-toggle { + border-color: #D49F18; + } + + .container-fluid .navbar-header .navbar-toggle { + &:hover, &:focus { + background-color: #f5b025; + } + } + +} diff --git a/themes/angular-participa-consulta/app/navbar.scss b/themes/angular-participa-consulta/app/navbar.scss index 8901b6a..face579 100644 --- a/themes/angular-participa-consulta/app/navbar.scss +++ b/themes/angular-participa-consulta/app/navbar.scss @@ -1,15 +1,3 @@ -.skin-yellow { - .navbar-inverse .navbar-toggle { - border-color: #D49F18; - } - - .container-fluid .navbar-header .navbar-toggle { - &:hover, &:focus { - background-color: #f5b025; - } - } -} - .navbar { min-height: 123px; background-color: #f9c404; diff --git a/themes/angular-participa-consulta/app/participa-consulta.scss b/themes/angular-participa-consulta/app/participa-consulta.scss index 5fe1e3a..81145bb 100644 --- a/themes/angular-participa-consulta/app/participa-consulta.scss +++ b/themes/angular-participa-consulta/app/participa-consulta.scss @@ -21,53 +21,6 @@ $selected-color: #f6c445; src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf'); } -.skin-yellow { - @extend %skin-base; - - .notifications-list .item-footer { - background: #DAE1C4; - color: #4F9CAC; - } - - .navbar-nav .open > a, - .navbar-nav .open > a:hover, - .navbar-nav .open > a:focus { - background-color: $selected-color; - color: #000; - } - - .nav .open > a, - .nav .open > a:hover, - .nav .open > a:focus { - border: none; - } - - .dropdown-menu { - li > a:hover { - color: #555; - background-color: #F7F7F7; - } - - .active > a, - .active > a:hover, - .active > a:focus { - color: #000; - background-color: #CCC; - } - } - - .nav .caret { - border-bottom-color: #fff !important; - border-top-color: #fff !important; - } - - .nav .open .caret { - border-bottom-color: #000 !important; - border-top-color: #000 !important; - } - -} - .profile-header, .profile-footer{ text-align: center; } -- libgit2 0.21.2