Angular Theme

The Noosfero theme that uses the API to create a totally new client-side frontend.

Getting started

If you use Vagrant

Use our VirtualBox with everything setup. Run:

vagrant up
vagrant ssh

This box provides Noosfero and the Angular base theme repositories. We've also set up vim and tmux to make the work easier.

How to Install

1. Install Node.js and npm
2. Install Bower: npm install -g bower
3. Install Gulp: npm install -g gulp
4. Install Node.js dependencies: npm install
5. Install bower dependencies: bower install
6. Build the project: npm run build
7. Build multiple themes: npm run build-all
8. Run project tests: npm run test

How to Use

Copy the desired theme from the dist folder into noosfero public/design/themes.

Project Structure

The folder structure of this project was sorted by feature. See some important folders bellow:

• Directives for blocks: src/app/layout/blocks
• Directives for articles: src/app/article
• Directives for activities: src/app/profile/activities
• Service to connect with Noosfero API: src/lib/ng-noosfero-api
• Content viewer component: src/app/article/content-viewer
• Profile component: src/app/profile
• Profile Info component: src/app/profile/info

Change theme

1. Create the theme folder inside themes
2. Configure application to use the new theme, e.g.: npm config set angular-theme:theme custom-theme
3. Create an app folder inside custom-theme and add your custom scss files
4. Put the templates that you want to override in the same structure from the main application source, e.g.: src/app/profile/profile.html will be overriden by themes/custom-theme/app/profile/profile.html

Change skin

• Create an any scss file into: app/layout/scss/skins/

  Suggestion: Create a sass file partial. Something like: _mycustom.scss.

• Extend your skin css class from %skin-base scss placeholder selector. Something like this:

  Suggestion: Use the prefix skin- to the css class

.skin-mycustom {
  @extend %skin-base
}

• Configure application to use the new theme, e.g.: npm config set angular-theme:skin skin-mycustom OR add the default skin property to a specific package.json file (ONLY PERFORM A BUILD), like this:

"config": {
  "skin": "skin-yellow"
}

N.B.

1. The full name of the scss class should be used as the parameter for the command npm config set angular-theme:, like in skin-mycustom. DO NOT use the file name of the skin as the parameter.

2. The skin's file should be the named as the scss class without the word skin, preceded by an underline. Otherwise, it will raise an error during npm install.

Example: _mycustom.

• Start the application with npm start scripts or make a build > PS: If the configured skin is invalid, an error message is showed in the terminal.

Development environment

Known Issues

Message Translation: angular-i18n

• Plural Interpolation only working when current language is En (English)

Plural Function not found for locale

For some reason the messageformat installed on bower_component directory was an older version. Removing the bower_components directory and runing bower install solved the problem