Commit 7f3632f75a883eb2cfd12f8f9aeea3003e9533a9
Exists in
master
and in
8 other branches
Merge branch 'master' into recent-activities
Showing
7 changed files
with
96 additions
and
12 deletions
Show diff stats
README.md
... | ... | @@ -53,7 +53,7 @@ See some important folders bellow: |
53 | 53 | |
54 | 54 | ## Change skin |
55 | 55 | |
56 | -- Create an any scss file into: `app/layout/skins/` | |
56 | +- Create an any scss file into: `app/layout/scss/skins/` | |
57 | 57 | > **Suggestion:** Create a `sass` file partial. Something like: **`_mycustom.scss`**. |
58 | 58 | |
59 | 59 | - Extend your skin css class from `%skin-base` scss placeholder selector. Something like this: |
... | ... | @@ -66,6 +66,14 @@ See some important folders bellow: |
66 | 66 | ``` |
67 | 67 | - Configure application to use the new theme, e.g.: |
68 | 68 | `npm config set angular-theme:skin skin-mycustom` |
69 | +OR add the default skin property to a specific `package.json` file (ONLY PERFORM A BUILD), like this: | |
70 | + | |
71 | +```json | |
72 | +"config": { | |
73 | + "skin": "skin-yellow" | |
74 | +} | |
75 | +``` | |
76 | + | |
69 | 77 | |
70 | 78 | **N.B.** |
71 | 79 | ... | ... |
gulp/build.js
... | ... | @@ -154,4 +154,8 @@ gulp.task('noosfero', ['html'], function () { |
154 | 154 | return merge(layouts, theme, index); |
155 | 155 | }); |
156 | 156 | |
157 | -gulp.task('build', ['ckeditor', 'html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero']); | |
157 | +gulp.task('inject-skin-build', ['html'], function () { | |
158 | + gulp.start('inject-skin'); | |
159 | +}); | |
160 | + | |
161 | +gulp.task('build', ['ckeditor', 'html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero', 'inject-skin-build']); | ... | ... |
gulp/conf.js
... | ... | @@ -9,7 +9,7 @@ |
9 | 9 | var argv = require('minimist')(process.argv.slice(2)); |
10 | 10 | var gutil = require('gulp-util'); |
11 | 11 | var path = require('path'); |
12 | -var fs = require('fs'); | |
12 | +var fs = require('fs-extra'); | |
13 | 13 | |
14 | 14 | /** |
15 | 15 | * The main paths of your project handle these with care |
... | ... | @@ -25,6 +25,17 @@ exports.paths = { |
25 | 25 | languages: 'languages' |
26 | 26 | }; |
27 | 27 | |
28 | +exports.isBuild = function () { | |
29 | + if (!exports.building) { | |
30 | + exports.building = (argv._[0] == 'build' ? true : false); | |
31 | + } | |
32 | + return exports.building; | |
33 | +}; | |
34 | + | |
35 | +exports.isDefaultTheme = function (name) { | |
36 | + return /-default$/.test(name); | |
37 | +}; | |
38 | + | |
28 | 39 | /** |
29 | 40 | * Check if theme folder exists on "themes" directory |
30 | 41 | * |
... | ... | @@ -44,14 +55,14 @@ exports.themeExists = function (path) { |
44 | 55 | * @param skin The skin name passed by arg to gulp task |
45 | 56 | */ |
46 | 57 | exports.skinExists = function (skin) { |
47 | - | |
58 | + | |
48 | 59 | var skinPath, prefixPath = ''; |
49 | 60 | var skinFile = skin+'.scss'; |
50 | 61 | if (/skin-/.test(skin)) { |
51 | 62 | skinFile = skin.replace('skin-','_')+'.scss'; |
52 | 63 | } |
53 | 64 | |
54 | - if (/-default$/.test(exports.paths.theme)) { | |
65 | + if (exports.isDefaultTheme(exports.paths.theme)) { | |
55 | 66 | prefixPath = exports.paths.src; |
56 | 67 | }else { |
57 | 68 | prefixPath = path.join(exports.paths.themes, exports.paths.theme); |
... | ... | @@ -66,7 +77,7 @@ exports.skinExists = function (skin) { |
66 | 77 | } |
67 | 78 | |
68 | 79 | var content = fs.readFileSync(skinPath, {encoding: 'utf8'}); |
69 | - if(content.search(skin) == -1) { | |
80 | + if (content.search(skin) == -1) { | |
70 | 81 | throw new Error('The skin css selector ".'+skin+'" was not found in "'+skinPath+'" file'); |
71 | 82 | }else if (content.search('@extend %skin-base') == -1) { |
72 | 83 | throw new Error('The skin css selector ".'+skin+'" needs inherit from %skin-base sass placeholder'); |
... | ... | @@ -81,15 +92,32 @@ exports.configTheme = function(theme) { |
81 | 92 | |
82 | 93 | exports.paths.allSources = [exports.paths.src, themePath]; |
83 | 94 | |
84 | - | |
85 | 95 | exports.themeExists(themePath); |
86 | 96 | exports.paths.dist = path.join("dist", exports.paths.theme); |
87 | 97 | |
88 | - if(argv.skin) { | |
98 | + if(exports.isBuild() && !exports.isDefaultTheme(exports.paths.theme)){ | |
99 | + | |
100 | + try { | |
101 | + fs.statSync(path.join(themePath,'package.json')); | |
102 | + var themeData = fs.readJsonSync(path.join(themePath,'package.json')); | |
103 | + | |
104 | + if(!themeData.config || !themeData.config.skin) { | |
105 | + throw new Error('The theme "'+exports.paths.theme+'" needs a default skin on their package.json file'); | |
106 | + } | |
107 | + argv.skin = themeData.config.skin; | |
108 | + } catch (e) { | |
109 | + gutil.log(gutil.colors.yellow('[WARNING]','The package.json file was not found into theme:'), gutil.colors.cyan(exports.paths.theme)); | |
110 | + } | |
111 | + | |
112 | + } | |
113 | + | |
114 | + if(argv.skin && argv.skin != 'skin-whbl') { | |
89 | 115 | exports.skinExists(argv.skin); |
90 | 116 | |
91 | 117 | exports.paths.skin = argv.skin; |
92 | 118 | } |
119 | + | |
120 | + gutil.log('Configuring theme', gutil.colors.green(exports.paths.theme.toUpperCase())); | |
93 | 121 | } |
94 | 122 | exports.configTheme(argv.theme); |
95 | 123 | ... | ... |
gulp/inject.js
... | ... | @@ -57,7 +57,12 @@ gulp.task('inject-skin', function () { |
57 | 57 | |
58 | 58 | if(conf.paths.skin) { |
59 | 59 | |
60 | - $.util.log('Configured theme skin:', conf.paths.skin); | |
60 | + var jsPaths = { | |
61 | + src: path.join(conf.paths.src,'./noosfero.js'), | |
62 | + dest: conf.paths.src, | |
63 | + }; | |
64 | + | |
65 | + $.util.log('Configuring theme skin:', conf.paths.skin, '...'); | |
61 | 66 | |
62 | 67 | var replaceSkin = transform(function(filename) { |
63 | 68 | return map(function(file, next) { |
... | ... | @@ -67,9 +72,14 @@ gulp.task('inject-skin', function () { |
67 | 72 | }); |
68 | 73 | }); |
69 | 74 | |
70 | - gulp.src(path.join(conf.paths.src,'./noosfero.js')) | |
75 | + if (conf.isBuild()) { | |
76 | + jsPaths.src = path.join(conf.paths.dist, 'scripts', 'app-*.js'); | |
77 | + jsPaths.dest = path.join(conf.paths.dist, 'scripts'); | |
78 | + } | |
79 | + | |
80 | + gulp.src(jsPaths.src) | |
71 | 81 | .pipe(replaceSkin) |
72 | - .pipe(gulp.dest(conf.paths.src)); | |
82 | + .pipe(gulp.dest(jsPaths.dest)); | |
73 | 83 | } |
74 | 84 | |
75 | 85 | }); | ... | ... |
package.json
... | ... | @@ -26,7 +26,8 @@ |
26 | 26 | "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite", |
27 | 27 | "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin serve\"", |
28 | 28 | "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts", |
29 | - "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts" | |
29 | + "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts", | |
30 | + "debug-gulp": "webpack; gulp clean; ./node_modules/.bin/iron-node node_modules/gulp/bin/gulp.js --theme=$npm_package_config_theme --skin=$npm_package_config_skin" | |
30 | 31 | }, |
31 | 32 | "devDependencies": { |
32 | 33 | "bower": "^1.7.7", |
... | ... | @@ -39,6 +40,7 @@ |
39 | 40 | "eslint-plugin-angular": "~0.12.0", |
40 | 41 | "estraverse": "~4.1.0", |
41 | 42 | "expose-loader": "^0.7.1", |
43 | + "fs-extra": "^0.30.0", | |
42 | 44 | "glob": "^7.0.0", |
43 | 45 | "gulp": "^3.9.1", |
44 | 46 | "gulp-angular-filesort": "~1.1.1", |
... | ... | @@ -69,6 +71,7 @@ |
69 | 71 | "gulp-useref": "~1.3.0", |
70 | 72 | "gulp-util": "~3.0.6", |
71 | 73 | "http-proxy-middleware": "~0.9.0", |
74 | + "iron-node": "^3.0.7", | |
72 | 75 | "istanbul": "^0.4.2", |
73 | 76 | "karma": "~0.13.10", |
74 | 77 | "karma-angular-filesort": "~1.0.0", | ... | ... |
themes/angular-participa-consulta/README.md
... | ... | @@ -3,8 +3,25 @@ |
3 | 3 | |
4 | 4 | ## Getting started |
5 | 5 | |
6 | +**1. To use with `npm start` command** | |
7 | +> **PS:** To developer mode | |
8 | + | |
6 | 9 | Run these commands to set the proper theme and skin |
7 | 10 | |
8 | 11 | `npm config set angular-theme:theme angular-participa-consulta` |
9 | 12 | |
10 | 13 | `npm config set angular-theme:skin skin-yellow` |
14 | + | |
15 | +**2. To generate a build** | |
16 | +> **PS:** Deploy to production | |
17 | + | |
18 | +* Create a specific `package.json` file into this directory | |
19 | +> Use the **`npm init`** command to create this file | |
20 | + | |
21 | +* Configure the **main** skin to this theme. Add the property `config['skin']` below: | |
22 | + | |
23 | +```json | |
24 | +"config": { | |
25 | + "skin": "skin-yellow" | |
26 | +} | |
27 | +``` | ... | ... |
... | ... | @@ -0,0 +1,14 @@ |
1 | +{ | |
2 | + "name": "angular-participa-consulta", | |
3 | + "version": "1.0.0", | |
4 | + "description": "The theme for 'Consulta publica' community specific colors and UI changes", | |
5 | + "config": { | |
6 | + "theme": "angular-participa-consulta", | |
7 | + "skin": "skin-yellow" | |
8 | + }, | |
9 | + "scripts": { | |
10 | + "test": "echo \"Error: no test specified\" && exit 1" | |
11 | + }, | |
12 | + "author": "", | |
13 | + "license": "ISC" | |
14 | +} | ... | ... |