Compare View
Commits (24)
-
Conflicts: index.html.erb
-
Estrutura de temas para a aplicação angular no noosfero Resolve a issue #3 See merge request !3
-
(cherry picked from commit 9a7ad2fc0173320ca685af1dc5edbc91a9046b45)
-
(cherry picked from commit d2b6b43f7d6e60350491a1337853ba4fd5f3efb0)
Showing
23 changed files
Show diff stats
README.md
... | ... | @@ -4,12 +4,25 @@ The Noosfero theme that uses the API to create a totally new client-side fronten |
4 | 4 | |
5 | 5 | ## Getting started |
6 | 6 | |
7 | +### If you use Vagrant | |
8 | +Use our [VirtualBox](https://atlas.hashicorp.com/paulohtfs/boxes/noosfero-dev) with everything setup. | |
9 | +Run: | |
10 | +``` | |
11 | + vagrant init paulohtfs/noosfero-dev | |
12 | + vagrant up --provider virtualbox | |
13 | + vagrant ssh | |
14 | +``` | |
15 | +This box provides Noosfero and the Angular base theme repositories. | |
16 | +We've also set up vim and tmux to make the work easier. | |
17 | + | |
7 | 18 | ### How to Install |
8 | 19 | 1. Install [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) |
9 | 20 | 1. Install [Bower](http://bower.io/): `npm install -g bower` |
21 | +1. Install [Gulp](http://gulpjs.com/): `npm install -g gulp` | |
10 | 22 | 1. Install Node.js dependencies: `npm install` |
11 | 23 | 1. Install bower dependencies: `bower install` |
12 | -1. Build the project: `gulp build` | |
24 | +1. Build the project: `npm run build` | |
25 | +1. Run project tests: `npm run test` | |
13 | 26 | |
14 | 27 | ### How to Use |
15 | 28 | |
... | ... | @@ -27,3 +40,13 @@ See some important folders bellow: |
27 | 40 | - Content viewer component: `src/app/article/content-viewer` |
28 | 41 | - Profile component: `src/app/profile` |
29 | 42 | - Profile Info component: `src/app/profile/info` |
43 | + | |
44 | + | |
45 | +## Change theme | |
46 | + | |
47 | +1. Create the theme folder inside themes | |
48 | +1. Configure application to use the new theme, e.g.: | |
49 | +`npm config set angular-theme:theme custom-theme` | |
50 | +1. Create an app folder inside custom-theme and add your custom scss files | |
51 | +1. Put the templates that you want to override in the same structure from the main application source, e.g.: | |
52 | +`src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html` | ... | ... |
... | ... | @@ -0,0 +1,25 @@ |
1 | +#-*- mode: ruby -*- | |
2 | +# vi: set ft=ruby : | |
3 | + | |
4 | +# This will config you local machine | |
5 | +# If you having problem to up check out the README.md | |
6 | +Vagrant.configure(2) do |config| | |
7 | + | |
8 | + config.vm.define "noosfero-dev" | |
9 | + | |
10 | + # This box has already | |
11 | + # - Ruby on Rails 4 | |
12 | + # - NVM with NodeJS v5.9.0 | |
13 | + config.vm.box = "paulohtfs/noosfero-dev" | |
14 | + | |
15 | + # Network configurations | |
16 | + # Check if your host port is available | |
17 | + config.vm.network "forwarded_port", guest: 3000, host: 3000 | |
18 | + config.vm.network "private_network", ip: "10.0.0.15" | |
19 | + | |
20 | + # Change according to you hardware | |
21 | + config.vm.provider "virtualbox" do |vm| | |
22 | + vm.memory = 512; | |
23 | + vm.cpus = 1; | |
24 | + end | |
25 | +end | ... | ... |
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 | }); | ... | ... |
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/navbar.html
... | ... | @@ -7,7 +7,7 @@ |
7 | 7 | <span class="icon-bar"></span> |
8 | 8 | <span class="icon-bar"></span> |
9 | 9 | </button> |
10 | - <a class="navbar-brand" ui-sref="main"> | |
10 | + <a class="navbar-brand" ui-sref="main.environment.home"> | |
11 | 11 | <span class="noosfero-logo"> </span> |
12 | 12 | <span class="noosfero-name">{{"noosfero.name" | translate}}</span> |
13 | 13 | </a> | ... | ... |
src/app/shared/pipes/date-format.filter.spec.ts
... | ... | @@ -8,10 +8,11 @@ describe("Filters", () => { |
8 | 8 | beforeEach(angular.mock.module("angularMoment")); |
9 | 9 | |
10 | 10 | it("convert date from the format returned by noosfero api to an ISO format", done => { |
11 | - let date = "2016/03/10 10:46:47"; | |
12 | - let htmlTemplate = `{{ '${date}' | dateFormat }}`; | |
11 | + let dateString = '2016/03/10 10:46:47'; | |
12 | + let date = new Date(dateString); | |
13 | + let htmlTemplate = `{{ '${dateString}' | dateFormat }}`; | |
13 | 14 | quickCreateComponent({ providers: [DateFormat], template: htmlTemplate }).then(fixture => { |
14 | - expect(fixture.debugElement.text()).toEqual('2016-03-10T13:46:47.000Z'); | |
15 | + expect(fixture.debugElement.text()).toEqual(date.toISOString()); | |
15 | 16 | done(); |
16 | 17 | }); |
17 | 18 | }); | ... | ... |
... | ... | @@ -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