Commit 21f901f190286bf54e6e9d8aa48d56dee4fc5f1f

Authored by Leandro Santos
2 parents b07589aa 1085e5cf

Merge branch 'themes' into 'master'

Estrutura de temas para a aplicação angular no noosfero

Resolve a issue #3

See merge request !3
@@ -27,3 +27,13 @@ See some important folders bellow: @@ -27,3 +27,13 @@ See some important folders bellow:
27 - Content viewer component: `src/app/article/content-viewer` 27 - Content viewer component: `src/app/article/content-viewer`
28 - Profile component: `src/app/profile` 28 - Profile component: `src/app/profile`
29 - Profile Info component: `src/app/profile/info` 29 - Profile Info component: `src/app/profile/info`
  30 +
  31 +
  32 +## Change theme
  33 +
  34 +1. Create the theme folder inside themes
  35 +1. Configure application to use the new theme, e.g.:
  36 +`npm config set angular-theme:theme custom-theme`
  37 +1. Create an app folder inside custom-theme and add your custom scss files
  38 +1. Put the templates that you want to override in the same structure from the main application source, e.g.:
  39 +`src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html`
@@ -2,18 +2,22 @@ @@ -2,18 +2,22 @@
2 2
3 var path = require('path'); 3 var path = require('path');
4 var gulp = require('gulp'); 4 var gulp = require('gulp');
  5 +var rename = require('gulp-rename');
  6 +var merge = require('merge-stream');
5 var conf = require('./conf'); 7 var conf = require('./conf');
6 -var noosferoThemePrefix = "/designs/themes/angular-theme/dist/"; 8 +
  9 +var noosferoThemePrefix = path.join("/designs/themes/angular-theme", conf.paths.dist, '/');
7 10
8 var $ = require('gulp-load-plugins')({ 11 var $ = require('gulp-load-plugins')({
9 pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del'] 12 pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
10 }); 13 });
11 14
12 gulp.task('partials', function () { 15 gulp.task('partials', function () {
13 - return gulp.src([  
14 - path.join(conf.paths.src, '/app/**/*.html'),  
15 - path.join(conf.paths.tmp, '/serve/app/**/*.html')  
16 - ]) 16 + var srcPaths = [path.join(conf.paths.tmp, '/serve/app/**/*.html')];
  17 + conf.paths.allSources.forEach(function(src) {
  18 + srcPaths.push(path.join(src, '/app/**/*.html'));
  19 + });
  20 + return gulp.src(srcPaths)
17 .pipe($.minifyHtml({ 21 .pipe($.minifyHtml({
18 empty: true, 22 empty: true,
19 spare: true, 23 spare: true,
@@ -100,10 +104,11 @@ gulp.task('other', function () { @@ -100,10 +104,11 @@ gulp.task('other', function () {
100 return file.stat.isFile(); 104 return file.stat.isFile();
101 }); 105 });
102 106
103 - return gulp.src([  
104 - path.join(conf.paths.src, '/**/*'),  
105 - path.join('!' + conf.paths.src, '/**/*.{map,ts,html,css,js,scss}')  
106 - ]) 107 + var srcPaths = [path.join('!' + conf.paths.src, '/**/*.{map,ts,html,css,js,scss}')];
  108 + conf.paths.allSources.forEach(function(src) {
  109 + srcPaths.push(path.join(src, '/**/*'));
  110 + });
  111 + return gulp.src(srcPaths)
107 .pipe(fileFilter) 112 .pipe(fileFilter)
108 .pipe(gulp.dest(path.join(conf.paths.dist, '/'))); 113 .pipe(gulp.dest(path.join(conf.paths.dist, '/')));
109 }); 114 });
@@ -116,4 +121,15 @@ gulp.task('clean-docs', [], function() { @@ -116,4 +121,15 @@ gulp.task('clean-docs', [], function() {
116 return $.del([path.join(conf.paths.docs, '/')]); 121 return $.del([path.join(conf.paths.docs, '/')]);
117 }); 122 });
118 123
119 -gulp.task('build', ['html', 'fonts', 'other', 'locale']); 124 +gulp.task('noosfero', ['html'], function () {
  125 + var layouts = gulp.src('layouts/**/*')
  126 + .pipe(gulp.dest(path.join(conf.paths.dist, "layouts")));
  127 + var theme = gulp.src('theme.yml')
  128 + .pipe(gulp.dest(conf.paths.dist));
  129 + var index = gulp.src(path.join(conf.paths.dist, 'index.html'))
  130 + .pipe(rename('index.html.erb'))
  131 + .pipe(gulp.dest(conf.paths.dist));
  132 + return merge(layouts, theme, index);
  133 +});
  134 +
  135 +gulp.task('build', ['html', 'fonts', 'other', 'locale', 'noosfero']);
@@ -6,7 +6,9 @@ @@ -6,7 +6,9 @@
6 * of the tasks 6 * of the tasks
7 */ 7 */
8 8
  9 +var argv = require('minimist')(process.argv.slice(2));
9 var gutil = require('gulp-util'); 10 var gutil = require('gulp-util');
  11 +var path = require('path');
10 12
11 /** 13 /**
12 * The main paths of your project handle these with care 14 * The main paths of your project handle these with care
@@ -16,8 +18,15 @@ exports.paths = { @@ -16,8 +18,15 @@ exports.paths = {
16 dist: 'dist', 18 dist: 'dist',
17 tmp: '.tmp', 19 tmp: '.tmp',
18 e2e: 'e2e', 20 e2e: 'e2e',
19 - docs: 'docs' 21 + docs: 'docs',
  22 + themes: 'themes'
20 }; 23 };
  24 +exports.configTheme = function(theme) {
  25 + exports.paths.theme = path.join(exports.paths.themes, theme || "default");
  26 + exports.paths.allSources = [exports.paths.src, exports.paths.theme];
  27 + exports.paths.dist = path.join("dist", exports.paths.theme);
  28 +}
  29 +exports.configTheme(argv.theme);
21 30
22 /** 31 /**
23 * Wiredep is the lib which inject bower dependencies in your project 32 * Wiredep is the lib which inject bower dependencies in your project
gulp/server.js
@@ -46,7 +46,11 @@ browserSync.use(browserSyncSpa({ @@ -46,7 +46,11 @@ browserSync.use(browserSyncSpa({
46 })); 46 }));
47 47
48 gulp.task('serve', ['watch'], function () { 48 gulp.task('serve', ['watch'], function () {
49 - browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]); 49 + var srcPaths = [path.join(conf.paths.tmp, '/serve')];
  50 + conf.paths.allSources.reverse().forEach(function(src) {
  51 + srcPaths.push(src);
  52 + });
  53 + browserSyncInit(srcPaths);
50 }); 54 });
51 55
52 gulp.task('serve:dist', ['build'], function () { 56 gulp.task('serve:dist', ['build'], function () {
gulp/styles.js
@@ -25,11 +25,14 @@ var buildStyles = function() { @@ -25,11 +25,14 @@ var buildStyles = function() {
25 style: 'expanded' 25 style: 'expanded'
26 }; 26 };
27 27
28 - var injectFiles = gulp.src([  
29 - path.join(conf.paths.src, '/app/**/*.scss'), 28 + var srcPaths = [
30 path.join('!' + conf.paths.src, '/app/index.scss'), 29 path.join('!' + conf.paths.src, '/app/index.scss'),
31 path.join('!' + conf.paths.src, '/app/layout/scss/*.scss') 30 path.join('!' + conf.paths.src, '/app/layout/scss/*.scss')
32 - ], { read: false }); 31 + ];
  32 + conf.paths.allSources.forEach(function(src) {
  33 + srcPaths.push(path.join(src, '/app/**/*.scss'));
  34 + });
  35 + var injectFiles = gulp.src(srcPaths, { read: false });
33 36
34 var injectOptions = { 37 var injectOptions = {
35 transform: function(filePath) { 38 transform: function(filePath) {
@@ -33,7 +33,11 @@ gulp.task('watch', ['inject'], function () { @@ -33,7 +33,11 @@ gulp.task('watch', ['inject'], function () {
33 } 33 }
34 }); 34 });
35 35
36 - gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) { 36 + var watchPaths = [];
  37 + conf.paths.allSources.forEach(function(src) {
  38 + watchPaths.push(path.join(src, '/app/**/*.html'));
  39 + });
  40 + gulp.watch(watchPaths, function(event) {
37 browserSync.reload(event.path); 41 browserSync.reload(event.path);
38 }); 42 });
39 }); 43 });
index.html.erb
@@ -1 +0,0 @@ @@ -1 +0,0 @@
1 -dist/index.html  
2 \ No newline at end of file 0 \ No newline at end of file
@@ -7,8 +7,12 @@ @@ -7,8 +7,12 @@
7 "moment": "^2.11.2", 7 "moment": "^2.11.2",
8 "ng-forward": "0.0.1-alpha.12" 8 "ng-forward": "0.0.1-alpha.12"
9 }, 9 },
  10 + "config": {
  11 + "theme": "default"
  12 + },
10 "scripts": { 13 "scripts": {
11 - "build": "webpack; gulp clean && gulp build", 14 + "build": "webpack; gulp clean && gulp --theme=$npm_package_config_theme build",
  15 + "build-all": "gulp clean && for d in ./themes/* ; do (gulp --theme=`basename $d` build); done",
12 "webpack": "webpack", 16 "webpack": "webpack",
13 "karma": "concurrently \"webpack -w\" \"karma start\"", 17 "karma": "concurrently \"webpack -w\" \"karma start\"",
14 "docs": "gulp ngdocs; static-server docs", 18 "docs": "gulp ngdocs; static-server docs",
@@ -19,7 +23,7 @@ @@ -19,7 +23,7 @@
19 "test": "webpack -w --test", 23 "test": "webpack -w --test",
20 "jenkins": "webpack && karma start --single-run", 24 "jenkins": "webpack && karma start --single-run",
21 "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite", 25 "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite",
22 - "start": "concurrently \"webpack -w\" \"gulp serve\"", 26 + "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme serve\"",
23 "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts", 27 "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts",
24 "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts" 28 "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts"
25 }, 29 },
@@ -35,7 +39,7 @@ @@ -35,7 +39,7 @@
35 "estraverse": "~4.1.0", 39 "estraverse": "~4.1.0",
36 "expose-loader": "^0.7.1", 40 "expose-loader": "^0.7.1",
37 "glob": "^7.0.0", 41 "glob": "^7.0.0",
38 - "gulp": "~3.9.0", 42 + "gulp": "^3.9.1",
39 "gulp-angular-filesort": "~1.1.1", 43 "gulp-angular-filesort": "~1.1.1",
40 "gulp-angular-templatecache": "~1.8.0", 44 "gulp-angular-templatecache": "~1.8.0",
41 "gulp-autoprefixer": "~3.0.2", 45 "gulp-autoprefixer": "~3.0.2",
@@ -75,6 +79,7 @@ @@ -75,6 +79,7 @@
75 "karma-webpack": "^1.7.0", 79 "karma-webpack": "^1.7.0",
76 "lodash": "~3.10.1", 80 "lodash": "~3.10.1",
77 "main-bower-files": "~2.9.0", 81 "main-bower-files": "~2.9.0",
  82 + "merge-stream": "^1.0.0",
78 "on-build-webpack": "^0.1.0", 83 "on-build-webpack": "^0.1.0",
79 "phantomjs": "~1.9.18", 84 "phantomjs": "~1.9.18",
80 "phantomjs-polyfill": "0.0.2", 85 "phantomjs-polyfill": "0.0.2",
src/app/layout/navbar/redebrasil.scss
@@ -1,16 +0,0 @@ @@ -1,16 +0,0 @@
1 -.navbar {  
2 - min-height: 123px;  
3 - background:url("../assets/images/redebrasil/bg-header.png") repeat-x;  
4 -  
5 - .container-fluid {  
6 - .navbar-brand {  
7 - .noosfero-logo {  
8 - background:url("../assets/images/redebrasil/header-home.png") no-repeat;  
9 - padding: 0px 257px 63px 15px;  
10 - }  
11 - .noosfero-name {  
12 - display: none;  
13 - }  
14 - }  
15 - }  
16 -}  
src/app/redebrasil.scss
@@ -1,8 +0,0 @@ @@ -1,8 +0,0 @@
1 -body > .ng-scope {  
2 - background:url("../assets/images/redebrasil/fundo-portal.jpg") center top #59666E no-repeat ;  
3 - min-height: 100%;  
4 -}  
5 -  
6 -html, body {  
7 - height:100%;  
8 -}  
src/assets/images/redebrasil/bg-header.png

536 Bytes

src/assets/images/redebrasil/fundo-portal.jpg

253 KB

src/assets/images/redebrasil/header-home.png

5.6 KB

themes/.keep 0 → 100644
themes/default/.keep 0 → 100644
themes/rede-brasil/app/navbar.scss 0 → 100644
@@ -0,0 +1,16 @@ @@ -0,0 +1,16 @@
  1 +.navbar {
  2 + min-height: 123px;
  3 + background:url("../assets/images/redebrasil/bg-header.png") repeat-x;
  4 +
  5 + .container-fluid {
  6 + .navbar-brand {
  7 + .noosfero-logo {
  8 + background:url("../assets/images/redebrasil/header-home.png") no-repeat;
  9 + padding: 0px 257px 63px 15px;
  10 + }
  11 + .noosfero-name {
  12 + display: none;
  13 + }
  14 + }
  15 + }
  16 +}
themes/rede-brasil/app/redebrasil.scss 0 → 100644
@@ -0,0 +1,8 @@ @@ -0,0 +1,8 @@
  1 +body > .ng-scope {
  2 + background:url("../assets/images/redebrasil/fundo-portal.jpg") center top #59666E no-repeat ;
  3 + min-height: 100%;
  4 +}
  5 +
  6 +html, body {
  7 + height:100%;
  8 +}
themes/rede-brasil/assets/images/redebrasil/bg-header.png 0 → 100755

536 Bytes

themes/rede-brasil/assets/images/redebrasil/fundo-portal.jpg 0 → 100755

253 KB

themes/rede-brasil/assets/images/redebrasil/header-home.png 0 → 100755

5.6 KB