2.58 KB

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 a any scss file into your theme folder structure
  • Extend your skin css class from %skin-base scss placeholder selector. Something like this:
.skin-custom {
  @extend %skin-base
  • Configure application to use the new theme, e.g.: npm config set angular-theme:skin custom-skin

  • Start the application with npm start scripts ou make a build

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