Camptocamp UI concepts

Prerequisites

• git and node installed
• @vue/cli installed
• a descent code editor (Atom, Visual Studio, Sublime Text...)
• and a basic knowledge of Vue.js

Install

git clone https://github.com/c2corg/c2c_ui.git
cd c2c_ui
vue ui

And then, launch development environment :

• http://localhost:8000
• Import => select your c2c_ui folder => Import this folder
• Tasks => serve => Run task button

❤️ http://localhost:8080 ❤️

Vue UI Tasks

They are defined in package.json

• serve: Serve development server, with hot relead.
• build: Build production site
• build:github: Build demo site
• lint: Check code compliance. Have a look on no-fix parameter!
• messages:extract: Build /src/translations/po/c2corg_ui-client.pot from all source, the list of message that must be translated
• messages:compile: get translations from transifex and compile them to json files
• generate-docs: Generate code documentation
• generate-icons: Generate Font-Awesome custom icons
• update-c2c-common: /src/js/constants/common.json is build from c2c_common repo. Here is the task for this !

vue-camptocamp concepts

First of all, have a look on source-structure file : it will provide a good summary of top levels folders.

Components

Based on vue mono-file component. A component is always a file

• View components : /src/views
  • They all finish by View
  • They may contain utils folder for any component that are related to one view
• Shared components : /src/components
  • They are used by many components
• Generics components : /src/components/generics
  • They are used by plenty components, and they are available everywhere (Here is the trick)

Styles

The framework used is Bulma

• Exception apart, you must always declare them as scoped
• you must also use lang="scss"
• You can include variable.css if you need any value : @import '@/assets/sass/variables.scss';

Icons

They are all based on Font Aweseome, more precisely on SVG Javascript Core package

• in-app javascript info : bundle
• tree-shaking : font-awesome-config.js
• and custom icons

Here is a complex example : https://github.com/c2corg/c2c_ui/blob/master/src/components/generics/icons/document/IconOuting.vue