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

Background

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 		       
.has-background-info
.has-background-info-75
.has-background-info-50
.has-background-info-25 		       
.has-background-link
.has-background-link-75
.has-background-link-50
.has-background-link-25 		       
.has-background-primary
.has-background-primary-75
.has-background-primary-50
.has-background-primary-25 		       
.has-background-success
.has-background-success-75
.has-background-success-50
.has-background-success-25 		       
.has-background-warning
.has-background-warning-75
.has-background-warning-50
.has-background-warning-25 		       
.has-background-danger
.has-background-danger-75
.has-background-danger-50
.has-background-danger-25 		       
The has-background-secondary-* color gradations are relative to the color scheme. A contrasting tone is light in the light and dark in dark scheme.
Class Color
.has-background-secondary-least
  
.has-background-secondary-less
  
.has-background-secondary
  
.has-background-secondary-more
  
.has-background-secondary-most
  

Text

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
The has-text-secondary-* color gradations are relative to the color scheme. A contrasting tone is light in the light and dark in dark scheme.
Class Color
.has-text-secondary-least
 Beispieltext
.has-text-secondary-less
 Beispieltext
.has-text-secondary
 Beispieltext
.has-text-secondary-more
 Beispieltext
.has-text-secondary-most
 Beispieltext

Layout

Hero & Main Navigation (Tab-based)

May contain mobile hamburger menu in the future?
SCM-Manager

Secondary Navigation

  • Plugins are always listed after "Information", "Branches", "Tags" and "Code".
  • "Settings" is always located at the bottom.
  • The order of the navigation elements should be consistent for all subpages.
  • Each entry should have an icon. Subnavigation entries have no icons.

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
bell Notifications
shield-alt Alert
retweet Compare

Buttons

Standard Buttons

Standard Buttons are using the full base colors.

Primary

Link

Info

Success

Warning

Danger

Default

Disabled Buttons

Disabled buttons are using 25% of the base colors.

Primary

Link

Info

Success

Warning

Danger

Default

Hovered Buttons

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

Primary

Link

Info

Success

Warning

Danger

Default

Active Buttons

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

Primary

Link

Info

Success

Warning

Danger

Default

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

Default

Outlined Buttons

Should be used for secondary actions.

Primary

Link

Info

Success

Warning

Danger

Default

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
test/edit_binary Last commit

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.

Input

Textarea

Dropdown

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

Checkbox

Radio Buttons

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

Add New Permission

File Upload

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 Icon

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

Logo

Git

2.13.0-SNAPSHOT
Cloudogu GmbH

Logo

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

Logo

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.

Group Member List

Loading

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

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.
Sebastian Sdorra

added system property to disable extraction of core plugins

Changeset 41cc612 was committed

Committed 41cc612

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
 
Reviewers:
  • Jawad Mack