diff --git a/gradle/changelog/highcontrast_colors_styleguide.yaml b/gradle/changelog/highcontrast_colors_styleguide.yaml new file mode 100644 index 0000000000..2ad83660e3 --- /dev/null +++ b/gradle/changelog/highcontrast_colors_styleguide.yaml @@ -0,0 +1,2 @@ +- type: added + description: Add secondary color gradations to styleguide ((#1944)[https://github.com/scm-manager/scm-manager/pull/1944]) diff --git a/scm-ui/ui-styles/public/_styleguide.html b/scm-ui/ui-styles/public/_styleguide.html index 942caca161..59583577d4 100644 --- a/scm-ui/ui-styles/public/_styleguide.html +++ b/scm-ui/ui-styles/public/_styleguide.html @@ -22,347 +22,428 @@ SOFTWARE. --> -
-
-
- 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

- -
+
+
+
+ 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. -
    • -
-
- - +
+

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%)ClassColor (100%)Color (75%)Color (50%)Color (25%)
.has-background-dark
- .has-background-dark-75
- .has-background-dark-50
- .has-background-dark-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-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-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-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-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-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		  -   -   -   + + .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 TextClassColor
.has-text-dark
.has-background-secondary-least
 
.has-background-secondary-less
 
.has-background-secondary
 
.has-background-secondary-more
 
.has-background-secondary-most
 
+

Text

+ + + + + + + + + + - + - + - + - + - - + - -
ClassText
.has-text-dark
 Beispieltext
.has-text-info
.has-text-info
 Beispieltext
.has-text-link
.has-text-link
 Beispieltext
.has-text-primary
.has-text-primary
 Beispieltext
.has-text-success
.has-text-success
 Beispieltext
.has-text-warning Attention: Has color #FFB600 because of readability issues with the original color #ffdd57. + + .has-text-warning + + Attention: Has color #FFB600 because of readability issues with the original color #ffdd57. Beispieltext
.has-text-danger
.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.
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassColor
.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?
+
+
+
+
+
-

Layout

-
-
-

Hero & Main Navigation (Tab-based)

-
May contain mobile hamburger menu in the future?
+
+
SCM-Manager
-
-
-
-
-
-
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.
    • -
-
+ +
+
+
+
+
+
+

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

Icons

+
+ The following icons have a global significance and should only be used in connection with certain functions. +
+
+ - - + + - -
Icon Name Meaning
@@ -990,383 +1071,394 @@ retweet Compare
+ + +
+
+
+
+
+

Buttons

+
+
+

Standard Buttons

+
Standard Buttons are using the full base colors.
+
+
+
+
+
+

Primary

+

Link

+

Info

+

Success

+

Warning

+

Danger

+
+
+
-
-
-
-

Buttons

-
-
-

Standard Buttons

-
Standard Buttons are using the full base colors.
-
-
-
-
+
+

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

-
-
-
-
-
-
-

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

- -

-

- -

-

- -

+

Primary

+

Link

+

Info

+

Success

+

Warning

+

Danger

-
-
-
-

Tables

-
-
-

Standard Tables

-
Titles inside the tables should be in bold letters.
- - +
+

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.
+
+ @@ -1387,69 +1479,75 @@ - -
Name G1Last 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.
    • +
-
-

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 + _anonymous + SCM Anonymous scm-anonymous@scm-manager.org
dhuchthausen + + dhuchthausen Daniel Huchthausen daniel.huchthausen@cloudogu.com
fscholdei + + fscholdei Florian Scholdei florian.scholdei@cloudogu.com
- - + +
+ + - - + + @@ -1457,1068 +1555,534 @@ - -
Active Branches
feature/file_delete - Last commit - - + Last commit + + - - - + + +
test/edit_binary - Last commit - - + 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

-
+
+
+
+

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

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.

-
- -
+
+

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

+
+
+
-
-
-
-

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 -

-
-
+
+

Breadcrumb

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

Complex Screens (e.g. Pull Requests)

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

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

+ +
+
+
+
+

Card Column

+
+
+
+
+
+

+ Logo +

+
+
+
+
+

Git

+
+
+
+
-
-
-
- -
+
+
+ 2.13.0-SNAPSHOT +
+
+ Cloudogu GmbH
-
-
-
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
    • -
-
-
-
-
-
-
-
- -
-
-
-
-

- +

+
+
+
+
+

+ 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
-
-
- -
-
-
-
-
- - - Jawad Mack - - - - - - -   - outdated - -
-
-

Maybe you can get a more elegant solution

-
+
+
+ +
+
+
+

+ Logo +

+
+
+
+
+

Review

+

Depict a review process with pull requests

-
-
- - - - - - - - - - - - +
+
+ + + + + +
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
- -
-
-
- - +
+
+ 2.6.0
-
-
-
-
-
-
- -
-
+
+ Cloudogu GmbH
@@ -2527,4 +2091,651 @@
-
+
+

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

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

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
    • +
+
+
+
+
+
+
+
+ +
+
+
+
+

+ +

+
+
+

+ +

+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+