diff --git a/README.md b/README.md index a78dd2a..4f3a791 100644 --- a/README.md +++ b/README.md @@ -50,3 +50,18 @@ See some important folders bellow: 1. Create an app folder inside custom-theme and add your custom scss files 1. Put the templates that you want to override in the same structure from the main application source, e.g.: `src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html` + +## Change skin + +- Create a any scss file into your theme folder structure +- Extend your skin css class from `%skin-base` scss placeholder selector. Something like this: + +```sass +.skin-custom { + @extend %skin-base +} +``` +- Configure application to use the new theme, e.g.: +`npm config set angular-theme:skin custom-skin` + +- Start the application with `npm start` scripts ou make a build diff --git a/gulp/conf.js b/gulp/conf.js index 191d96a..270be75 100644 --- a/gulp/conf.js +++ b/gulp/conf.js @@ -27,6 +27,10 @@ exports.configTheme = function(theme) { exports.paths.theme = theme || "angular-default"; exports.paths.allSources = [exports.paths.src, path.join(exports.paths.themes, exports.paths.theme)]; exports.paths.dist = path.join("dist", exports.paths.theme); + + if(argv.skin) { + exports.paths.skin = argv.skin; + } } exports.configTheme(argv.theme); diff --git a/gulp/inject.js b/gulp/inject.js index 2a5804b..8e3c038 100644 --- a/gulp/inject.js +++ b/gulp/inject.js @@ -3,6 +3,8 @@ var path = require('path'); var gulp = require('gulp'); var conf = require('./conf'); +var map = require('map-stream'); +var transform = require('vinyl-transform'); var $ = require('gulp-load-plugins')(); @@ -40,3 +42,34 @@ gulp.task('inject', ['scripts', 'styles'], function () { .pipe(wiredep(_.extend({}, conf.wiredep))) .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve'))); }); + +/** +* Replace the default theme skin to a npm config +* +* Uses "vinyl-transform" + "map-stream" to open the +* js file and rewrite the source file into the same +* destination +* +* @see https://www.npmjs.com/package/vinyl-transform +* @see https://www.npmjs.com/package/map-stream +*/ +gulp.task('inject-skin', function () { + + if(conf.paths.skin) { + + $.util.log('Configured theme skin:', conf.paths.skin); + + var replaceSkin = transform(function(filename) { + return map(function(file, next) { + var contents = file.toString(); + contents = contents.replace('skin-whbl', conf.paths.skin); + return next(null, contents); + }); + }); + + gulp.src(path.join(conf.paths.src,'./noosfero.js')) + .pipe(replaceSkin) + .pipe(gulp.dest(conf.paths.src)); + } + +}); diff --git a/gulp/scripts.js b/gulp/scripts.js index 3f1a7cf..d095995 100644 --- a/gulp/scripts.js +++ b/gulp/scripts.js @@ -9,7 +9,7 @@ var browserSync = require('browser-sync'); var $ = require('gulp-load-plugins')(); -gulp.task('scripts-reload', function() { +gulp.task('scripts-reload', ['inject-skin'], function() { return buildScripts() .pipe(browserSync.stream()); }); diff --git a/package.json b/package.json index 79301b0..097126a 100644 --- a/package.json +++ b/package.json @@ -8,10 +8,11 @@ "ng-forward": "0.0.1-alpha.12" }, "config": { - "theme": "angular-default" + "theme": "angular-default", + "skin": "skin-whbl" }, "scripts": { - "build": "webpack; gulp clean && gulp --theme=$npm_package_config_theme build", + "build": "webpack; gulp clean && gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin build", "build-all": "gulp clean && for d in ./themes/* ; do (gulp --theme=`basename $d` build); done", "webpack": "webpack", "karma": "concurrently \"webpack -w\" \"karma start\"", @@ -23,7 +24,7 @@ "test": "webpack -w --test", "jenkins": "webpack && karma start --single-run", "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite", - "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme serve\"", + "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin serve\"", "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts", "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts" }, @@ -46,8 +47,8 @@ "gulp-eslint": "~1.0.0", "gulp-filter": "~3.0.1", "gulp-flatten": "~0.2.0", - "gulp-insert": "^0.5.0", "gulp-inject": "~3.0.0", + "gulp-insert": "^0.5.0", "gulp-load-plugins": "~0.10.0", "gulp-merge-json": "^0.4.0", "gulp-minify-css": "~1.2.1", @@ -81,6 +82,7 @@ "karma-webpack": "^1.7.0", "lodash": "~3.10.1", "main-bower-files": "~2.9.0", + "map-stream": "0.0.6", "merge-stream": "^1.0.0", "on-build-webpack": "^0.1.0", "phantomjs": "~1.9.18", @@ -96,6 +98,7 @@ "typescript": "^1.8.10", "typings": "^0.6.8", "uglify-save-license": "~0.4.1", + "vinyl-transform": "^1.0.0", "webpack": "^1.12.14", "wiredep": "~2.2.2", "wrench": "~1.5.8", diff --git a/src/app/layout/scss/skins/_whbl.scss b/src/app/layout/scss/skins/_whbl.scss index 146307f..2a64cf1 100644 --- a/src/app/layout/scss/skins/_whbl.scss +++ b/src/app/layout/scss/skins/_whbl.scss @@ -3,7 +3,7 @@ $whbl-sidebar-linkColor: #484848; $whbl-primary-color: #1E96D0; //blue $whbl-font-color: #16191c; -.skin-whbl { +%skin-base { #header-navbar { background-color: $whbl-primary-color; } @@ -296,7 +296,7 @@ $whbl-font-color: #16191c; } @media (max-width: $break-sm-max) { - .skin-whbl { + %skin-base { #logo.navbar-brand > img.normal-logo.logo-white { display: block; } @@ -308,3 +308,7 @@ $whbl-font-color: #16191c; } } } + +.skin-whbl { + @extend %skin-base; +} diff --git a/themes/angular-participa-consulta/app/blocks.scss b/themes/angular-participa-consulta/app/blocks.scss index 063ae13..5653cf5 100644 --- a/themes/angular-participa-consulta/app/blocks.scss +++ b/themes/angular-participa-consulta/app/blocks.scss @@ -1,22 +1,28 @@ +%panel-head-theme { + border: none; + border-radius: 3px 3px 0 0; + font-family: "Ubuntu Medium"; + font-size: 15px; + font-variant: normal; + font-weight: normal; + line-height: 30px; + padding: 15px 15px 15px 15px; + text-transform: capitalize; + background-size: 30px 30px; + background: #DAE1C4 !important; + color: #4F9CAC; +} + .block-head-with-icon { padding: 15px 15px 15px 55px; } +.content-wrapper .block .panel-heading, +.content-wrapper .side-options .panel-heading { + @extend %panel-head-theme; +} + .content-wrapper .block { - .panel-heading { - border: none; - border-radius: 3px 3px 0 0; - font-family: "Ubuntu Medium"; - font-size: 15px; - font-variant: normal; - font-weight: normal; - line-height: 30px; - padding: 15px 15px 15px 15px; - text-transform: capitalize; - background-size: 30px 30px; - background: #DAE1C4; - color: #4F9CAC; - } &.membersblock { .panel-heading { diff --git a/themes/angular-participa-consulta/app/navbar.scss b/themes/angular-participa-consulta/app/navbar.scss index face579..8901b6a 100644 --- a/themes/angular-participa-consulta/app/navbar.scss +++ b/themes/angular-participa-consulta/app/navbar.scss @@ -1,3 +1,15 @@ +.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 4cd0e12..b57d1df 100644 --- a/themes/angular-participa-consulta/app/participa-consulta.scss +++ b/themes/angular-participa-consulta/app/participa-consulta.scss @@ -1,3 +1,5 @@ +$selected-color: #f6c445; + @font-face { font-family: 'Ubuntu'; font-weight: 300; @@ -19,9 +21,51 @@ src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf'); } -.skin-whbl .notifications-list .item-footer { - background: #DAE1C4; - color: #4F9CAC; +.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{ -- libgit2 0.21.2