2019-10-10 10:41:25 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
2019-10-10 15:32:22 +02:00
< title > SCM-Manager Styleguide< / title >
2019-10-10 10:41:25 +02:00
< meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "theme-color" content = "#000000" >
< link rel = "shortcut icon" href = "https://next-scm.cloudogu.com/scm/favicon.ico" >
< script type = "application/javascript" src = "/ui-styles.bundle.js" > < / script >
< / head >
< body >
< noscript >
You need to enable JavaScript to run this app.
< / noscript >
< div id = "root" >
< div >
< div class = "App" >
< section class = "section" >
< div class = "container" >
2019-10-10 15:32:22 +02:00
< h1 class = "title is-1" > Styleguide SCM-Manager 2< / h1 >
2019-10-10 10:41:25 +02:00
< div class = "notification is-info" > < strong > Important:< / strong > < br >
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. < br >
< / div >
< br >
< br >
< h2 class = "title is-3" > Colors< / h2 >
< hr >
< div class = "notification content" > Overview for all main colors with examples for lighter nuances. < br >
< ul >
< li > 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).< / li >
< li > 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.< / li >
< / ul >
< / div >
< table class = "table is-bordered" >
< thead >
< tr >
< th > Class < / th >
< th > Color (100%) < / th >
< th > Color (75%) < / th >
< th > Color (50%) < / th >
< th > Color (25%) < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > .has-background-dark< / code > < br >
< code > .has-background-dark-75< / code > < br >
< code > .has-background-dark-50< / code > < br >
< code > .has-background-dark-25< / code > < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-dark" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#363636 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-dark-75" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#686868 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-dark-50" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#9a9a9a < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-dark-25" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#cdcdcd < / td >
< / tr >
< tr >
< td > < code > .has-background-info< / code > < br >
< code > .has-background-info-75< / code > < br >
< code > .has-background-info-50< / code > < br >
< code > .has-background-info-25< / code > < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-info" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#33b2e8 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-info-75" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#66c5ee < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-info-50" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#99d8f3 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-info-25" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ccecf9 < / td >
< / tr >
< tr >
< td > < code > .has-background-link< / code > < br >
< code > .has-background-link-75< / code > < br >
< code > .has-background-link-50< / code > < br >
< code > .has-background-link-25< / code > < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-link" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#33b2e8 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-link-75" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#66c5ee < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-link-50" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#99d8f3 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-link-25" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ccecf9 < / td >
< / tr >
< tr >
< td > < code > .has-background-primary< / code > < br >
< code > .has-background-primary-75< / code > < br >
< code > .has-background-primary-50< / code > < br >
< code > .has-background-primary-25< / code > < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-primary" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#00d1df < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-primary-75" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#40dde7 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-primary-50" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#7fe8ef < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-primary-25" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#bff3f7 < / td >
< / tr >
< tr >
< td > < code > .has-background-success< / code > < br >
< code > .has-background-success-75< / code > < br >
< code > .has-background-success-50< / code > < br >
< code > .has-background-success-25< / code > < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-success" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#00c79b < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-success-75" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#40d5b4 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-success-50" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#7fe3cd < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-success-25" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#bff1e6 < / td >
< / tr >
< tr >
< td > < code > .has-background-warning< / code > < br >
< code > .has-background-warning-75< / code > < br >
< code > .has-background-warning-50< / code > < br >
< code > .has-background-warning-25< / code > < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-warning" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ffdd57 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-warning-75" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ffe681 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-warning-50" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ffeeab < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-warning-25" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#fff6d5 < / td >
< / tr >
< tr >
< td > < code > .has-background-danger< / code > < br >
< code > .has-background-danger-75< / code > < br >
< code > .has-background-danger-50< / code > < br >
< code > .has-background-danger-25< / code > < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-danger" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ff3860 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-danger-75" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ff6a88 < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-danger-50" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ff9baf < / td >
2019-10-10 15:32:22 +02:00
< td > < span class = "button has-background-danger-25" > & nbsp< / span > < br >
2019-10-10 10:41:25 +02:00
< br >
#ffcdd7 < / td >
< / tr >
< / tbody >
< / table >
< br >
< br >
< table class = "table is-bordered" >
< thead >
< tr >
< th > Class < / th >
< th > Text < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > .has-text-dark< / code > < br > < / td >
< td > < span class = "has-text-dark" > Beispieltext< / span > < / td >
< / tr >
< tr >
< td > < code > .has-text-info< / code > < br > < / td >
< td > < span class = "has-text-info" > Beispieltext< / span > < / td >
< / tr >
< tr >
< td > < code > .has-text-link< / code > < br > < / td >
< td > < span class = "has-text-link" > Beispieltext< / span > < / td >
< / tr >
< tr >
< td > < code > .has-text-primary< / code > < br > < / td >
< td > < span class = "has-text-primary" > Beispieltext< / span > < / td >
< / tr >
< tr >
< td > < code > .has-text-success< / code > < br > < / td >
< td > < span class = "has-text-success" > Beispieltext< / span > < / td >
< / tr >
< tr >
< td > < code > .has-text-warning< / code > < span class = "tag is-light" > Attention: Has color #FFB600 because of readability issues with the original color #ffdd57.< / span > < / td >
< td > < span class = "has-text-warning" > Beispieltext< / span > < / td >
< / tr >
< tr >
< td > < code > .has-text-danger< / code > < br > < / td >
< td > < span class = "has-text-danger" > Beispieltext< / span > < / td >
< / tr >
< / tbody >
< / table >
< br >
< br >
< h2 class = "title is-3" > Hero & Main Navigation (Tab-based)< / h2 >
< hr >
< div class = "notification" > < i class = "has-text-danger" > May contain mobile hamburger menu in the future?< / i > < / div >
< / div >
< / section >
< section class = "hero is-dark is-small" >
< div class = "hero-body" >
< div class = "container" >
< div class = "columns is-vcentered" >
< div class = "column" > < img src = "images/logo.png" alt = "SCM-Manager" > < / div >
< / div >
< / div >
< / div >
< div class = "hero-foot" >
< div class = "container" >
< nav class = "tabs is-boxed" >
< ul >
2019-10-10 15:32:22 +02:00
< li > < a href = "#" > Repositories< / a > < / li >
< li > < a href = "#" > Users< / a > < / li >
< li > < a href = "#" > Groups< / a > < / li >
< li > < a href = "#" > Administration< / a > < / li >
< li > < a href = "#" > Logout< / a > < / li >
2019-10-10 10:41:25 +02:00
< / ul >
< / nav >
< / div >
< / div >
< / section >
< section class = "section" >
< div class = "container" >
< h2 class = "title is-3" > Sidebar Navigation< / h2 >
< hr >
< div class = "columns" >
< div class = "column is-three-quarters " >
< div class = "notification" >
< div class = "content" >
< ul >
< li > Plugins are always listed after "Information", "Commits" and "Sources".< / li >
< li > "Settings" is always located at the bottom.< / li >
< li > The order of the navigation elements should be consistent for all subpages.< / li >
< li class = "has-text-danger" > < i > Icons for plugins and submenus are still missing.< / i > < / li >
< / ul >
< br >
< / div >
< / div >
< / div >
< div class = "column is-one-quarter is-clipped" >
< aside class = "menu" >
< div >
2019-10-10 15:32:22 +02:00
< p class = "menu-label" > Repository Navigation< / p >
2019-10-10 10:41:25 +02:00
< ul class = "menu-list" >
2019-10-10 15:32:22 +02:00
< li > < a class = "is-active" href = "#" > < i class = "fas fa-info-circle fa-fw" > & nbsp< / i > Information< / a > < / li >
< li > < a href = "#" > < i class = "fas fa-code-branch fa-fw" > & nbsp< / i > Branches< / a > < / li >
< li > < a href = "#" > < i class = "fas fa-exchange-alt fa-fw" > & nbsp< / i > Commits< / a > < / li >
< li > < a href = "#" > < i class = "fas fa-code fa-fw" > & nbsp< / i > Sources< / a > < / li >
< li > < a href = "#" > < i class = "fas fa-code-branch fa-rotate-180 fa-fw" > & nbsp< / i > Pull Requests< / a > < / li >
< li > < a href = "#" > < i class = "fas fa-chart-pie fa-fw" > & nbsp< / i > Statistics< / a > < / li >
< li > < a href = "#" > < i class = "fas fa-cog fa-fw" > & nbsp< / i > Settings< / a > < / li >
2019-10-10 10:41:25 +02:00
< / ul >
< / div >
< / aside >
< / div >
< / div >
< / div >
< / section >
< section class = "section" >
< div class = "container" >
< h2 class = "title is-3" > Buttons< / h2 >
< hr >
< br >
< br >
< h3 class = "subtitle is-4" > Standard Buttons< / h3 >
< div class = "notification" > Standard Buttons are using the full base colors.< / div >
< div class = "level" >
< div class = "level-left" > < / div >
< div class = "level-right" >
< div class = "level-item" >
< div class = "field is-grouped" >
< p class = "control" > < a class = "button is-primary" > Primary< / a > < / p >
< p class = "control" > < a class = "button is-link" > Link< / a > < / p >
< p class = "control" > < a class = "button is-info" > Info< / a > < / p >
< p class = "control" > < a class = "button is-success" > Success< / a > < / p >
< p class = "control" > < a class = "button is-warning" > Warning< / a > < / p >
< p class = "control" > < a class = "button is-danger" > Danger< / a > < / p >
< / div >
< / div >
< / div >
< / div >
< br >
< br >
< br >
< h3 class = "subtitle is-4" > Disabled buttons< / h3 >
< div class = "notification" > Disabled buttons are using 25% of the base colors.< / div >
< div class = "level" >
< div class = "level-left" > < / div >
< div class = "level-right" >
< div class = "level-item" >
< div class = "field is-grouped" >
< p class = "control" > < a class = "button is-primary" disabled = "" > Primary< / a > < / p >
< p class = "control" > < a class = "button is-link" disabled = "" > Link< / a > < / p >
< p class = "control" > < a class = "button is-info" disabled = "" > Info< / a > < / p >
< p class = "control" > < a class = "button is-success" disabled = "" > Success< / a > < / p >
< p class = "control" > < a class = "button is-warning" disabled = "" > Warning< / a > < / p >
< p class = "control" > < a class = "button is-danger" disabled = "" > Danger< / a > < / p >
< / div >
< / div >
< / div >
< / div >
< br >
< br >
< br >
< h3 class = "subtitle is-4" > Hovered buttons< / h3 >
< div class = "notification" > The hover color of each button is 10% darker than the base color.< / div >
< div class = "level" >
< div class = "level-left" > < / div >
< div class = "level-right" >
< div class = "level-item" >
< div class = "field is-grouped" >
< p class = "control" > < a class = "button is-primary is-hovered" > Primary< / a > < / p >
< p class = "control" > < a class = "button is-link is-hovered" > Link< / a > < / p >
< p class = "control" > < a class = "button is-info is-hovered" > Info< / a > < / p >
< p class = "control" > < a class = "button is-success is-hovered" > Success< / a > < / p >
< p class = "control" > < a class = "button is-warning is-hovered" > Warning< / a > < / p >
< p class = "control" > < a class = "button is-danger is-hovered" > Danger< / a > < / p >
< / div >
< / div >
< / div >
< / div >
< br >
< br >
< br >
< h3 class = "subtitle is-4" > Active buttons< / h3 >
< div class = "notification" > The active color of each button is 20% darker than the base color.< / div >
< div class = "level" >
< div class = "level-left" > < / div >
< div class = "level-right" >
< div class = "level-item" >
< div class = "has-text-right" >
< div class = "field is-grouped" >
< p class = "control" > < a class = "button is-primary is-active" > Primary< / a > < / p >
< p class = "control" > < a class = "button is-link is-active" > Link< / a > < / p >
< p class = "control" > < a class = "button is-info is-active" > Info< / a > < / p >
< p class = "control" > < a class = "button is-success is-active" > Success< / a > < / p >
< p class = "control" > < a class = "button is-warning is-active" > Warning< / a > < / p >
< p class = "control" > < a class = "button is-danger is-active" > Danger< / a > < / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< br >
< br >
< br >
< h3 class = "subtitle is-4" > Button groups and addons< / h3 >
< div class = "notification content" >
< ul >
< li > If buttons are part of the same functional group they can be displayed as "addon buttons".< / li >
< li > Avoid buttons sticking together without being addon buttons.< / li >
< li > If you don't want buttons to be addons, please place enough space between them.< / li >
< li > 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.< / li >
< li > If the contents of buttons have a direct connection (like "Create" and "Delete") they should be placed next to each other.< / li >
< / ul >
< / div >
< h5 > Button addon< / h5 >
< br >
< div class = "field has-addons" >
< p class = "control" > < a class = "button is-primary" > < span > Run< / span > < / a > < / p >
< p class = "control" > < a class = "button" > < span > Store< / span > < / a > < / p >
< / div >
< br >
< h5 > Button group< / h5 >
< br >
< div class = "field is-grouped" >
2019-10-10 15:32:22 +02:00
< p class = "control" > < a class = "button is-primary" > < span class = "icon" > < i class = "fas fa-plus" >  </i></span> Add Admin Group < / a > < / p >
< p class = "control" > < a class = "button is-warning" > < span class = "icon" > < i class = "fa fa-times" >  </i></span> Delete Admin Group< / a > < / p >
2019-10-10 10:41:25 +02:00
< / div >
< br >
< br >
< h3 class = "subtitle is-4" > Pagination< / h3 >
< h5 > Disabled pagination< / h5 >
< br >
< div class = "notification" > Disabled navigation buttons are either grey or light blue. < / div >
< nav class = "pagination is-centered" aria-label = "pagination" >
< button type = "button" disabled = "disabled" class = "button is-default pagination-previous" > Previous< / button >
< button type = "button" disabled = "disabled" class = "button is-default pagination-next" > Next< / button >
< ul class = "pagination-list" >
< li >
< button type = "button" disabled = "disabled" class = "button is-default pagination-link is-current" > 1< / button >
< / li >
< / ul >
< / nav >
< br >
< br >
< h5 > Active pagination< / h5 >
< br >
< div class = "notification" > Active navigation buttons are either white or blue (100% tone of info/link color). < br >
The buttons containing the page numbers should have the same width, even when reaching triple digits. For this a width of 80px is necessary. < / div >
< nav class = "pagination is-centered" aria-label = "pagination" >
< button type = "button" class = "button is-default pagination-previous" > Previous< / button >
< button type = "button" class = "button is-default pagination-next" > Next< / button >
< ul class = "pagination-list" >
< li >
< button type = "button" class = "button is-default pagination-link" > 1< / button >
< / li >
< li >
< button type = "button" disabled = "" class = "button is-default pagination-link is-current" > 2< / button >
< / li >
< li > < span class = "pagination-ellipsis" > …< / span > < / li >
< li >
< button type = "button" class = "button is-default pagination-link" > 457< / button >
< / li >
< / ul >
< / nav >
< br >
< br >
< h3 class = "subtitle is-4" > Create< / h3 >
< div class = "notification" > "Create" buttons at the top of pages should always be positioned on the right side. < br >
Create buttons at the end of a page should be full-width and complemented with a border.< / div >
< div class = "has-text-right" >
< button type = "submit" class = "button is-primary" > Create repository< / button >
< / div >
< div class = "has-text-centered t-spacing-0-1-18" >
< button type = "submit" class = "button is-primary" > Create repository< / button >
< / div >
< br >
< br >
< h3 class = "subtitle is-4" > Submit< / h3 >
< div class = "notification" > When a primary action like a "submit" button for a form is used, it should be placed on the bottom right of the page.< / div >
< div class = "level" >
< div class = "level-left" > < / div >
< div class = "level-right" >
< div class = "level-item" >
< div class = "field is-grouped" >
< p class = "control" >
< button class = "button" > Cancel< / button >
< / p >
< p class = "control" >
< button type = "submit" class = "button is-primary" > Submit< / button >
< / p >
< / div >
< / div >
< / div >
< / div >
< br >
< br >
< br >
< h3 class = "subtitle is-4" > Add and delete< / h3 >
< div class = "notification" > Icons are added before the text to mark these buttons as special elements.< / div >
< div class = "level" >
< div class = "level-left" > < / div >
< div class = "level-right" >
< div class = "level-item" >
< div class = "field is-grouped" >
< p class = "control" >
2019-10-10 15:32:22 +02:00
< button type = "button" class = "button is-primary" > < span class = "icon" > < i class = "fa fa-plus" >  </i></span> Add< / button >
2019-10-10 10:41:25 +02:00
< / p >
< p class = "control" >
2019-10-10 15:32:22 +02:00
< button type = "button" class = "button is-warning" > < span class = "icon" > < i class = "fa fa-times" >  </i></span> Delete< / button >
2019-10-10 10:41:25 +02:00
< / p >
< / div >
< / div >
< / div >
< / div >
< br >
< br >
< br >
< h3 class = "subtitle is-4 " > Button texts< / h3 >
< div class = "notification " > Button letterings should always be precise. Example: Use "create user" instead of "create" for button lettering. < / div >
< div class = "level" >
< div class = "level-left" > < / div >
< div class = "level-right" >
< div class = "level-item" >
< div class = "field is-grouped" >
< p class = "control" >
< button type = "submit" class = "button is-primary" > Create repository< / button >
< / p >
< p class = "control" >
< button type = "submit" class = "button is-primary" > Create user< / button >
< / p >
< p class = "control" >
< button type = "submit" class = "button is-primary" > Create group< / button >
< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< section class = "section" >
< div class = "container" >
< h2 class = "title is-3" > Miscellaneous elements< / h2 >
< hr >
< h3 class = "subtitle is-4" > Modals< / h3 >
< div class = "notification" > Even if the content of the modals differs, they all should use the same basic classes < code > .modal-content< / code > and < code > .modal-card< / code > to ensure a constant layout. Buttons inside the modals should use the standard button formats.< / div >
< div class = "modal-content" >
< div class = "box" >
< article class = "media" >
< div class = "media-content" >
< div class = "content" >
< h3 > Merge pull request< / h3 > < p > Do you really want to merge?< / p >
< div class = "is-pulled-right" >
< div class = "field is-grouped" >
< p class = "control" > < button class = "button is-warning" href = "#" > Yes< / button > < / p >
2019-10-10 15:32:22 +02:00
< p class = "control" > < button class = "button" href = "#" > No< / button > < / p >
< / div >
2019-10-10 10:41:25 +02:00
< / div >
< / div >
< / div >
< / article >
< / div >
< / div > < br >
< br >
< div class = "modal-card" >
< header class = "modal-card-head" >
< p class = "modal-card-title has-text-danger" > Cannot be merged automatically< / p >
2019-10-10 15:32:22 +02:00
< button class = "delete" aria-label = "close" > & nbsp< / button >
2019-10-10 10:41:25 +02:00
< / header >
< section class = "modal-card-body" >
< div class = "content" >
< div >
< h4 > How to merge source branch into target branch< / h4 >
1. Make sure your workspace is clean and checkout target branch
< pre > < code > git checkout master< / code > < / pre >
2. Update workspace
< pre > < code > git pull< / code > < / pre >
3. Merge source branch
< pre > < code > git merge feature/e< / code > < / pre >
4. Resolve merge conflicts and add corrected files to index
< pre > < code > git add < conflict file> < / code > < / pre >
5. Commit
< pre > < code > git commit -m "Merge feature/e into master"< / code > < / pre >
6. Push your merge
< pre > < code > git push< / code > < / pre >
< / div >
< / div >
< / section >
< / div >
< br >
< br >
< h3 class = "subtitle is-4" > Standard tables< / h3 >
< div class = "notification" > Titles inside the tables should be in bold letters.< / div >
< table class = "table content" >
< tbody >
< tr >
< td class = "has-text-weight-semibold" > Name< / td >
< td > G1< / td >
< / tr >
< tr >
< td class = "has-text-weight-semibold" > Description< / td >
< td > Awesome< / td >
< / tr >
< tr >
< td class = "has-text-weight-semibold" > Type< / td >
< td > xml< / td >
< / tr >
< tr >
< td class = "has-text-weight-semibold" > Creation Date< / td >
< td > < span > 5 days ago< / span > < / td >
< / tr >
< tr >
< td class = "has-text-weight-semibold" > Last Modified< / td >
< td > < span > 15 minutes ago< / span > < / td >
< / tr >
< / tbody >
< / table >
< br >
< br >
< h3 class = "subtitle is-4" > Group and user tables< / h3 >
< div class = "notification" > 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. < / div >
< div class = "container" >
< table class = "card-table table is-hoverable is-fullwidth" >
< thead >
< tr >
< th class = "is-hidden-mobile" > Username< / th >
< th > Display Name< / th >
< th > E-Mail< / th >
< th class = "is-hidden-mobile" > Admin< / th >
< / tr >
< / thead >
< tbody >
< tr >
2019-10-10 15:32:22 +02:00
< td class = "is-hidden-mobile" > < a href = "#" > anonymous< / a > < / td >
< td > < a href = "#" > SCM Anonymous< / a > < / td >
< td > < a href = "#" > scm-anonymous@scm-manager.org< / a > < / td >
2019-10-10 10:41:25 +02:00
< td class = "is-hidden-mobile" > < input type = "checkbox" id = "admin1" readonly = "" > < / td >
< / tr >
< tr >
2019-10-10 15:32:22 +02:00
< td class = "is-hidden-mobile" > < a href = "#" > dhuchthausen< / a > < / td >
< td > < a href = "#" > Daniel Huchthausen< / a > < / td >
< td > < a href = "#" > daniel.huchthausen@cloudogu.com< / a > < / td >
2019-10-10 10:41:25 +02:00
< td class = "is-hidden-mobile" > < input type = "checkbox" id = "admin2" readonly = "" > < / td >
< / tr >
< tr class = "is-admin" >
2019-10-10 15:32:22 +02:00
< td class = "is-hidden-mobile" > < a href = "#" > fscholdei< / a > < / td >
< td > < a href = "#" > Florian Scholdei< / a > < / td >
< td > < a href = "#" > florian.scholdei@cloudogu.com< / a > < / td >
2019-10-10 10:41:25 +02:00
< td class = "is-hidden-mobile" > < input type = "checkbox" id = "admin3" readonly = "" checked = "" > < / td >
< / tr >
< / tbody >
< / table >
< / div >
< br >
< br >
< h3 class = "subtitle is-4" > Forms< / h3 >
< div class = "notification " > 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. < / div >
< div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< label class = "label" >
Realm Description
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right t-tooltip-0-1-10" data-tooltip = "Enter authentication realm description" > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "" value = "SONIA :: SCM Manager" >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< div class = "field" >
< label class = "label" >
Date Format
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip = "Moments date format. Please have a look at the momentjs documentation." > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "" value = "YYYY-MM-DD HH:mm:ss" >
< / div >
< / div >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< label class = "label" >
Plugin URL
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip = "The url of the plugin repository. Explanation of the placeholders: version = SCM-Manager Version; os = Operation System; arch = Architecture" > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "" value = "http://plugins.scm-manager.org/scm-plugin-backend/api/{version}/plugins?os={os}&arch={arch}&snapshot=false" >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< div class = "field" >
< label class = "label" >
Default Namespace Strategy
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right t-tooltip-0-1-10" data-tooltip = "The default namespace strategy" > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "" value = "sonia.scm.repository.DefaultNamespaceStrategy" >
< / div >
< / div >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field is-grouped" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" checked = "" >
Enabled XSRF Protection
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip = "Enable Xsrf Cookie Protection. Note: This feature is still experimental." > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< div class = "field is-grouped" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" >
Enable Repository Archive
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip = "Enable repository archives. A complete page reload is required after a change of this value." > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field is-grouped" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" >
Disable Grouping Grid
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip = "Disable repository Groups. A complete page reload is required after a change of this value." > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< div class = "field is-grouped" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" >
Anonymous Access Enabled
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right t-tooltip-0-1-10" data-tooltip = "Anonymous users have read access on public repositories." > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field is-grouped" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" >
Skip Failed Authenticators
2019-10-29 14:14:34 +01:00
< span class = "tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip = "Do not stop the authentication chain, if an authenticator finds the user but fails to authenticate the user." > < i class = "fa fa-question-circle has-text-info t-textinfo-0-1-11" > & nbsp< / i > < / span >
2019-10-10 10:41:25 +02:00
< / label >
< / div >
< / div >
< / div >
< / div >
< hr >
< / div >
< br >
< br >
< h3 class = "subtitle is-4" > Radio buttons< / h3 >
< div class = "notification" > Radio buttons should have enough space between them and the labels.< / div >
< div >
< h2 class = "subtitle" > Add new Permission< / h2 >
< form >
< div class = "control" >
< label class = "radio" >
< input type = "radio" name = "permission_scope" value = "USER_PERMISSION" checked = "" >
User Permission< / label >
< label class = "radio" >
< input type = "radio" name = "permission_scope" value = "GROUP_PERMISSION" >
Group Permission< / label >
< / div >
< / form >
< / div >
< br >
< br >
< br >
< h3 class = "subtitle is-4" > Select< / h3 >
< div class = "notification" > Select elements should always contain placeholder texts. < / div >
< div class = "field is-horizontal u-wrapper-0-1-21" >
< div class = "field-body" >
< div class = "field is-narrow" >
< div class = "control" >
< div class = "is-fullwidth select" >
< select >
< option > Select option< / option >
< option value = "develop" > develop< / option >
< option value = "master" > master< / option >
< / select >
< / div >
< / div >
< / div >
< / div >
< / div >
< br >
< h3 class = "subtitle is-4" > Headlines< / h3 >
< div class = "notification" > Subheadlines should only be used if there is reasonable content for them. < / div >
< div class = "container" >
< div class = "box" style = "box-shadow: none; border: 1px solid #dbdbdb;" >
< h1 class = "title" > Users< / h1 >
< h2 class = "subtitle" > Create, read, update and delete users< / h2 >
< / div >
< / div >
< br >
< br >
< h3 class = "subtitle is-4" > Tags< / h3 >
< div class = "notification" > Tags can use background in all full base colors. < / div >
2019-10-10 15:32:22 +02:00
< span class = "tag is-info" > < span class = "fa fa-tag t-spacing-0-1-14" > & nbsp< / span > tip< / span > < span class = "tag is-success" > OPEN< / span > < span class = "tag is-danger" > Warning< / span >
2019-10-10 10:41:25 +02:00
< br > < br >
< br >
< h3 class = "subtitle is-4" > Statistics< / h3 >
< div class = "notification has-text-danger" > < i > Already done but still in review? Add later?< / i > < / div >
< br >
< br >
< h3 class = "subtitle is-4" > Notifications< / h3 >
< div class = "notification" > Notification are using the full base colors.< / div >
< div class = "columns" >
< div class = "column is-one-third" >
< div class = "notification is-primary" >
2019-10-10 15:32:22 +02:00
< button class = "delete" > & nbsp< / button >
2019-10-10 10:41:25 +02:00
< strong > Primary/Success< / strong > < br >
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 < a > felis venenatis< / a > efficitur. < / div >
< / div >
< div class = "column is-one-third" >
< div class = "notification is-info" >
2019-10-10 15:32:22 +02:00
< button class = "delete" > & nbsp< / button >
2019-10-10 10:41:25 +02:00
< strong > Info/Link< / strong > < br >
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 < a > felis venenatis< / a > efficitur. < / div >
< / div >
< div class = "column is-one-third" >
< div class = "notification is-success" >
2019-10-10 15:32:22 +02:00
< button class = "delete" > & nbsp< / button >
2019-10-10 10:41:25 +02:00
< strong > Success< / strong > < br >
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 < a > felis venenatis< / a > efficitur. < / div >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-one-third" >
< div class = "notification is-warning" >
2019-10-10 15:32:22 +02:00
< button class = "delete" > & nbsp< / button >
2019-10-10 10:41:25 +02:00
< strong > Warning< / strong > < br >
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 < a > felis venenatis< / a > efficitur. < / div >
< / div >
< div class = "column is-one-third" >
< div class = "notification is-danger" >
2019-10-10 15:32:22 +02:00
< button class = "delete" > & nbsp< / button >
2019-10-10 10:41:25 +02:00
< strong > Danger< / strong > < br >
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 < a > felis venenatis< / a > efficitur.< / div >
< / div >
< div class = "column is-three-thirds" > < / div >
< / div >
< / div >
< / section >
< section class = "section" >
< div class = "container" >
< h2 class = "title is-3" > Examples of use< / h2 >
< hr >
< h3 class = "subtitle is-4" > Display of users (e.g. changesets)< / h3 >
< div class = "notification" > Use tags and different font-weights to visually structure information.< / div >
< div class = "content" > < br >
< article class = "media" >
< p class = "image is-64x64 Translate(s)-spacing-0-1-8" > < img class = "has-rounded-border" src = "https://gravatar.com/avatar/2f4a8735d6647f76e8a725b3d4987de5?size=64&default=identicon" alt = "Sebastian Sdorra" > < / p >
< div class = "media-content" >
2019-10-10 15:32:22 +02:00
< p > < strong > Sebastian Sdorra< / strong > < a class = "is-hidden-mobile" href = "#" > s.sdorra@gmail.com< / a > < / p >
2019-10-10 10:41:25 +02:00
< p class = "has-text-grey" > < span > Changeset e7468dd was committed < span > 2 months ago< / span > < / span > < / p >
< / div >
2019-10-10 15:32:22 +02:00
< div class = "media-right" > & nbsp< / div >
2019-10-10 10:41:25 +02:00
< / article >
< p > < span > < br >
< / span > < / p >
< / div >
< br >
< h3 class = "subtitle is-4" > Complex screens (e.g. pull requests)< / h3 >
< div class = "notification content" >
Screens with a big bunch of information should be carefully structured to help the user with orientation.
< ul >
< li > Make sure areas with different functionalities are clearly separated (use horizontal lines, boxes and/or bigger gaps between them).< / li >
< li > Buttons with different actions should have different colors.< / li >
< li > The "reject pull request" and "Merge pull request" buttons are good examples for a meaningful usage of addon buttons.< / li >
< li > 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).< / li >
< li > Make sure important states like "open" are properly marked. For example, with tags.< / li >
< / ul > < / div >
< div class = "columns" >
< div class = "column is-three-quarters is-clipped" >
< div class = "colums" >
< div class = "column is-clipped" >
< div class = "media" >
< div class = "media-content" >
< h1 class = "title" > #1 Merge-Conflicts< / h1 >
< / div >
2019-10-10 15:32:22 +02:00
< a class = "media-right" > < span class = "icon is-small" > < a class = "button is-small" href = "#" > < i class = "fas fa-edit" >  </i> Edit pull request< / a > < / span > < / a > < / div >
2019-10-10 10:41:25 +02:00
< div class = "Translate(o)-borderTop-0-1-10 media" >
< div class = "media-content" >
2019-10-10 15:32:22 +02:00
< div > < span class = "tag is-light is-medium" title = "feature/e" > < span class = "Translate(o)-tagShorter-0-1-9" > feature/e< / span > < / span > < i class = "fas fa-long-arrow-alt-right" > & nbsp< / i > < span class = "tag is-light is-medium" title = "master" > < span class = "Translate(o)-tagShorter-0-1-9" > master< / span > < / span > < / div >
2019-10-10 10:41:25 +02:00
< / div >
< div class = "media-right tag is-success is-medium" > OPEN< / div >
< / div >
< div class = "media" >
< div class = "media-content" > < span class = "is-word-break" > Hier gibt es Merge Konflikte< br >
< / span > < / div >
< / div >
< div class = "media Translate(o)-bottomSpace-0-1-8 has-text-grey" >
< div class = "media-content" > msuewer < span > a month ago< / span > < / div >
< / div >
< div class = "Translate(o)-borderTop-0-1-10 Translate(o)-bottomSpace-0-1-10" >
< div class = "field has-addons flex-float-right-0-1-1 Translate(o)-bottomSpace-0-1-8" >
< p class = "control" >
< button type = "button" class = "button is-warning" > Reject pull request< / button > < / p >
< p class = "control" >
< button type = "button" class = "button" > Merge pull request< / button > < / p >
< / div > < / div >
< div class = "box" >
< div class = "tabs" >
< ul >
< li class = "is-active" > < a href = "#" > Comments< / a > < / li >
2019-10-10 15:32:22 +02:00
< li > < a href = "#" > Commits< / a > < / li >
< li > < a href = "#" > Diff< / a > < / li >
2019-10-10 10:41:25 +02:00
< / ul >
< / div >
< article class = "media" >
< div class = "media-content" >
< div class = "content" >
< p > < strong > msuewer < / strong > < span > a month ago< / span > < br >
< span > Testkommentar< br >
< / span > < / p >
< / div >
< / div >
< div class = "media-right" >
2019-10-10 15:32:22 +02:00
< div class = "level-right" > < a class = "level-item" > < span class = "icon is-small" > < i class = "fas fa-trash" > & nbsp< / i > < / span > < / a > < a class = "level-item" > < span class = "icon is-small" > < i class = "fas fa-edit" > & nbsp< / i > < / span > < / a > < / div >
2019-10-10 10:41:25 +02:00
< / div >
< / article >
< article class = "media" >
< div class = "media-content" >
< div class = "content" >
< p > < strong > msuewer < / strong > < span > a month ago< / span > < br >
< span > das c ist falsch!< br >
< / span > < / p >
< / div >
< / div >
< div class = "media-right" >
2019-10-10 15:32:22 +02:00
< div class = "level-right" > < a class = "level-item" > < span class = "icon is-small" > < i class = "fas fa-trash" > & nbsp< / i > < / span > < / a > < a class = "level-item" > < span class = "icon is-small" > < i class = "fas fa-edit" > & nbsp< / i > < / span > < / a > < / div >
2019-10-10 10:41:25 +02:00
< / div >
< / article >
< article class = "media" >
< div class = "media-content" >
< div class = "field" >
< div class = "control" >
2019-10-10 15:32:22 +02:00
< textarea class = "textarea" placeholder = "Add comment" > & nbsp< / textarea >
2019-10-10 10:41:25 +02:00
< / div >
< / div >
< div class = "field" >
< p class = "control has-text-right" >
2019-10-10 15:32:22 +02:00
< button type = "submit" class = "button is-primary" > < span class = "icon" > < i class = "fa fa-plus" >  </i></span> Add comment< / button >
2019-10-10 10:41:25 +02:00
< / p >
< / div >
< / div >
< / article >
< / div > < / div >
< / div >
< / div >
< / div >
< br >
< br >
< h3 class = "subtitle is-4" > Group Member List< / h3 >
< div class = "notification has-text-danger" > < i > Is there a new version of it which is still in review? Add later?< / i > < / div >
< table class = "table content" >
< tbody >
< tr >
< td > Members
< ul >
2019-10-10 15:32:22 +02:00
< li > < a href = "#" > sdorra< / a > < / li >
< li > < a href = "#" > pczora< / a > < / li >
< li > < a href = "#" > pfeuffer< / a > < / li >
< li > < a href = "#" > ischindler< / a > < / li >
< li > < a href = "#" > mkarray< / a > < / li >
2019-10-10 10:41:25 +02:00
< / ul > < / td >
< / tr >
< / tbody >
< / table >
< / div >
< / section >
< / div >
< / div >
< / div >
< script src = "js/scm-ui.js" > < / script >
< script src = "js/vendor.js" > < / script >
< script src = "js/polyfills.js" > < / script >
< / body >
< / html >
