Commit 21f901f190286bf54e6e9d8aa48d56dee4fc5f1f
Exists in
master
and in
30 other branches
Merge branch 'themes' into 'master'
Estrutura de temas para a aplicação angular no noosfero Resolve a issue #3 See merge request !3
Showing
20 changed files
with
94 additions
and
44 deletions
Show diff stats
README.md
@@ -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` |
gulp/build.js
@@ -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']); |
gulp/conf.js
@@ -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) { |
gulp/watch.js
@@ -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
package.json
@@ -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
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
@@ -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 | +} |
536 Bytes
253 KB
5.6 KB