Download as
Browse Code »

Commit 21f901f190286bf54e6e9d8aa48d56dee4fc5f1f

Authored by Leandro Santos
2 parents b07589aa 1085e5cf
Exists in master and in 1 other branch dev-fixes

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
  Diff comments   View file @21f901f
... ... @@ -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
  Diff comments   View file @21f901f
... ... @@ -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
  Diff comments   View file @21f901f
... ... @@ -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
  Diff comments   View file @21f901f
... ... @@ -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
  Diff comments   View file @21f901f
... ... @@ -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
  Diff comments   View file @21f901f
... ... @@ -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
View file @b07589a
... ... @@ -1 +0,0 @@
1   -dist/index.html
2 0 \ No newline at end of file
package.json
  Diff comments   View file @21f901f
... ... @@ -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
View file @b07589a
... ... @@ -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
View file @b07589a
... ... @@ -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
View file @b07589a

536 Bytes
src/assets/images/redebrasil/fundo-portal.jpg
View file @b07589a

253 KB
src/assets/images/redebrasil/header-home.png
View file @b07589a

5.6 KB
themes/.keep 0 → 100644
  Diff comments   View file @21f901f
themes/default/.keep 0 → 100644
  Diff comments   View file @21f901f
themes/rede-brasil/app/navbar.scss 0 → 100644
  Diff comments   View file @21f901f
... ... @@ -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
  Diff comments   View file @21f901f
... ... @@ -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
View file @21f901f

536 Bytes
themes/rede-brasil/assets/images/redebrasil/fundo-portal.jpg 0 → 100755
View file @21f901f

253 KB
themes/rede-brasil/assets/images/redebrasil/header-home.png 0 → 100755
View file @21f901f

5.6 KB