syndesisio/syndesis-ui-style-guide

Style guide for Syndesis UI development

Syndesis UI Style Guide

This repository is to document the UI style guide for Syndesis development to try to ensure we have consistency through the UI, both to make it easier to contribute, but most importantly to have a consistent UX through Syndesis.

This style guide applies both to the main Syndesis UI and any modules that are imported to extend the functionality of the Syndesis.

Contributing

Simple :)

• Fork this repository
• Create a branch for your changes
• Hack on your changes - see below
• Send in a PR

Adding documentation

This repository uses asciidoc format for writing documentation. If you are unfamiliar with asciidoc, see here for syntax.

To build documentation run:

mvn clean install

Documentation is generated in target/generated-docs/index.html.

To get an updated build of documentation on changes, run:

mvn asciidoctor:http

You can then make changes to content and view changes at http://localhost:2000/.

syndesis-ui-style-guide's Issues

should we use a URI like '-/create' for the create URL?

I added the Create page in the funktion fork of ipaas-client and found that it was easier in the code use the create page inside the same part of the navigation model as the list/view/edit pages. As a kinda hack I used the '-' token for the id
https://github.com/jstrachan/ipaas-client/blob/funktion/src/app/functions/functions.module.ts#L27

which kept the code nice and simple:

const routes: Routes = [
  { path: '', component: FunctionsListPage, pathMatch: 'full' },
  { path: ':id', component: FunctionViewPage, pathMatch: 'full' },
  { path: ':id/edit', component: FunctionEditPage, pathMatch: 'full' },
  { path: '-/create', component: FunctionCreatePage, pathMatch: 'full' },
];

though its a little bit of a hack adding the '-' token.

What do folks think? On the plus side the edit and create URIs are kinda similar - on the down side its a slight mis-use of the :id path ;)