# SCM-Manager Styleguide

# 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.

## Content

- Colors
- Layout
- Typography
- Buttons
- Tables
- Form Controls
- Miscellaneous Elements
- Examples of Use

## 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

## Layout

## Typography

### Headlines

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

# Users

## Create, read, update and delete users

### Icons

The following icons have a global significance and should only be used in connection with certain functions.

Icon | Name | Meaning
--- | --- | ---
| `code-branch` | Branches
| `tags` | Tags
| `exchange-alt` | Commits, Convert type
| `code` | Code, Sources
| `code-branch fa-rotate-180` | Pull Requests
| `cog` | Settings
| `star` | Favorite repository
| `book-reader` | Readme
| `info-circle` | Information
| `trash` | Delete
| `times` | Delete, Remove, Disapprove
| `plus` | Add, Subscribe
| `key` | Signature
| `tag` | Single Tag
| `circle-notch` | No status available
| `home` | Home, Internal user
| `link` | Copy permalink
| `upload` | Upload
| `download` | Download, Install
| `folder` | Folder
| `folder` | Subrepository, submodule, externals
| `file` | File
| `user-clock` | Annotate
| `history` | History
| `search-plus` | Open in Fullscreen
| `edit` | Edit
| `eye-slash` | Collapse
| `eye` | Collapse
| `columns` | Side-by-side view
| `align-left` | Combined view
| `sort-alpha-down` | Sort alphabetically
| `sort-alpha-down-alt` | Sort alphabetically reverse
| `sort-amount-down-alt` | Sort descending
| `sort-amount-down` | Sort ascending
| `user` | User, One reviewer
| `user-friends` | Two reviewers
| `users` | More reviewers
| `exclamation-triangle` | Problem detected, e.g. target branch deleted, conflicts
| `minus` | Unsubscribe
| `check` | Approve
| `clock` | Outdated
| `bolt` | System
| `reply` | Reply
| `tasks` | Task
| `comment-dots` | Comment
| `check-circle` | Mark as done, Status successful
| `question-circle` | Help text
| `times-circle` | Status failed
| `arrow-circle-up` | Upload
| `arrow-circle-down` | Download
| `archive` | Archive
| `globe-americas` | External group
| `puzzle-piece` | Plugins
| `sync-alt` | Update

## 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

### Loading Buttons

While an asynchronous process is active, a appropriate button may contain a loading spinner. The running process should be indicate by a short message e.g. "Exporting". A tooltip should also be given.

Primary

Link

Info

Success

Warning

Danger

### Outlined Buttons

Should be used for secondary actions.

Primary

Link

Info

Success

Warning

Danger

### Icon Buttons

Alternative to the normal button with minimum space requirements. Should always get a tooltip.

### 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 "Commits" and "Sources") they should be placed next to each other.
- The function with the higher priority should be positioned on the right.

#### Button Addon

#### Button 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

A submit button should be used when submitting an form or action, usually combined with a refresh. When a primary action like a "submit" button for a form is used, it should be placed on the bottom right of the page.

### Special

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

- Use of the AddButton only when adding elements directly visually
- The trash icon does not appear within a delete button

### Button Texts

Button texts are treated like headings. Button lettering should always be precise. Example: Use "Create User" instead of "Create" for button lettering.

## Tables

### 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

### Card Tables

Special tables can be used for lists of groups, users, tags etc.

- In general, use icons instead of buttons within the `.card-table`.
- Use icons and a darker background in a specific action column.
- Colors at the left side could display roles, for example green = active user, yellow = not active.

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

Active Branches
feature/file_delete Last commit 2 days ago |
test/edit_binary Last commit 5 days ago |

## Form Controls

### Forms

A form contains a set of related input fields.

- Fields should always have a label.
- If possible, forms should be divided into two columns to get a better grasp of the content.
- Similar content should appear next to each other.
- It is recommended to divide unrelated content with horizontal lines.

Realm Description
Date Format
Plugin Center URL
Namespace Strategy
Enabled XSRF Protection
Enabled XSRF Protection

### Input

Name

### Textarea

Description

### Dropdown

Select elements should always contain placeholder texts, also for preselected options.
Permitted Role
Select branch

### Checkbox

External
Active
Indeterminate

### Radio Buttons

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

## Add New Permission

User Permission Group Permission

### File Upload

Dump File
Select File 2fRNLPdVq2.tar.gz

### Inline Member Field

Reviewers:
Emil Boyce
Jawad Mack

## Miscellaneous Elements

### Boxes

Border around boxes should set the focus on an area that is not simply a notification.

- Borders can either be created by `.box` or a separate border in conjunction with a border-radius of 5px.
- The main colors with 25-75% opacity should be used.

### Community Support

Contact the SCM-Manager support team for questions about SCM-Manager, to report bugs or to request features through the official channels.

Contact Our Team

Delete Branch
Deleted branches cannot be restored.

### Breadcrumb

The breadcrumb is used for a path-depth view for sources.

### Card Column

Git

2.13.0-SNAPSHOT
Cloudogu GmbH

Repository Template

Enable creators of repositories to choose a template repository upon initialization. Repositories with a specific configuration file are marked as templates and will be automatically detected by SCM-Manager.

1.1.0-SNAPSHOT
Sebastian Sdorra

Review

Depict a review process with pull requests

2.6.0
Cloudogu GmbH

### Date

Dates are preferably shown relatively and by hovering with an absolute date.

over 10 years ago

3 months ago

less than a minute ago

1 day ago

### Group Member List

- mmuster
- belefant
- aschultz
- zgummi
- nobody

### Loading

loading plugin information

### 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.

### Tags

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

### Tooltips

Tooltips add context to the element and should follow rules for UX writing.

- Use tooltips instead of titles for buttons.
- Do not set an HTML title if a tooltip is also defined.
- The font-weight of tooltips should be normal.

### Popover

Popover can be used similar to the tooltips.

# Signatures

Key ID: 0x0ABC1DEF234GH567
Status: verified
Key Owner: fscholdei
Contacts:
- Florian Scholdei <florian.scholdei@cloudogu.com>

### Modals

A modal is intended to be used when it blocks the rest of the interaction with the application or puts a focus on a part of the UI.

- Even if the content of the modals differs, they all should use the same basic class `.modal-card` to ensure a constant layout.
- Buttons inside the modals should use the standard button formats.
- If a modal footer contains two action buttons, the critical one should be on the left. In addition, they should differ in color.
- Modals without actions do not require a footer.
- Normal modals have a gray header. Otherwise the main colors with 25-75% opacity should be used.

Reject Pull Request

Do you really want to reject this pull request?

Cannot be merged automatically

Existing conflicts are shown in the tab 'Conflicts'.

#### 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

### Toasts

# New Changes

The underlying Pull-Request has changed. Press reload to see the changes.

Warning: Non saved modification will be lost.

## Examples of Use

### Display of Users (e.g. Changesets)

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

#### added system property to disable extraction of core plugins

Changeset 41cc612 was committed over 2 years ago

Committed 41cc612 over 2 years ago

Authored by Sebastian Sdorra

### 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.

# #1497 Migrate integration tests to bdd 0 / 1 tasks done

feature/bdd develop
OPEN
Migrates the existing e2e tests towards a cucumber bdd-style and utilizes the integration-test-runner package.
Author:
Emil Boyce
11 days ago
Reviewers:

- Jawad Mack

- Comments
- Commits
- Diff

Jawad Mack a month ago outdated

Maybe you can get a more elegant solution

Emil Boyce 6 days ago

Changelog updated

Ebrahim Mcneil 12 minutes ago Task

Migrate store name

Comment Task