Download as
Browse Code »

Commit 04a99db3df3c4019d66d7a28181cecf324fb2c39

Authored by Evandro Junior
2 parents 36e4d9d9 f276722d
Exists in master and in 10 other branches cosmetic_changes_people_and_communities_block, forgot_password, layout_support, login_modal_improve, profile-blocks-sass, profile_description_block_component, recent-activities, staging, translations, users_profile_page

Merge branch 'theme-skin-yellow' 

* theme-skin-yellow:
  New npm config 'skin' to allow sass by theme skins
Showing 9 changed files with 146 additions and 25 deletions   Show diff stats
@@ -51,11 +51,26 @@ See some important folders bellow: @@ -51,11 +51,26 @@ See some important folders bellow:
51 1. Put the templates that you want to override in the same structure from the main application source, e.g.: 51 1. Put the templates that you want to override in the same structure from the main application source, e.g.:
52 `src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html` 52 `src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html`
53 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
  68 +
54 ## Development environment 69 ## Development environment
55 70
56 ## Known Issues 71 ## Known Issues
57 72
58 -### Message Translation: angular-i18n 73 +### Message Translation: angular-i18n
59 74
60 - Plural Interpolation only working when current language is En (English) 75 - Plural Interpolation only working when current language is En (English)
61 76
@@ -27,6 +27,10 @@ exports.configTheme = function(theme) { @@ -27,6 +27,10 @@ exports.configTheme = function(theme) {
27 exports.paths.theme = theme || "angular-default"; 27 exports.paths.theme = theme || "angular-default";
28 exports.paths.allSources = [exports.paths.src, path.join(exports.paths.themes, exports.paths.theme)]; 28 exports.paths.allSources = [exports.paths.src, path.join(exports.paths.themes, exports.paths.theme)];
29 exports.paths.dist = path.join("dist", exports.paths.theme); 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 exports.configTheme(argv.theme); 35 exports.configTheme(argv.theme);
32 36
gulp/inject.js
  Diff comments   View file @04a99db
@@ -3,6 +3,8 @@ @@ -3,6 +3,8 @@
3 var path = require('path'); 3 var path = require('path');
4 var gulp = require('gulp'); 4 var gulp = require('gulp');
5 var conf = require('./conf'); 5 var conf = require('./conf');
  6 +var map = require('map-stream');
  7 +var transform = require('vinyl-transform');
6 8
7 var $ = require('gulp-load-plugins')(); 9 var $ = require('gulp-load-plugins')();
8 10
@@ -40,3 +42,34 @@ gulp.task('inject', ['scripts', 'styles'], function () { @@ -40,3 +42,34 @@ gulp.task('inject', ['scripts', 'styles'], function () {
40 .pipe(wiredep(_.extend({}, conf.wiredep))) 42 .pipe(wiredep(_.extend({}, conf.wiredep)))
41 .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve'))); 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   View file @04a99db
@@ -9,7 +9,7 @@ var browserSync = require('browser-sync'); @@ -9,7 +9,7 @@ var browserSync = require('browser-sync');
9 var $ = require('gulp-load-plugins')(); 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 return buildScripts() 13 return buildScripts()
14 .pipe(browserSync.stream()); 14 .pipe(browserSync.stream());
15 }); 15 });
@@ -8,10 +8,11 @@ @@ -8,10 +8,11 @@
8 "ng-forward": "0.0.1-alpha.12" 8 "ng-forward": "0.0.1-alpha.12"
9 }, 9 },
10 "config": { 10 "config": {
11 - "theme": "angular-default" 11 + "theme": "angular-default",
  12 + "skin": "skin-whbl"
12 }, 13 },
13 "scripts": { 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 "build-all": "gulp clean && for d in ./themes/* ; do (gulp --theme=`basename $d` build); done", 16 "build-all": "gulp clean && for d in ./themes/* ; do (gulp --theme=`basename $d` build); done",
16 "webpack": "webpack", 17 "webpack": "webpack",
17 "karma": "concurrently \"webpack -w\" \"karma start\"", 18 "karma": "concurrently \"webpack -w\" \"karma start\"",
@@ -23,7 +24,7 @@ @@ -23,7 +24,7 @@
23 "test": "webpack -w --test", 24 "test": "webpack -w --test",
24 "jenkins": "webpack && karma start --single-run", 25 "jenkins": "webpack && karma start --single-run",
25 "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite", 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 "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts", 28 "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts",
28 "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts" 29 "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts"
29 }, 30 },
@@ -46,8 +47,8 @@ @@ -46,8 +47,8 @@
46 "gulp-eslint": "~1.0.0", 47 "gulp-eslint": "~1.0.0",
47 "gulp-filter": "~3.0.1", 48 "gulp-filter": "~3.0.1",
48 "gulp-flatten": "~0.2.0", 49 "gulp-flatten": "~0.2.0",
49 - "gulp-insert": "^0.5.0",  
50 "gulp-inject": "~3.0.0", 50 "gulp-inject": "~3.0.0",
  51 + "gulp-insert": "^0.5.0",
51 "gulp-load-plugins": "~0.10.0", 52 "gulp-load-plugins": "~0.10.0",
52 "gulp-merge-json": "^0.4.0", 53 "gulp-merge-json": "^0.4.0",
53 "gulp-minify-css": "~1.2.1", 54 "gulp-minify-css": "~1.2.1",
@@ -81,6 +82,7 @@ @@ -81,6 +82,7 @@
81 "karma-webpack": "^1.7.0", 82 "karma-webpack": "^1.7.0",
82 "lodash": "~3.10.1", 83 "lodash": "~3.10.1",
83 "main-bower-files": "~2.9.0", 84 "main-bower-files": "~2.9.0",
  85 + "map-stream": "0.0.6",
84 "merge-stream": "^1.0.0", 86 "merge-stream": "^1.0.0",
85 "on-build-webpack": "^0.1.0", 87 "on-build-webpack": "^0.1.0",
86 "phantomjs": "~1.9.18", 88 "phantomjs": "~1.9.18",
@@ -96,6 +98,7 @@ @@ -96,6 +98,7 @@
96 "typescript": "^1.8.10", 98 "typescript": "^1.8.10",
97 "typings": "^0.6.8", 99 "typings": "^0.6.8",
98 "uglify-save-license": "~0.4.1", 100 "uglify-save-license": "~0.4.1",
  101 + "vinyl-transform": "^1.0.0",
99 "webpack": "^1.12.14", 102 "webpack": "^1.12.14",
100 "wiredep": "~2.2.2", 103 "wiredep": "~2.2.2",
101 "wrench": "~1.5.8", 104 "wrench": "~1.5.8",
src/app/layout/scss/skins/_whbl.scss
  Diff comments   View file @04a99db
@@ -3,7 +3,7 @@ $whbl-sidebar-linkColor: #484848; @@ -3,7 +3,7 @@ $whbl-sidebar-linkColor: #484848;
3 $whbl-primary-color: #1E96D0; //blue 3 $whbl-primary-color: #1E96D0; //blue
4 $whbl-font-color: #16191c; 4 $whbl-font-color: #16191c;
5 5
6 -.skin-whbl { 6 +%skin-base {
7 #header-navbar { 7 #header-navbar {
8 background-color: $whbl-primary-color; 8 background-color: $whbl-primary-color;
9 } 9 }
@@ -296,7 +296,7 @@ $whbl-font-color: #16191c; @@ -296,7 +296,7 @@ $whbl-font-color: #16191c;
296 } 296 }
297 297
298 @media (max-width: $break-sm-max) { 298 @media (max-width: $break-sm-max) {
299 - .skin-whbl { 299 + %skin-base {
300 #logo.navbar-brand > img.normal-logo.logo-white { 300 #logo.navbar-brand > img.normal-logo.logo-white {
301 display: block; 301 display: block;
302 } 302 }
@@ -308,3 +308,7 @@ $whbl-font-color: #16191c; @@ -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   View file @04a99db
  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 .block-head-with-icon { 16 .block-head-with-icon {
2 padding: 15px 15px 15px 55px; 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 .content-wrapper .block { 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 &.membersblock { 27 &.membersblock {
22 .panel-heading { 28 .panel-heading {
themes/angular-participa-consulta/app/navbar.scss
  Diff comments   View file @04a99db
  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 .navbar { 13 .navbar {
2 min-height: 123px; 14 min-height: 123px;
3 background-color: #f9c404; 15 background-color: #f9c404;
themes/angular-participa-consulta/app/participa-consulta.scss
  Diff comments   View file @04a99db
  1 +$selected-color: #f6c445;
  2 +
1 @font-face { 3 @font-face {
2 font-family: 'Ubuntu'; 4 font-family: 'Ubuntu';
3 font-weight: 300; 5 font-weight: 300;
@@ -19,9 +21,51 @@ @@ -19,9 +21,51 @@
19 src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf'); 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 .profile-header, .profile-footer{ 71 .profile-header, .profile-footer{