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