# Styleguide SCM-Manager 2

Important:
This overview is focused on visual, not structural or functional aspects. It may contain class names not yet integrated in SCM-Manager and can only display the present state. There may be changes to some elements in the near future.

## Colors

Overview for all main colors with examples for lighter nuances.

- Colors with 75%-25% opacity will only be used for elements like graphs (where there is a need for extra color shades) and relevant interaction states (like disabled buttons).
- As soon as there is a use case where the separation of the colors for "info" and "link" seems necessary, it will be possible to change the current color assignment.

Class | Color (100%) | Color (75%) | Color (50%) | Color (25%)
--- | --- | --- | --- | ---
`.has-background-dark` `.has-background-dark-75` `.has-background-dark-50` `.has-background-dark-25` | #363636 | #686868 | #9a9a9a | #cdcdcd
`.has-background-info` `.has-background-info-75` `.has-background-info-50` `.has-background-info-25` | #33b2e8 | #66c5ee | #99d8f3 | #ccecf9
`.has-background-link` `.has-background-link-75` `.has-background-link-50` `.has-background-link-25` | #33b2e8 | #66c5ee | #99d8f3 | #ccecf9
`.has-background-primary` `.has-background-primary-75` `.has-background-primary-50` `.has-background-primary-25` | #00d1df | #40dde7 | #7fe8ef | #bff3f7
`.has-background-success` `.has-background-success-75` `.has-background-success-50` `.has-background-success-25` | #00c79b | #40d5b4 | #7fe3cd | #bff1e6
`.has-background-warning` `.has-background-warning-75` `.has-background-warning-50` `.has-background-warning-25` | #ffdd57 | #ffe681 | #ffeeab | #fff6d5
`.has-background-danger` `.has-background-danger-75` `.has-background-danger-50` `.has-background-danger-25` | #ff3860 | #ff6a88 | #ff9baf | #ffcdd7

Class | Text
--- | ---
`.has-text-dark` | Beispieltext
`.has-text-info` | Beispieltext
`.has-text-link` | Beispieltext
`.has-text-primary` | Beispieltext
`.has-text-success` | Beispieltext
`.has-text-warning` Attention: Has color #FFB600 because of readability issues with the original color #ffdd57. | Beispieltext
`.has-text-danger` | Beispieltext

## Hero & Main Navigation (Tab-based)

May contain mobile hamburger menu in the future?

## Sidebar Navigation

- Plugins are always listed after "Information", "Commits" and "Sources".
- "Settings" is always located at the bottom.
- The order of the navigation elements should be consistent for all subpages.
- Icons for plugins and submenus are still missing.

## Buttons

### Standard Buttons

Standard Buttons are using the full base colors.

Primary

Link

Info

Success

Warning

Danger

### Disabled buttons

Disabled buttons are using 25% of the base colors.

Primary

Link

Info

Success

Warning

Danger

### Hovered buttons

The hover color of each button is 10% darker than the base color.

Primary

Link

Info

Success

Warning

Danger

### Active buttons

The active color of each button is 20% darker than the base color.

Primary

Link

Info

Success

Warning

Danger

### Button groups and addons

- If buttons are part of the same functional group they can be displayed as "addon buttons".
- Avoid buttons sticking together without being addon buttons.
- If you don't want buttons to be addons, please place enough space between them.
- In cases where just the first button is visible and others might be added later in the process, or buttons aren't part of the same functional group, "grouped buttons" can be used.
- If the contents of buttons have a direct connection (like "Create" and "Delete") they should be placed next to each other.

##### Button addon

Run

Store

##### Button group

Add Admin Group

Delete Admin Group

### Pagination

##### Disabled pagination

Disabled navigation buttons are either grey or light blue.

##### Active pagination

Active navigation buttons are either white or blue (100% tone of info/link color).
The buttons containing the page numbers should have the same width, even when reaching triple digits. For this a width of 80px is necessary.

### Create

"Create" buttons at the top of pages should always be positioned on the right side.
Create buttons at the end of a page should be full-width and complemented with a border.

### Submit

When a primary action like a "submit" button for a form is used, it should be placed on the bottom right of the page.

### Add and delete

Icons are added before the text to mark these buttons as special elements.

### Button texts

Button letterings should always be precise. Example: Use "create user" instead of "create" for button lettering.

## Miscellaneous elements

### Modals

Even if the content of the modals differs, they all should use the same basic classes `.modal-content` and `.modal-card` to ensure a constant layout. Buttons inside the modals should use the standard button formats.

### Merge pull request

Do you really want to merge?

Cannot be merged automatically

#### How to merge source branch into target branch

1. Make sure your workspace is clean and checkout target branch

    git checkout master

2. Update workspace

    git pull

3. Merge source branch

    git merge feature/e

4. Resolve merge conflicts and add corrected files to index

    git add <conflict file>

5. Commit

    git commit -m "Merge feature/e into master"

6. Push your merge

    git push

### Standard tables

Titles inside the tables should be in bold letters.

Name | G1
Description | Awesome
Type | xml
Creation Date | 5 days ago
Last Modified | 15 minutes ago

### Group and user tables

Special tables can be used for group- or user-lists. Colors at the left side could display roles, for example green = normal user, yellow = admin.

Username | Display Name | E-Mail | Admin
--- | --- | --- | ---
anonymous | SCM Anonymous | scm-anonymous@scm-manager.org |
dhuchthausen | Daniel Huchthausen | daniel.huchthausen@cloudogu.com |
fscholdei | Florian Scholdei | florian.scholdei@cloudogu.com |

### Forms

If possible, forms should be divided into two columns to get a better grasp of the content. It is recommended to divide unrelated content with horizontal lines.
Realm Description
Date Format
Plugin URL
Default Namespace Strategy
Enabled XSRF Protection
Enable Repository Archive
Disable Grouping Grid
Anonymous Access Enabled
Skip Failed Authenticators

### Radio buttons

Radio buttons should have enough space between them and the labels.

## Add new Permission

User Permission Group Permission

### Select

Select elements should always contain placeholder texts.

### Headlines

Subheadlines should only be used if there is reasonable content for them.

# Users

## Create, read, update and delete users

### Tags

Tags can use background in all full base colors.
tip OPEN Warning

### Statistics

Already done but still in review? Add later?

### Notifications

Notification are using the full base colors.
Primary/Success
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Info/Link
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Success
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Warning
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Danger
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

## Examples of use

### Display of users (e.g. changesets)

Use tags and different font-weights to visually structure information.

Sebastian Sdorra s.sdorra@gmail.com

Changeset e7468dd was committed 2 months ago

### Complex screens (e.g. pull requests)

Screens with a big bunch of information should be carefully structured to help the user with orientation.

- Make sure areas with different functionalities are clearly separated (use horizontal lines, boxes and/or bigger gaps between them).
- Buttons with different actions should have different colors.
- The "reject pull request" and "Merge pull request" buttons are good examples for a meaningful usage of addon buttons.
- Information belonging together should be placed next to each other (for example the user who did the last edit and the date of the last edit).
- Make sure important states like "open" are properly marked. For example, with tags.

# #1 Merge-Conflicts

Edit pull request
feature/e master
OPEN
Hier gibt es Merge Konflikte
msuewer a month ago

- Comments
- Commits
- Diff

msuewer a month ago
Testkommentar

msuewer a month ago
das c ist falsch!

### Group Member List

Is there a new version of it which is still in review? Add later?

Members

- sdorra
- pczora
- pfeuffer
- ischindler
- mkarray