README.md 1.83 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