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 | 27 | - Content viewer component: `src/app/article/content-viewer` |
| 28 | 28 | - Profile component: `src/app/profile` |
| 29 | 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 | 2 | |
| 3 | 3 | var path = require('path'); |
| 4 | 4 | var gulp = require('gulp'); |
| 5 | +var rename = require('gulp-rename'); | |
| 6 | +var merge = require('merge-stream'); | |
| 5 | 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 | 11 | var $ = require('gulp-load-plugins')({ |
| 9 | 12 | pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del'] |
| 10 | 13 | }); |
| 11 | 14 | |
| 12 | 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 | 21 | .pipe($.minifyHtml({ |
| 18 | 22 | empty: true, |
| 19 | 23 | spare: true, |
| ... | ... | @@ -100,10 +104,11 @@ gulp.task('other', function () { |
| 100 | 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 | 112 | .pipe(fileFilter) |
| 108 | 113 | .pipe(gulp.dest(path.join(conf.paths.dist, '/'))); |
| 109 | 114 | }); |
| ... | ... | @@ -116,4 +121,15 @@ gulp.task('clean-docs', [], function() { |
| 116 | 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 | 6 | * of the tasks |
| 7 | 7 | */ |
| 8 | 8 | |
| 9 | +var argv = require('minimist')(process.argv.slice(2)); | |
| 9 | 10 | var gutil = require('gulp-util'); |
| 11 | +var path = require('path'); | |
| 10 | 12 | |
| 11 | 13 | /** |
| 12 | 14 | * The main paths of your project handle these with care |
| ... | ... | @@ -16,8 +18,15 @@ exports.paths = { |
| 16 | 18 | dist: 'dist', |
| 17 | 19 | tmp: '.tmp', |
| 18 | 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 | 32 | * Wiredep is the lib which inject bower dependencies in your project | ... | ... |
gulp/server.js
| ... | ... | @@ -46,7 +46,11 @@ browserSync.use(browserSyncSpa({ |
| 46 | 46 | })); |
| 47 | 47 | |
| 48 | 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 | 56 | gulp.task('serve:dist', ['build'], function () { | ... | ... |
gulp/styles.js
| ... | ... | @@ -25,11 +25,14 @@ var buildStyles = function() { |
| 25 | 25 | style: 'expanded' |
| 26 | 26 | }; |
| 27 | 27 | |
| 28 | - var injectFiles = gulp.src([ | |
| 29 | - path.join(conf.paths.src, '/app/**/*.scss'), | |
| 28 | + var srcPaths = [ | |
| 30 | 29 | path.join('!' + conf.paths.src, '/app/index.scss'), |
| 31 | 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 | 37 | var injectOptions = { |
| 35 | 38 | transform: function(filePath) { | ... | ... |
gulp/watch.js
| ... | ... | @@ -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 | 41 | browserSync.reload(event.path); |
| 38 | 42 | }); |
| 39 | 43 | }); | ... | ... |
index.html.erb
package.json
| ... | ... | @@ -7,8 +7,12 @@ |
| 7 | 7 | "moment": "^2.11.2", |
| 8 | 8 | "ng-forward": "0.0.1-alpha.12" |
| 9 | 9 | }, |
| 10 | + "config": { | |
| 11 | + "theme": "default" | |
| 12 | + }, | |
| 10 | 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 | 16 | "webpack": "webpack", |
| 13 | 17 | "karma": "concurrently \"webpack -w\" \"karma start\"", |
| 14 | 18 | "docs": "gulp ngdocs; static-server docs", |
| ... | ... | @@ -19,7 +23,7 @@ |
| 19 | 23 | "test": "webpack -w --test", |
| 20 | 24 | "jenkins": "webpack && karma start --single-run", |
| 21 | 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 | 27 | "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts", |
| 24 | 28 | "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts" |
| 25 | 29 | }, |
| ... | ... | @@ -35,7 +39,7 @@ |
| 35 | 39 | "estraverse": "~4.1.0", |
| 36 | 40 | "expose-loader": "^0.7.1", |
| 37 | 41 | "glob": "^7.0.0", |
| 38 | - "gulp": "~3.9.0", | |
| 42 | + "gulp": "^3.9.1", | |
| 39 | 43 | "gulp-angular-filesort": "~1.1.1", |
| 40 | 44 | "gulp-angular-templatecache": "~1.8.0", |
| 41 | 45 | "gulp-autoprefixer": "~3.0.2", |
| ... | ... | @@ -75,6 +79,7 @@ |
| 75 | 79 | "karma-webpack": "^1.7.0", |
| 76 | 80 | "lodash": "~3.10.1", |
| 77 | 81 | "main-bower-files": "~2.9.0", |
| 82 | + "merge-stream": "^1.0.0", | |
| 78 | 83 | "on-build-webpack": "^0.1.0", |
| 79 | 84 | "phantomjs": "~1.9.18", |
| 80 | 85 | "phantomjs-polyfill": "0.0.2", | ... | ... |
src/app/layout/navbar/redebrasil.scss
| ... | ... | @@ -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 @@ |
| 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