Merge Request #36

← To merge requests From theme-skin-yellow into master
Merged
noosfero-themes/angular-theme!36
Created by Michel Felipe

Skin theme - A npm config added with gulp

Added a new npm config called skin that allow change the default skin-whbl fixed into MainContentComponent class.

This is add more flexibility to customize theme scheme colors and any custom overrides.

This is fixes #81 issue.

These screens below shows the changes:

menu-itens-yellow

visibility-panel-head

Assignee: None
Milestone: 2016.05

Merged by Evandro Junior

Commits (1)
2 participants
Showing 9 changed files   Show diff stats
README.md
  Diff comments   Edit   View file @f276722
... ... @@ -50,3 +50,18 @@ See some important folders bellow:
50 50 1. Create an app folder inside custom-theme and add your custom scss files
51 51 1. Put the templates that you want to override in the same structure from the main application source, e.g.:
52 52 `src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html`
  53 +
  54 +## Change skin
  55 +
  56 +- Create a any scss file into your theme folder structure
  57 +- Extend your skin css class from `%skin-base` scss placeholder selector. Something like this:
  58 +
  59 +```sass
  60 +.skin-custom {
  61 + @extend %skin-base
  62 +}
  63 +```
  64 +- Configure application to use the new theme, e.g.:
  65 +`npm config set angular-theme:skin custom-skin`
  66 +
  67 +- Start the application with `npm start` scripts ou make a build
... ...
gulp/conf.js
  Diff comments   Edit   View file @f276722
... ... @@ -27,6 +27,10 @@ exports.configTheme = function(theme) {
27 27 exports.paths.theme = theme || "angular-default";
28 28 exports.paths.allSources = [exports.paths.src, path.join(exports.paths.themes, exports.paths.theme)];
29 29 exports.paths.dist = path.join("dist", exports.paths.theme);
  30 +
  31 + if(argv.skin) {
  32 + exports.paths.skin = argv.skin;
  33 + }
30 34 }
31 35 exports.configTheme(argv.theme);
32 36  
... ...
gulp/inject.js
  Diff comments   Edit   View file @f276722
... ... @@ -3,6 +3,8 @@
3 3 var path = require('path');
4 4 var gulp = require('gulp');
5 5 var conf = require('./conf');
  6 +var map = require('map-stream');
  7 +var transform = require('vinyl-transform');
6 8  
7 9 var $ = require('gulp-load-plugins')();
8 10  
... ... @@ -40,3 +42,34 @@ gulp.task('inject', ['scripts', 'styles'], function () {
40 42 .pipe(wiredep(_.extend({}, conf.wiredep)))
41 43 .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
42 44 });
  45 +
  46 +/**
  47 +* Replace the default theme skin to a npm config
  48 +*
  49 +* Uses "vinyl-transform" + "map-stream" to open the
  50 +* js file and rewrite the source file into the same
  51 +* destination
  52 +*
  53 +* @see https://www.npmjs.com/package/vinyl-transform
  54 +* @see https://www.npmjs.com/package/map-stream
  55 +*/
  56 +gulp.task('inject-skin', function () {
  57 +
  58 + if(conf.paths.skin) {
  59 +
  60 + $.util.log('Configured theme skin:', conf.paths.skin);
  61 +
  62 + var replaceSkin = transform(function(filename) {
  63 + return map(function(file, next) {
  64 + var contents = file.toString();
  65 + contents = contents.replace('skin-whbl', conf.paths.skin);
  66 + return next(null, contents);
  67 + });
  68 + });
  69 +
  70 + gulp.src(path.join(conf.paths.src,'./noosfero.js'))
  71 + .pipe(replaceSkin)
  72 + .pipe(gulp.dest(conf.paths.src));
  73 + }
  74 +
  75 +});
... ...
gulp/scripts.js
  Diff comments   Edit   View file @f276722
... ... @@ -9,7 +9,7 @@ var browserSync = require('browser-sync');
9 9 var $ = require('gulp-load-plugins')();
10 10  
11 11  
12   -gulp.task('scripts-reload', function() {
  12 +gulp.task('scripts-reload', ['inject-skin'], function() {
13 13 return buildScripts()
14 14 .pipe(browserSync.stream());
15 15 });
... ...
package.json
  Diff comments   Edit   View file @f276722
... ... @@ -8,10 +8,11 @@
8 8 "ng-forward": "0.0.1-alpha.12"
9 9 },
10 10 "config": {
11   - "theme": "angular-default"
  11 + "theme": "angular-default",
  12 + "skin": "skin-whbl"
12 13 },
13 14 "scripts": {
14   - "build": "webpack; gulp clean && gulp --theme=$npm_package_config_theme build",
  15 + "build": "webpack; gulp clean && gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin build",
15 16 "build-all": "gulp clean && for d in ./themes/* ; do (gulp --theme=`basename $d` build); done",
16 17 "webpack": "webpack",
17 18 "karma": "concurrently \"webpack -w\" \"karma start\"",
... ... @@ -23,7 +24,7 @@
23 24 "test": "webpack -w --test",
24 25 "jenkins": "webpack && karma start --single-run",
25 26 "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite",
26   - "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme serve\"",
  27 + "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin serve\"",
27 28 "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts",
28 29 "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts"
29 30 },
... ... @@ -46,8 +47,8 @@
46 47 "gulp-eslint": "~1.0.0",
47 48 "gulp-filter": "~3.0.1",
48 49 "gulp-flatten": "~0.2.0",
49   - "gulp-insert": "^0.5.0",
50 50 "gulp-inject": "~3.0.0",
  51 + "gulp-insert": "^0.5.0",
51 52 "gulp-load-plugins": "~0.10.0",
52 53 "gulp-merge-json": "^0.4.0",
53 54 "gulp-minify-css": "~1.2.1",
... ... @@ -81,6 +82,7 @@
81 82 "karma-webpack": "^1.7.0",
82 83 "lodash": "~3.10.1",
83 84 "main-bower-files": "~2.9.0",
  85 + "map-stream": "0.0.6",
84 86 "merge-stream": "^1.0.0",
85 87 "on-build-webpack": "^0.1.0",
86 88 "phantomjs": "~1.9.18",
... ... @@ -96,6 +98,7 @@
96 98 "typescript": "^1.8.10",
97 99 "typings": "^0.6.8",
98 100 "uglify-save-license": "~0.4.1",
  101 + "vinyl-transform": "^1.0.0",
99 102 "webpack": "^1.12.14",
100 103 "wiredep": "~2.2.2",
101 104 "wrench": "~1.5.8",
... ...
src/app/layout/scss/skins/_whbl.scss
  Diff comments   Edit   View file @f276722
... ... @@ -3,7 +3,7 @@ $whbl-sidebar-linkColor: #484848;
3 3 $whbl-primary-color: #1E96D0; //blue
4 4 $whbl-font-color: #16191c;
5 5  
6   -.skin-whbl {
  6 +%skin-base {
7 7 #header-navbar {
8 8 background-color: $whbl-primary-color;
9 9 }
... ... @@ -296,7 +296,7 @@ $whbl-font-color: #16191c;
296 296 }
297 297  
298 298 @media (max-width: $break-sm-max) {
299   - .skin-whbl {
  299 + %skin-base {
300 300 #logo.navbar-brand > img.normal-logo.logo-white {
301 301 display: block;
302 302 }
... ... @@ -308,3 +308,7 @@ $whbl-font-color: #16191c;
308 308 }
309 309 }
310 310 }
  311 +
  312 +.skin-whbl {
  313 + @extend %skin-base;
  314 +}
... ...
themes/angular-participa-consulta/app/blocks.scss
  Diff comments   Edit   View file @f276722
  1 +%panel-head-theme {
  2 + border: none;
  3 + border-radius: 3px 3px 0 0;
  4 + font-family: "Ubuntu Medium";
  5 + font-size: 15px;
  6 + font-variant: normal;
  7 + font-weight: normal;
  8 + line-height: 30px;
  9 + padding: 15px 15px 15px 15px;
  10 + text-transform: capitalize;
  11 + background-size: 30px 30px;
  12 + background: #DAE1C4 !important;
  13 + color: #4F9CAC;
  14 +}
  15 +
1 16 .block-head-with-icon {
2 17 padding: 15px 15px 15px 55px;
3 18 }
4 19  
  20 +.content-wrapper .block .panel-heading,
  21 +.content-wrapper .side-options .panel-heading {
  22 + @extend %panel-head-theme;
  23 +}
  24 +
5 25 .content-wrapper .block {
6   - .panel-heading {
7   - border: none;
8   - border-radius: 3px 3px 0 0;
9   - font-family: "Ubuntu Medium";
10   - font-size: 15px;
11   - font-variant: normal;
12   - font-weight: normal;
13   - line-height: 30px;
14   - padding: 15px 15px 15px 15px;
15   - text-transform: capitalize;
16   - background-size: 30px 30px;
17   - background: #DAE1C4;
18   - color: #4F9CAC;
19   - }
20 26  
21 27 &.membersblock {
22 28 .panel-heading {
... ...
themes/angular-participa-consulta/app/navbar.scss
  Diff comments   Edit   View file @f276722
  1 +.skin-yellow {
  2 + .navbar-inverse .navbar-toggle {
  3 + border-color: #D49F18;
  4 + }
  5 +
  6 + .container-fluid .navbar-header .navbar-toggle {
  7 + &:hover, &:focus {
  8 + background-color: #f5b025;
  9 + }
  10 + }
  11 +}
  12 +
1 13 .navbar {
2 14 min-height: 123px;
3 15 background-color: #f9c404;
... ...
themes/angular-participa-consulta/app/participa-consulta.scss
  Diff comments   Edit   View file @f276722
  1 +$selected-color: #f6c445;
  2 +
1 3 @font-face {
2 4 font-family: 'Ubuntu';
3 5 font-weight: 300;
... ... @@ -19,9 +21,51 @@
19 21 src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf');
20 22 }
21 23  
22   -.skin-whbl .notifications-list .item-footer {
23   - background: #DAE1C4;
24   - color: #4F9CAC;
  24 +.skin-yellow {
  25 + @extend %skin-base;
  26 +
  27 + .notifications-list .item-footer {
  28 + background: #DAE1C4;
  29 + color: #4F9CAC;
  30 + }
  31 +
  32 + .navbar-nav .open > a,
  33 + .navbar-nav .open > a:hover,
  34 + .navbar-nav .open > a:focus {
  35 + background-color: $selected-color;
  36 + color: #000;
  37 + }
  38 +
  39 + .nav .open > a,
  40 + .nav .open > a:hover,
  41 + .nav .open > a:focus {
  42 + border: none;
  43 + }
  44 +
  45 + .dropdown-menu {
  46 + li > a:hover {
  47 + color: #555;
  48 + background-color: #F7F7F7;
  49 + }
  50 +
  51 + .active > a,
  52 + .active > a:hover,
  53 + .active > a:focus {
  54 + color: #000;
  55 + background-color: #CCC;
  56 + }
  57 + }
  58 +
  59 + .nav .caret {
  60 + border-bottom-color: #fff !important;
  61 + border-top-color: #fff !important;
  62 + }
  63 +
  64 + .nav .open .caret {
  65 + border-bottom-color: #000 !important;
  66 + border-top-color: #000 !important;
  67 + }
  68 +
25 69 }
26 70  
27 71 .profile-header, .profile-footer{
... ...
  • Me
    Link here  
    Michel Felipe @mfdeveloper

    mentioned in issue #81

    Choose File ...   File name...
    Cancel
  • 75f9da986cd17e271b4e4e64023bfa4a?s=40&d=identicon
    Link here  
    Evandro Junior @evandrojr (Edited )

    Sugiro que seja criado um arquivo de skin ao invés de ser somente uma classe.

    Achei um bug que não está relacionando com a demanda: O título do bloco de estatística está da mesma cor do fundo, tornando-o assim invisível.

    Idealmente não deveria ser capaz de escolher um tema ou uma skin inexistente.

    Choose File ...   File name...
    Cancel