mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-10-31 10:35:56 +01:00
2736 lines
108 KiB
HTML
2736 lines
108 KiB
HTML
<!--
|
|
Copyright (c) 2020 - present Cloudogu GmbH
|
|
|
|
This program is free software: you can redistribute it and/or modify it under
|
|
the terms of the GNU Affero General Public License as published by the Free
|
|
Software Foundation, version 3.
|
|
|
|
This program is distributed in the hope that it will be useful, but WITHOUT
|
|
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
|
|
FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
|
details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see https://www.gnu.org/licenses/.
|
|
-->
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<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.
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="title is-3">Content</h2>
|
|
<ul>
|
|
<li><a href="#colors">Colors</a></li>
|
|
<li><a href="#layout">Layout</a></li>
|
|
<li><a href="#typography">Typography</a></li>
|
|
<li><a href="#buttons">Buttons</a></li>
|
|
<li><a href="#tables">Tables</a></li>
|
|
<li><a href="#form-controls">Form Controls</a></li>
|
|
<li><a href="#miscellaneous-elements">Miscellaneous Elements</a></li>
|
|
<li><a href="#examples-of-use">Examples of Use</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="colors">
|
|
<div class="container">
|
|
<h2 class="title is-3">Colors</h2>
|
|
<hr />
|
|
<h3 class="subtitle is-4">Background</h3>
|
|
<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 colors 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>
|
|
<td><span class="button has-background-dark"> </span></td>
|
|
<td><span class="button has-background-dark-75"> </span></td>
|
|
<td><span class="button has-background-dark-50"> </span></td>
|
|
<td><span class="button has-background-dark-25"> </span></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>
|
|
<td><span class="button has-background-info"> </span></td>
|
|
<td><span class="button has-background-info-75"> </span></td>
|
|
<td><span class="button has-background-info-50"> </span></td>
|
|
<td><span class="button has-background-info-25"> </span></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>
|
|
<td><span class="button has-background-link"> </span></td>
|
|
<td><span class="button has-background-link-75"> </span></td>
|
|
<td><span class="button has-background-link-50"> </span></td>
|
|
<td><span class="button has-background-link-25"> </span></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>
|
|
<td><span class="button has-background-primary"> </span></td>
|
|
<td><span class="button has-background-primary-75"> </span></td>
|
|
<td><span class="button has-background-primary-50"> </span></td>
|
|
<td><span class="button has-background-primary-25"> </span></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>
|
|
<td><span class="button has-background-success"> </span></td>
|
|
<td><span class="button has-background-success-75"> </span></td>
|
|
<td><span class="button has-background-success-50"> </span></td>
|
|
<td><span class="button has-background-success-25"> </span></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>
|
|
<td><span class="button has-background-warning"> </span></td>
|
|
<td><span class="button has-background-warning-75"> </span></td>
|
|
<td><span class="button has-background-warning-50"> </span></td>
|
|
<td><span class="button has-background-warning-25"> </span></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>
|
|
<td><span class="button has-background-danger"> </span></td>
|
|
<td><span class="button has-background-danger-75"> </span></td>
|
|
<td><span class="button has-background-danger-50"> </span></td>
|
|
<td><span class="button has-background-danger-25"> </span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="notification content">
|
|
The <code>has-background-secondary-*</code> color gradations are relative to the color scheme. A contrasting tone
|
|
is light in the light and dark in dark scheme.
|
|
</div>
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Class</th>
|
|
<th>Color</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>.has-background-secondary-least</code><br /></td>
|
|
<td><span class="button has-background-secondary-least"> </span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.has-background-secondary-less</code><br /></td>
|
|
<td><span class="button has-background-secondary-less"> </span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.has-background-secondary</code><br /></td>
|
|
<td><span class="button has-background-secondary"> </span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.has-background-secondary-more</code><br /></td>
|
|
<td><span class="button has-background-secondary-more"> </span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.has-background-secondary-most</code><br /></td>
|
|
<td><span class="button has-background-secondary-most"> </span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 class="subtitle is-4">Text</h3>
|
|
<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>
|
|
<div class="notification content">
|
|
The <code>has-text-secondary-*</code> color gradations are relative to the color scheme. A contrasting tone is
|
|
light in the light and dark in dark scheme.
|
|
</div>
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Class</th>
|
|
<th>Color</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>.has-text-secondary-least</code><br /></td>
|
|
<td class="has-background-secondary-less"><span class="has-text-secondary-least">Beispieltext</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.has-text-secondary-less</code><br /></td>
|
|
<td><span class="has-text-secondary-less">Beispieltext</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.has-text-secondary</code><br /></td>
|
|
<td><span class="has-text-secondary">Beispieltext</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.has-text-secondary-more</code><br /></td>
|
|
<td><span class="has-text-secondary-more">Beispieltext</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.has-text-secondary-most</code><br /></td>
|
|
<td><span class="has-text-secondary-most">Beispieltext</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="layout">
|
|
<div class="container">
|
|
<h2 class="title is-3">Layout</h2>
|
|
<hr />
|
|
<div class="sg-sub-section" id="hero---main-navigation">
|
|
<h3 class="subtitle is-4">Hero & Main Navigation (Tab-based)</h3>
|
|
<div class="notification"><i class="has-text-danger">May contain mobile hamburger menu in the future?</i></div>
|
|
</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 alt="SCM-Manager" src="ui-webapp/images/logo.png" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-foot">
|
|
<div class="container">
|
|
<nav class="tabs is-boxed">
|
|
<ul>
|
|
<li><a>Repositories</a></li>
|
|
<li><a>Users</a></li>
|
|
<li><a>Groups</a></li>
|
|
<li><a>Administration</a></li>
|
|
<li><a>Logout</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="sg-sub-section" id="secondary-navigation">
|
|
<h3 class="subtitle is-4">Secondary Navigation</h3>
|
|
<div class="columns">
|
|
<div class="column is-three-quarters ">
|
|
<div class="notification">
|
|
<div class="content">
|
|
<ul>
|
|
<li>Plugins are always listed after "Information", "Branches", "Tags" and "Code".</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>Each entry should have an icon. Subnavigation entries have no icons.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-one-quarter is-clipped">
|
|
<aside class="menu">
|
|
<div>
|
|
<p class="menu-label">Repository</p>
|
|
<ul class="menu-list">
|
|
<li>
|
|
<a class=""><i class="fas fa-info-circle fa-fw"></i> Information</a>
|
|
</li>
|
|
<li>
|
|
<a class=""><i class="fas fa-code-branch fa-fw"></i> Branches</a>
|
|
</li>
|
|
<li>
|
|
<a class=""><i class="fas fa-tags fa-fw"></i> Tags</a>
|
|
</li>
|
|
<li>
|
|
<a class=""><i class="fas fa-code fa-fw"></i> Code</a>
|
|
</li>
|
|
<li>
|
|
<a class=""><i class="fas fa-code-branch fa-rotate-180 fa-fw"></i> Pull Requests</a>
|
|
</li>
|
|
<li>
|
|
<a class=""><i class="fas fa-chart-pie fa-fw"></i> Statistics</a>
|
|
</li>
|
|
<li>
|
|
<a class=""><i class="fas fa-cog fa-fw"></i> Settings</a>
|
|
</li>
|
|
<li>
|
|
<a class="is-active"><i class="fas fa-cog fa-fw"></i> Settings</a>
|
|
<ul class="sub-menu">
|
|
<li><a class="is-active">General</a></li>
|
|
<li><a class="">Permissions</a></li>
|
|
<li><a class="">Email Notification</a></li>
|
|
<li><a class="">Pull Requests</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section" id="footer">
|
|
<h3 class="subtitle is-4">Footer</h3>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="footer">
|
|
<section class="section container">
|
|
<div class="columns is-size-7">
|
|
<section class="column is-one-third">
|
|
<div class="has-text-weight-bold mb-2">
|
|
<span
|
|
class="image is-rounded"
|
|
style="float: left; margin-right: 0.3em; padding-top: 0.2em; width: 1em; height: 1em;"
|
|
>
|
|
<img
|
|
alt="sdorra"
|
|
class="is-rounded"
|
|
src="https://gravatar.com/avatar/c8afb88b3858e1202d582122f94ed5f6?size=64&default=identicon"
|
|
style="vertical-align: middle;"
|
|
/>
|
|
</span>
|
|
Sebastian Sdorra
|
|
</div>
|
|
<ul style="padding-left: 1.1rem;">
|
|
<li><a>Profile</a></li>
|
|
<li><a>Change Password</a></li>
|
|
<li><a>Public Keys</a></li>
|
|
<li><a>API Keys</a></li>
|
|
</ul>
|
|
</section>
|
|
<section class="column is-one-third">
|
|
<div class="has-text-weight-bold mb-2">
|
|
<i class="fas fa-info-circle fa-fw"></i>
|
|
Information
|
|
</div>
|
|
<ul style="padding-left: 1.1rem;">
|
|
<li><a>SCM-Manager 2.0.0</a></li>
|
|
<li><a>REST-API</a></li>
|
|
</ul>
|
|
</section>
|
|
<section class="column is-one-third">
|
|
<div class="has-text-weight-bold mb-2">
|
|
<i class="fas fa-life-ring fa-fw"></i>
|
|
Support
|
|
</div>
|
|
<ul style="padding-left: 1.1rem;">
|
|
<li><a>Community</a></li>
|
|
<li><a>Enterprise</a></li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</footer>
|
|
<section class="section" id="typography">
|
|
<div class="container">
|
|
<h2 class="title is-3">Typography</h2>
|
|
<div class="sg-sub-section">
|
|
<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 var(--scm-border-color);">
|
|
<h1 class="title">Users</h1>
|
|
<h2 class="subtitle">Create, read, update and delete users</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Icons</h3>
|
|
<div class="notification">
|
|
The following icons have a global significance and should only be used in connection with certain functions.
|
|
</div>
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Icon</th>
|
|
<th>Name</th>
|
|
<th>Meaning</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-code-branch">
|
|
<i class="fas fa-lg fa-code-branch"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>code-branch</code></td>
|
|
<td>Branches</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-tags">
|
|
<i class="fas fa-lg fa-tags"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>tags</code></td>
|
|
<td>Tags</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-exchange-alt">
|
|
<i class="fas fa-lg fa-exchange-alt"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>exchange-alt</code></td>
|
|
<td>Commits, Convert type</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-code">
|
|
<i class="fas fa-lg fa-code"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>code</code></td>
|
|
<td>Code, Sources</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-code-branch fa-rotate-180">
|
|
<i class="fas fa-lg fa-code-branch fa-rotate-180"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>code-branch fa-rotate-180</code></td>
|
|
<td>Pull Requests</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-cog">
|
|
<i class="fas fa-lg fa-cog"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>cog</code></td>
|
|
<td>Settings</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-star">
|
|
<i class="fas fa-lg fa-star"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>star</code></td>
|
|
<td>Favorite repository</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-book-reader">
|
|
<i class="fas fa-lg fa-book-reader"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>book-reader</code></td>
|
|
<td>Readme</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-info-circle">
|
|
<i class="fas fa-lg fa-info-circle"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>info-circle</code></td>
|
|
<td>Information</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-trash">
|
|
<i class="fas fa-lg fa-trash"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>trash</code></td>
|
|
<td>Delete</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-times">
|
|
<i class="fas fa-lg fa-times"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>times</code></td>
|
|
<td>Delete, Remove, Disapprove</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-plus">
|
|
<i class="fas fa-lg fa-plus"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>plus</code></td>
|
|
<td>Add, Subscribe</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-key">
|
|
<i class="fas fa-lg fa-key"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>key</code></td>
|
|
<td>Signature</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-tag">
|
|
<i class="fas fa-lg fa-tag"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>tag</code></td>
|
|
<td>Single Tag</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-circle-notch">
|
|
<i class="fas fa-lg fa-circle-notch"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>circle-notch</code></td>
|
|
<td>No status available</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-home">
|
|
<i class="fas fa-lg fa-home"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>home</code></td>
|
|
<td>Home, Internal user</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-link">
|
|
<i class="fas fa-lg fa-link"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>link</code></td>
|
|
<td>Copy permalink</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-upload">
|
|
<i class="fas fa-lg fa-upload"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>upload</code></td>
|
|
<td>Upload</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-download">
|
|
<i class="fas fa-lg fa-download"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>download</code></td>
|
|
<td>Download, Install</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-folder">
|
|
<i class="fas fa-lg fa-folder"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>folder</code></td>
|
|
<td>Folder</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="far fa-folder">
|
|
<i class="far fa-lg fa-folder"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>folder</code></td>
|
|
<td>Subrepository, submodule, externals</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-file">
|
|
<i class="fas fa-lg fa-file"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>file</code></td>
|
|
<td>File</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-user-clock">
|
|
<i class="fas fa-lg fa-user-clock"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>user-clock</code></td>
|
|
<td>Annotate</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-history">
|
|
<i class="fas fa-lg fa-history"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>history</code></td>
|
|
<td>History</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-search-plus">
|
|
<i class="fas fa-lg fa-search-plus"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>search-plus</code></td>
|
|
<td>Open in Fullscreen</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-edit">
|
|
<i class="fas fa-lg fa-edit"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>edit</code></td>
|
|
<td>Edit</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-eye-slash">
|
|
<i class="fas fa-lg fa-eye-slash"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>eye-slash</code></td>
|
|
<td>Collapse</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-eye">
|
|
<i class="fas fa-lg fa-eye"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>eye</code></td>
|
|
<td>Collapse</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-columns">
|
|
<i class="fas fa-lg fa-columns"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>columns</code></td>
|
|
<td>Side-by-side view</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-align-left">
|
|
<i class="fas fa-lg fa-align-left"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>align-left</code></td>
|
|
<td>Combined view</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-sort-alpha-down">
|
|
<i class="fas fa-lg fa-sort-alpha-down"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>sort-alpha-down</code></td>
|
|
<td>Sort alphabetically</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-sort-alpha-down-alt">
|
|
<i class="fas fa-lg fa-sort-alpha-down-alt"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>sort-alpha-down-alt</code></td>
|
|
<td>Sort alphabetically reverse</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-sort-amount-down-alt">
|
|
<i class="fas fa-lg fa-sort-amount-down-alt"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>sort-amount-down-alt</code></td>
|
|
<td>Sort descending</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-sort-amount-down">
|
|
<i class="fas fa-lg fa-sort-amount-down"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>sort-amount-down</code></td>
|
|
<td>Sort ascending</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-user">
|
|
<i class="fas fa-lg fa-user"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>user</code></td>
|
|
<td>User, One reviewer</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-user-friends">
|
|
<i class="fas fa-lg fa-user-friends"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>user-friends</code></td>
|
|
<td>Two reviewers</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-users">
|
|
<i class="fas fa-lg fa-users"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>users</code></td>
|
|
<td>More reviewers</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-exclamation-triangle">
|
|
<i class="fas fa-lg fa-exclamation-triangle"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>exclamation-triangle</code></td>
|
|
<td>Problem detected, e.g. target branch deleted, conflicts</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-minus">
|
|
<i class="fas fa-lg fa-minus"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>minus</code></td>
|
|
<td>Unsubscribe</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-check">
|
|
<i class="fas fa-lg fa-check"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>check</code></td>
|
|
<td>Approve</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-clock">
|
|
<i class="fas fa-lg fa-clock"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>clock</code></td>
|
|
<td>Outdated</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-bolt">
|
|
<i class="fas fa-lg fa-bolt"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>bolt</code></td>
|
|
<td>System</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-reply">
|
|
<i class="fas fa-lg fa-reply"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>reply</code></td>
|
|
<td>Reply</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-tasks">
|
|
<i class="fas fa-lg fa-tasks"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>tasks</code></td>
|
|
<td>Task</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-comment-dots">
|
|
<i class="fas fa-lg fa-comment-dots"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>comment-dots</code></td>
|
|
<td>Comment</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-check-circle">
|
|
<i class="fas fa-lg fa-check-circle"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>check-circle</code></td>
|
|
<td>Mark as done, Status successful</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-question-circle">
|
|
<i class="fas fa-lg fa-question-circle"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>question-circle</code></td>
|
|
<td>Help text</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-times-circle">
|
|
<i class="fas fa-lg fa-times-circle"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>times-circle</code></td>
|
|
<td>Status failed</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-arrow-circle-up">
|
|
<i class="fas fa-lg fa-arrow-circle-up"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>arrow-circle-up</code></td>
|
|
<td>Upload</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-arrow-circle-down">
|
|
<i class="fas fa-lg fa-arrow-circle-down"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>arrow-circle-down</code></td>
|
|
<td>Download</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-archive">
|
|
<i class="fas fa-lg fa-archive"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>archive</code></td>
|
|
<td>Archive</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-globe-americas">
|
|
<i class="fas fa-lg fa-globe-americas"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>globe-americas</code></td>
|
|
<td>External group</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-puzzle-piece">
|
|
<i class="fas fa-lg fa-puzzle-piece"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>puzzle-piece</code></td>
|
|
<td>Plugins</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-sync-alt">
|
|
<i class="fas fa-lg fa-sync-alt"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>sync-alt</code></td>
|
|
<td>Update</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-bell">
|
|
<i class="fas fa-lg fa-bell"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>bell</code></td>
|
|
<td>Notifications</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-shield-alt">
|
|
<i class="fas fa-lg fa-shield-alt"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>shield-alt</code></td>
|
|
<td>Alert</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a class="level-item">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="fas fa-retweet">
|
|
<i class="fas fa-lg fa-retweet"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
<td><code>retweet</code></td>
|
|
<td>Compare</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="buttons">
|
|
<div class="container">
|
|
<h2 class="title is-3">Buttons</h2>
|
|
<hr />
|
|
<div class="sg-sub-section">
|
|
<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>
|
|
<p class="control"><a class="button">Default</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<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>
|
|
<p class="control"><a class="button" disabled="">Default</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<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>
|
|
<p class="control"><a class="button is-hovered">Default</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<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>
|
|
<p class="control"><a class="button is-active">Default</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Loading Buttons</h3>
|
|
<div class="notification">
|
|
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.
|
|
</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-loading">Primary</a></p>
|
|
<p class="control"><a class="button is-link is-loading">Link</a></p>
|
|
<p class="control"><a class="button is-info is-loading">Info</a></p>
|
|
<p class="control"><a class="button is-success is-loading">Success</a></p>
|
|
<p class="control"><a class="button is-warning is-loading">Warning</a></p>
|
|
<p class="control"><a class="button is-danger is-loading">Danger</a></p>
|
|
<p class="control"><a class="button is-loading">Default</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Outlined Buttons</h3>
|
|
<div class="notification">Should be used for secondary actions.</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-outlined">Primary</a></p>
|
|
<p class="control"><a class="button is-link is-outlined">Link</a></p>
|
|
<p class="control"><a class="button is-info is-outlined">Info</a></p>
|
|
<p class="control"><a class="button is-success is-outlined">Success</a></p>
|
|
<p class="control"><a class="button is-warning is-outlined">Warning</a></p>
|
|
<p class="control"><a class="button is-danger is-outlined">Danger</a></p>
|
|
<p class="control"><a class="button is-outlined">Default</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Icon Buttons</h3>
|
|
<div class="notification">
|
|
Alternative to the normal button with minimum space requirements. Should always get a tooltip.
|
|
</div>
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Switch to side-by-side view">
|
|
<a aria-label="Switch to side-by-side view" class="button" style="width: 50px; cursor: pointer;">
|
|
<i class="fas fa-columns"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Open in Fullscreen">
|
|
<a class="button" style="width: 50px; cursor: pointer;">
|
|
<i class="fas fa-search-plus"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Jump to the previous version of the file">
|
|
<a
|
|
aria-label="Jump to the previous version of the file"
|
|
class="button"
|
|
style="width: 50px; cursor: pointer;"
|
|
>
|
|
<i class="fas fa-file-code has-text-inherit"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Jump to source file">
|
|
<a aria-label="Jump to source file" class="button" style="width: 50px; cursor: pointer;">
|
|
<i class="fas fa-file-code has-text-inherit"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<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 "Commits" and "Sources") they should be placed
|
|
next to each other.
|
|
</li>
|
|
<li>The function with the higher priority should be positioned on the right.</li>
|
|
</ul>
|
|
</div>
|
|
<h4 class="subtitle is-5">Button Addon</h4>
|
|
<div class="field has-addons">
|
|
<p class="control">
|
|
<button type="button" class="button is-default" style="font-size: 1rem;">
|
|
<span class="icon is-medium"><i class="fas fa-fa fa-exchange-alt has-text-inherit"></i></span>
|
|
<span>Commits </span>
|
|
</button>
|
|
</p>
|
|
<p class="control">
|
|
<button type="button" class="button is-link is-selected" style="font-size: 1rem;">
|
|
<span class="icon is-medium"><i class="fas fa-fa fa-code has-text-inherit"></i></span>
|
|
<span>Sources </span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<br />
|
|
<h4 class="subtitle is-5">Button Group</h4>
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<button type="button" disabled="" class="button is-info">
|
|
<span class="icon is-medium"><i class="fas fa-download has-text-inherit"></i></span>
|
|
<span>Download Export </span>
|
|
</button>
|
|
</div>
|
|
<div class="control">
|
|
<button type="button" class="button is-primary">
|
|
<span class="icon is-medium"><i class="fas fa-file-export has-text-inherit"></i></span>
|
|
<span>Create new Export </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Switch to side-by-side view">
|
|
<a aria-label="Switch to side-by-side view" class="button" style="width: 50px; cursor: pointer;"
|
|
><i class="fas fa-columns"></i
|
|
></a>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Open in Fullscreen">
|
|
<a class="button" style="width: 50px; cursor: pointer;"><i class="fas fa-search-plus"></i></a>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Jump to source file">
|
|
<a aria-label="Jump to source file" class="button" style="width: 50px; cursor: pointer;"
|
|
><i class="fas fa-file-code has-text-inherit"></i
|
|
></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Pagination</h3>
|
|
<h4 class="subtitle is-5">Disabled Pagination</h4>
|
|
<div class="notification">Disabled navigation buttons are either grey or light blue.</div>
|
|
<nav aria-label="pagination" class="pagination is-centered">
|
|
<button class="button is-default pagination-previous" disabled="disabled" type="button">Previous</button>
|
|
<button class="button is-default pagination-next" disabled="disabled" type="button">Next</button>
|
|
<ul class="pagination-list">
|
|
<li>
|
|
<button class="button is-default pagination-link is-current" disabled="disabled" type="button">1</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<br />
|
|
<h4 class="subtitle is-5">Active Pagination</h4>
|
|
<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 aria-label="pagination" class="pagination is-centered">
|
|
<button class="button is-default pagination-previous" type="button">Previous</button>
|
|
<button class="button is-default pagination-next" type="button">Next</button>
|
|
<ul class="pagination-list">
|
|
<li>
|
|
<button class="button is-default pagination-link" type="button">1</button>
|
|
</li>
|
|
<li>
|
|
<button class="button is-default pagination-link is-current" disabled="" type="button">2</button>
|
|
</li>
|
|
<li><span class="pagination-ellipsis">…</span></li>
|
|
<li>
|
|
<button class="button is-default pagination-link" type="button">457</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<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 class="button is-primary" type="submit">Create Repository</button>
|
|
</div>
|
|
<div class="has-text-centered" style="margin-top: 2em; padding: 1em; border: 2px solid var(--scm-border-color);">
|
|
<button class="button is-primary" type="submit">Create Repository</button>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Submit</h3>
|
|
<div class="notification">
|
|
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.
|
|
</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 class="button is-primary" type="submit">Submit</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Special</h3>
|
|
<div class="notification content">
|
|
Icons are added before the text to mark these buttons as special elements.
|
|
<br />
|
|
<ul>
|
|
<li>Use of the AddButton only when adding elements directly visually</li>
|
|
<li>The trash icon does not appear within a delete button</li>
|
|
</ul>
|
|
</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 is-default" type="button">
|
|
<span class="icon is-medium"><i class="fa fa-plus"></i></span><span>Add</span>
|
|
</button>
|
|
</p>
|
|
<p class="control">
|
|
<button class="button is-warning" type="button">
|
|
<span class="icon is-medium"><i class="fa fa-times"></i></span><span>Delete</span>
|
|
</button>
|
|
</p>
|
|
<p class="control">
|
|
<button class="button is-link" type="button">
|
|
<span class="icon is-medium"><i class="fas fa-arrow-circle-down"></i></span><span>Download</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4 ">Button Texts</h3>
|
|
<div class="notification">
|
|
Button texts are treated like headings. Button lettering 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 class="button is-primary" type="submit">Create Repository</button>
|
|
</p>
|
|
<p class="control">
|
|
<button class="button is-primary" type="submit">Create User</button>
|
|
</p>
|
|
<p class="control">
|
|
<button class="button is-primary" type="submit">Create Group</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="tables">
|
|
<div class="container">
|
|
<h2 class="title is-3">Tables</h2>
|
|
<hr />
|
|
<div class="sg-sub-section">
|
|
<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>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Card Tables</h3>
|
|
<div class="notification content">
|
|
Special tables can be used for lists of groups, users, tags etc.
|
|
<br />
|
|
<ul>
|
|
<li>In general, use icons instead of buttons within the <code>.card-table</code>.</li>
|
|
<li>Use icons and a darker background in a specific action column.</li>
|
|
<li>Colors at the left side could display roles, for example green = active user, yellow = not active.</li>
|
|
</ul>
|
|
</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>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-is-yellow">
|
|
<td class="is-hidden-mobile">
|
|
<i class="fas fa-fw fa-user-slash has-text-secondary" title="Inactive"></i> <a>_anonymous</a>
|
|
</td>
|
|
<td><a>SCM Anonymous</a></td>
|
|
<td><a>scm-anonymous@scm-manager.org</a></td>
|
|
</tr>
|
|
<tr class="border-is-green">
|
|
<td class="is-hidden-mobile">
|
|
<i class="fas fa-fw fa-user has-text-secondary" title="Active"></i> <a>dhuchthausen</a>
|
|
</td>
|
|
<td><a>Daniel Huchthausen</a></td>
|
|
<td><a>daniel.huchthausen@cloudogu.com</a></td>
|
|
</tr>
|
|
<tr class="border-is-green">
|
|
<td class="is-hidden-mobile">
|
|
<i class="fas fa-fw fa-user has-text-secondary" title="Active"></i> <a>fscholdei</a>
|
|
</td>
|
|
<td><a>Florian Scholdei</a></td>
|
|
<td><a>florian.scholdei@cloudogu.com</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="card-table table is-hoverable is-fullwidth is-word-break">
|
|
<thead>
|
|
<tr>
|
|
<th>Active Branches</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<a title="feature/file_delete">feature/file_delete</a>
|
|
<span class="has-text-grey is-ellipsis-overflow" style="margin-left: 1rem; font-size: 0.8rem;">
|
|
Last commit
|
|
<time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;" title="2021-01-18 16:25:22"
|
|
>2 days ago</time
|
|
>
|
|
</span>
|
|
</td>
|
|
<td class="is-darker">
|
|
<a class="level-item">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-fw fa-trash fas" title="Delete Branch"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<a title="test/edit_binary">test/edit_binary</a>
|
|
<span class="has-text-grey is-ellipsis-overflow" style="margin-left: 1rem; font-size: 0.8rem;">
|
|
Last commit
|
|
<time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;" title="2021-01-15 10:17:57"
|
|
>5 days ago</time
|
|
>
|
|
</span>
|
|
</td>
|
|
<td class="is-darker">
|
|
<a class="level-item">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-fw fa-trash fas" title="Delete Branch"></i>
|
|
</span>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="form-controls">
|
|
<div class="container">
|
|
<h2 class="title is-3">Form Controls</h2>
|
|
<hr />
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Forms</h3>
|
|
<div class="notification content">
|
|
A form contains a set of related input fields.
|
|
<br />
|
|
<ul>
|
|
<li>Fields should always have a label.</li>
|
|
<li>If possible, forms should be divided into two columns to get a better grasp of the content.</li>
|
|
<li>Similar content should appear next to each other.</li>
|
|
<li>It is recommended to divide unrelated content with horizontal lines.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<div class="columns">
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="label" for="realmDescription">
|
|
Realm Description
|
|
<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"> </i></span
|
|
>
|
|
</label>
|
|
<div class="control">
|
|
<input class="input" id="realmDescription" placeholder="" type="text" value="SONIA :: SCM Manager" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="label" for="dateFormat">
|
|
Date Format
|
|
<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"> </i></span
|
|
>
|
|
</label>
|
|
<div class="control">
|
|
<input class="input" id="dateFormat" placeholder="" type="text" 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" for="pluginCenterUrl">
|
|
Plugin Center URL
|
|
<span
|
|
class="tooltip has-tooltip-right has-tooltip-multiline"
|
|
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"> </i></span
|
|
>
|
|
</label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
id="pluginCenterUrl"
|
|
placeholder=""
|
|
type="text"
|
|
value="https://plugin-center-api.scm-manager.org/api/v1/plugins/{version}?os={os}&arch={arch}&x=u&jre={jre}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="label" for="namespaceStrategy">
|
|
Namespace Strategy
|
|
<span
|
|
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
|
|
data-tooltip="The namespace strategy."
|
|
><i class="fas fa-question-circle has-text-info"></i
|
|
></span>
|
|
</label>
|
|
<div class="control select">
|
|
<select id="namespaceStrategy">
|
|
<option value="CustomNamespaceStrategy">Custom</option>
|
|
<option value="CurrentYearNamespaceStrategy">Current year</option>
|
|
<option value="UsernameNamespaceStrategy">Username</option>
|
|
<option value="RepositoryTypeNamespaceStrategy">Repository type</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="label">
|
|
Enabled XSRF Protection
|
|
<span
|
|
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
|
|
data-tooltip="Enable XSRF Cookie Protection. Note: This feature is still experimental."
|
|
><i class="fas fa-question-circle has-text-info"></i
|
|
></span>
|
|
</label>
|
|
<div class="control">
|
|
<label class="checkbox">
|
|
<span class="gwt-Anchor" tabindex="0">
|
|
<i class="is-outlined fa-check-square has-text-link fa"></i>
|
|
</span>
|
|
Enabled XSRF Protection
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Input</h3>
|
|
<div class="field">
|
|
<label class="label" for="name">
|
|
Name
|
|
<span
|
|
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
|
|
data-tooltip="Unique name of the group"
|
|
>
|
|
<i class="fas fa-question-circle has-text-info"></i>
|
|
</span>
|
|
</label>
|
|
<div class="control">
|
|
<input class="input" placeholder="" type="text" value="" id="name" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Textarea</h3>
|
|
<div class="field">
|
|
<label class="label" for="description">
|
|
Description
|
|
<span
|
|
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
|
|
data-tooltip="A short description of the group"
|
|
>
|
|
<i class="fas fa-question-circle has-text-info"></i>
|
|
</span>
|
|
</label>
|
|
<div class="control">
|
|
<textarea class="textarea" id="description"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Dropdown</h3>
|
|
<div class="notification">
|
|
Select elements should always contain placeholder texts, also for preselected options.
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="permittedRole">
|
|
Permitted Role
|
|
<span
|
|
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
|
|
data-tooltip="The api key will be restricted to permissions of this role"
|
|
>
|
|
<i class="fas fa-question-circle has-text-info"></i>
|
|
</span>
|
|
</label>
|
|
<div class="control select">
|
|
<select id="permittedRole">
|
|
<option>CUSTOM</option>
|
|
<option value="CI-SERVER">CI-SERVER</option>
|
|
<option value="OWNER">OWNER</option>
|
|
<option selected value="READ">READ</option>
|
|
<option value="WRITE">WRITE</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal mt-4">
|
|
<div class="field-label is-normal" style="flex-basis: inherit; flex-grow: 0;">
|
|
<label class="label is-size-6" for="selectBranch">Select branch</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field is-narrow mb-0">
|
|
<div class="control" style="min-width: 10rem;">
|
|
<div class="is-fullwidth select">
|
|
<select id="selectBranch">
|
|
<option value="main">main</option>
|
|
<option value="develop">develop</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Checkbox</h3>
|
|
<div class="field">
|
|
<div class="control">
|
|
<label class="checkbox">
|
|
<span class="gwt-Anchor" tabindex="0"><i class="is-outlined fa-square has-text-black far"></i></span>
|
|
External
|
|
<span
|
|
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
|
|
data-tooltip="This user is managed by an external system."
|
|
>
|
|
<i class="fas fa-question-circle has-text-info"></i>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<label class="checkbox">
|
|
<span class="gwt-Anchor" tabindex="0"><i class="is-outlined fa-check-square has-text-link fa"></i></span>
|
|
Active
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<label class="checkbox">
|
|
<span tabindex="0" class="gwt-Anchor"><i class="is-outlined fa-minus-square has-text-link far"></i> </span>
|
|
Indeterminate
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Radio Buttons</h3>
|
|
<div class="notification">Radio buttons should have enough space between them and the labels.</div>
|
|
<h2 class="subtitle">Add New Permission</h2>
|
|
<form>
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<label class="hbseve radio mr-2">
|
|
<input checked="" name="permission_scope" type="radio" value="USER_PERMISSION" />
|
|
User Permission
|
|
</label>
|
|
<label class="hbseve radio">
|
|
<input name="permission_scope" type="radio" value="GROUP_PERMISSION" />
|
|
Group Permission
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">File Upload</h3>
|
|
<label class="label">
|
|
Dump File
|
|
<span
|
|
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
|
|
data-tooltip="Select your dump file from which the repository should be imported."
|
|
style="position: absolute; padding-left: 3px;"
|
|
>
|
|
<i class="fas fa-question-circle has-text-info"></i>
|
|
</span>
|
|
</label>
|
|
<div class="file is-info has-name is-fullwidth">
|
|
<label class="file-label">
|
|
<input class="file-input" name="resume" type="file" />
|
|
<span class="file-cta">
|
|
<span class="file-icon"><i class="fas fa-arrow-circle-up"></i></span>
|
|
<span class="file-label">Select File</span>
|
|
</span>
|
|
<span class="file-name">2fRNLPdVq2.tar.gz</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Inline Member Field</h3>
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
<div class="control">
|
|
<strong>Reviewers:</strong>
|
|
</div>
|
|
<div class="control">
|
|
<div class="tags has-addons">
|
|
<span class="tag is-info is-outlined">Emil Boyce</span>
|
|
<a class="tag is-delete"></a>
|
|
</div>
|
|
</div>
|
|
<div class="control">
|
|
<div class="tags has-addons">
|
|
<span class="tag is-info is-outlined">Jawad Mack</span>
|
|
<a class="tag is-delete"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control has-icons-right">
|
|
<input class="input" type="email" placeholder="Add Reviewer" />
|
|
<span class="icon is-small is-right">
|
|
<i class="fas fa-chevron-down"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="miscellaneous-elements">
|
|
<div class="container">
|
|
<h2 class="title is-3">Miscellaneous Elements</h2>
|
|
<hr />
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Boxes</h3>
|
|
<div class="notification content">
|
|
Border around boxes should set the focus on an area that is not simply a notification.
|
|
<br />
|
|
<ul>
|
|
<li>
|
|
Borders can either be created by <code>.box</code> or a separate border in conjunction with a border-radius
|
|
of 5px.
|
|
</li>
|
|
<li>The main colors with 25-75% opacity should be used.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="box" style="box-shadow: rgb(40 177 232 / 10%) 0 2px 3px, rgb(40 177 232 / 20%) 0 0 0 2px;">
|
|
<article class="media">
|
|
<div class="media-left" style="padding: 0.2rem 0.4rem;">
|
|
<img src="/ui-webapp/images/iconCommunitySupport.png" alt="Community Support Icon" />
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<h3 class="has-text-weight-medium">Community Support</h3>
|
|
<p>
|
|
Contact the SCM-Manager support team for questions about SCM-Manager, to report bugs or to request
|
|
features through the official channels.
|
|
</p>
|
|
<a class="button is-info is-pulled-right" target="_blank" href="https://scm-manager.org/support/"
|
|
>Contact Our Team</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div style="padding: 1.5rem 1rem; border: 1px solid rgb(255, 106, 136); border-radius: 5px;">
|
|
<div class="level">
|
|
<div class="level-left">
|
|
<p>
|
|
<strong>Delete Branch</strong>
|
|
<br />Deleted branches cannot be restored.
|
|
</p>
|
|
</div>
|
|
<div class="level-right">
|
|
<button type="button" class="button is-warning">
|
|
<span class="icon is-medium"><i class="fas fa-times has-text-inherit"></i></span>
|
|
<span>Delete Branch </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Breadcrumb</h3>
|
|
<div class="notification">The breadcrumb is used for a path-depth view for sources.</div>
|
|
<div class="is-flex is-align-items-center">
|
|
<div style="width: 16px; height: 16px; font-size: 13px;">
|
|
<span class="tooltip has-tooltip-right" data-tooltip="Copy Permalink to Clipboard">
|
|
<i class="fas fa-link has-text-inherit" style="color: var(--scm-border-color); opacity: 0.75;"></i>
|
|
</span>
|
|
</div>
|
|
<nav
|
|
aria-label="breadcrumbs"
|
|
class="breadcrumb sources-breadcrumb"
|
|
style="flex: 1; margin: 1rem 0.5rem !important;"
|
|
>
|
|
<ul>
|
|
<li>
|
|
<a><i class="fas fa-fw fa-home has-text-inherit" style="line-height: 1.5rem;" title="Main page"></i></a>
|
|
</li>
|
|
<li><a>src</a></li>
|
|
<li><a>main</a></li>
|
|
<li><a>java</a></li>
|
|
<li><a>com</a></li>
|
|
<li class="is-active"><a aria-current="page">cloudogu</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<hr class="is-marginless" />
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Card Column</h3>
|
|
<div class="content">
|
|
<div class="columns card-columns is-multiline" style="padding: 0 0.75rem;">
|
|
<div class="box box-link-shadow column is-clipped is-half">
|
|
<article class="media" style="position: relative; pointer-events: none; z-index: 1;">
|
|
<figure class="media-left" style="margin-top: 0.8em; margin-left: 1em !important;">
|
|
<p class="image is-64x64">
|
|
<img alt="Logo" src="/ui-webapp/images/blibTransparentBG.png" />
|
|
</p>
|
|
</figure>
|
|
<div
|
|
class="media-content text-box is-flex"
|
|
style="flex-direction: column; justify-content: space-around; align-self: stretch;"
|
|
>
|
|
<div class="is-flex">
|
|
<div class="content" style="overflow: hidden; margin-bottom: 0 !important;">
|
|
<p class="shorten-text is-marginless"><strong>Git</strong></p>
|
|
</div>
|
|
<div>
|
|
<div class="is-flex" style="margin-left: auto;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="level is-flex" style="padding-bottom: 1rem;">
|
|
<div class="level-left is-hidden-mobile" style="margin-right: 0.5rem;">
|
|
<small>2.13.0-SNAPSHOT</small>
|
|
</div>
|
|
<div
|
|
class="level-right is-block is-mobile is-marginless shorten-text"
|
|
style="flex-shrink: inherit; pointer-events: all;"
|
|
>
|
|
<small class="level-item is-block shorten-text">Cloudogu GmbH</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="box box-link-shadow column is-clipped is-half">
|
|
<article class="media" style="position: relative; pointer-events: none; z-index: 1;">
|
|
<figure class="media-left" style="margin-top: 0.8em; margin-left: 1em !important;">
|
|
<p class="image is-64x64">
|
|
<img alt="Logo" src="/ui-webapp/images/blibTransparentBG.png" />
|
|
</p>
|
|
</figure>
|
|
<div
|
|
class="media-content text-box is-flex"
|
|
style="flex-direction: column; justify-content: space-around; align-self: stretch;"
|
|
>
|
|
<div class="is-flex">
|
|
<div class="content" style="overflow: hidden; margin-bottom: 0 !important;">
|
|
<p class="shorten-text is-marginless"><strong>Repository Template</strong></p>
|
|
<p class="shorten-text">
|
|
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.
|
|
</p>
|
|
</div>
|
|
<div style="margin-left: auto;">
|
|
<div class="is-flex">
|
|
<span
|
|
class="level-item"
|
|
style="padding: 0.5rem; border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
|
|
>
|
|
<i class="fas fa-fw fa-trash has-text-info" title="Uninstall"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="level is-flex pb-4">
|
|
<div class="level-left is-hidden-mobile mr-2">
|
|
<small>1.1.0-SNAPSHOT</small>
|
|
</div>
|
|
<div
|
|
class="level-right is-block is-mobile is-marginless shorten-text"
|
|
style="flex-shrink: inherit; pointer-events: all;"
|
|
>
|
|
<small class="level-item is-block shorten-text">Sebastian Sdorra</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="box box-link-shadow column is-clipped is-full">
|
|
<article class="media" style="position: relative; pointer-events: none; z-index: 1;">
|
|
<figure class="media-left" style="margin-top: 0.8em; margin-left: 1em !important;">
|
|
<p class="image is-64x64">
|
|
<img alt="Logo" src="/ui-webapp/images/blibTransparentBG.png" />
|
|
</p>
|
|
</figure>
|
|
<div
|
|
class="media-content text-box is-flex"
|
|
style="flex-direction: column; justify-content: space-around; align-self: stretch;"
|
|
>
|
|
<div class="is-flex">
|
|
<div class="content" style="overflow: hidden; margin-bottom: 0 !important;">
|
|
<p class="shorten-text is-marginless"><strong>Review</strong></p>
|
|
<p class="shorten-text">Depict a review process with pull requests</p>
|
|
</div>
|
|
<div style="margin-left: auto;">
|
|
<div class="is-flex">
|
|
<span
|
|
class="level-item p-2"
|
|
style="border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
|
|
>
|
|
<i class="fas fa-fw fa-trash has-text-info" title="Uninstall"></i>
|
|
</span>
|
|
<span
|
|
class="level-item p-2 ml-2"
|
|
style="border: 1px solid var(--scm-border-color); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;"
|
|
>
|
|
<i class="fas fa-fw fa-sync-alt has-text-info" title="Update"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="level is-flex pb-4">
|
|
<div class="level-left is-hidden-mobile mr-2">
|
|
<small>2.6.0</small>
|
|
</div>
|
|
<div
|
|
class="level-right is-block is-mobile is-marginless shorten-text"
|
|
style="flex-shrink: inherit; pointer-events: all;"
|
|
>
|
|
<small class="level-item is-block shorten-text">Cloudogu GmbH</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Date</h3>
|
|
<div class="notification">Dates are preferably shown relatively and by hovering with an absolute date.</div>
|
|
<p>
|
|
<time style="border-bottom: 1px dotted rgb(219,219,219); cursor: help;" title="2009-06-30 18:30:00"
|
|
>over 10 years ago
|
|
</time>
|
|
</p>
|
|
<p>
|
|
<time style="border-bottom: 1px dotted rgb(219,219,219); cursor: help;" title="2019-06-30 18:30:00"
|
|
>3 months ago
|
|
</time>
|
|
</p>
|
|
<p>
|
|
<time style="border-bottom: 1px dotted rgb(219,219,219); cursor: help;" title="2019-10-12 13:56:40"
|
|
>less than a minute ago
|
|
</time>
|
|
</p>
|
|
<p>
|
|
<time style="border-bottom: 1px dotted rgb(219,219,219); cursor: help;" title="2019-10-11 13:56:40"
|
|
>1 day ago
|
|
</time>
|
|
</p>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Group Member List</h3>
|
|
<ul class="Details__StyledMemberList-sc-1uy93gc-0 cmCFmV">
|
|
<li
|
|
class=""
|
|
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
|
|
>
|
|
<a><i class="fas fa-user has-text-inherit"></i> mmuster</a>
|
|
</li>
|
|
<li
|
|
class=""
|
|
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
|
|
>
|
|
<a><i class="fas fa-user has-text-inherit"></i> belefant</a>
|
|
</li>
|
|
<li
|
|
class=""
|
|
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
|
|
>
|
|
<a><i class="fas fa-user has-text-inherit"></i> aschultz</a>
|
|
</li>
|
|
<li
|
|
class=""
|
|
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
|
|
>
|
|
<a><i class="fas fa-user has-text-inherit"></i> zgummi</a>
|
|
</li>
|
|
<li
|
|
class=""
|
|
style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid var(--scm-border-color); border-radius: 4px;"
|
|
>
|
|
<a><i class="fas fa-user has-text-inherit"></i> nobody</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sg-sub-section" id="loading">
|
|
<h3 class="subtitle is-4">Loading</h3>
|
|
<div
|
|
class="is-flex"
|
|
style="flex-direction: column; align-items: center; justify-content: center; min-height: 256px;"
|
|
>
|
|
<img
|
|
alt="Loading ..."
|
|
src="/ui-webapp/images/loading.svg"
|
|
style="margin-bottom: 0.75rem; width: 128px; height: 128px;"
|
|
/>
|
|
<p class="has-text-centered">loading plugin information</p>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<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">
|
|
<button class="delete"> </button>
|
|
<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">
|
|
<button class="delete"> </button>
|
|
<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">
|
|
<button class="delete"> </button>
|
|
<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">
|
|
<button class="delete"> </button>
|
|
<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">
|
|
<button class="delete"> </button>
|
|
<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>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Tags</h3>
|
|
<div class="notification">Tags can use background in all full base colors.</div>
|
|
<span class="tag is-info"><span class="fa fa-tag t-spacing-0-1-14"> </span> tip</span>
|
|
<span class="tag is-success">OPEN</span> <span class="tag is-danger">Warning</span>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Tooltips</h3>
|
|
<div class="notification content">
|
|
Tooltips add context to the element and should follow rules for UX writing.
|
|
<br />
|
|
<ul>
|
|
<li>Use tooltips instead of titles for buttons.</li>
|
|
<li>Do not set an HTML title if a tooltip is also defined.</li>
|
|
<li>The font-weight of tooltips should be normal.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Switch to side-by-side view">
|
|
<a aria-label="Switch to side-by-side view" class="button" style="width: 50px; cursor: pointer;">
|
|
<i class="fas fa-columns"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Open in Fullscreen">
|
|
<a class="button" style="width: 50px; cursor: pointer;">
|
|
<i class="fas fa-search-plus"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Jump to the previous version of the file">
|
|
<a
|
|
aria-label="Jump to the previous version of the file"
|
|
class="button"
|
|
style="width: 50px; cursor: pointer;"
|
|
>
|
|
<i class="fas fa-file-code has-text-inherit"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tooltip has-tooltip-top" data-tooltip="Jump to source file">
|
|
<a aria-label="Jump to source file" class="button" style="width: 50px; cursor: pointer;">
|
|
<i class="fas fa-file-code has-text-inherit"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 2rem;">
|
|
<span
|
|
class="tooltip has-tooltip-top"
|
|
data-tooltip="Reviewers:
|
|
- EmilWithoutEmail
|
|
- Jochen Sander
|
|
- Florian Scholdei
|
|
- Susi Sonne"
|
|
>
|
|
<i class="fas fa-users has-text-secondary"></i>
|
|
</span>
|
|
<span class="tooltip has-tooltip-right" data-tooltip="Copy Permalink to Clipboard" style="margin-left: 2rem;">
|
|
<i class="fas fa-link has-text-inherit" style="color: #dbdbdb; opacity: 0.75;"></i>
|
|
</span>
|
|
<span
|
|
class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
|
|
data-tooltip="This is a help message"
|
|
style="margin-left: 2rem;"
|
|
>
|
|
<i class="fas fa-question-circle has-text-info"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Popover</h3>
|
|
<div class="notification">Popover can be used similar to the tooltips.</div>
|
|
<div class="box" style="width: 500px">
|
|
<div style="height: 1.5em;">
|
|
<h1 class="has-text-weight-bold is-size-5">Signatures</h1>
|
|
</div>
|
|
<hr style="margin: 0.5em 0;" />
|
|
<div class="swL">
|
|
<div>Key ID: <a>0x0ABC1DEF234GH567</a></div>
|
|
<div>Status: <span class="has-text-success">verified</span></div>
|
|
<div>Key Owner: fscholdei</div>
|
|
<div>Contacts:</div>
|
|
<div>- Florian Scholdei <florian.scholdei@cloudogu.com></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Modals</h3>
|
|
<div class="notification content">
|
|
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.
|
|
<br />
|
|
<ul>
|
|
<li>
|
|
Even if the content of the modals differs, they all should use the same basic class
|
|
<code>.modal-card</code> to ensure a constant layout.
|
|
</li>
|
|
<li>Buttons inside the modals should use the standard button formats.</li>
|
|
<li>
|
|
If a modal footer contains two action buttons, the critical one should be on the left. In addition, they
|
|
should differ in color.
|
|
</li>
|
|
<li>Modals without actions do not require a footer.</li>
|
|
<li>Normal modals have a gray header. Otherwise the main colors with 25-75% opacity should be used.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-card card">
|
|
<header class="modal-card-head has-background-secondary-less">
|
|
<p class="modal-card-title is-marginless">Reject Pull Request</p>
|
|
<button aria-label="close" class="delete"></button>
|
|
</header>
|
|
<section class="modal-card-body">Do you really want to reject this pull request?</section>
|
|
<footer class="modal-card-foot">
|
|
<div class="field is-grouped">
|
|
<p class="control">
|
|
<button class="button is-info is-outlined">Yes</button>
|
|
</p>
|
|
<p class="control">
|
|
<button class="button is-info">No</button>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<br />
|
|
<div class="modal-card card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title is-marginless">Cannot be merged automatically</p>
|
|
<button aria-label="close" class="delete"> </button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<div class="content">
|
|
<p>
|
|
<em>Existing conflicts are shown in the tab 'Conflicts'.</em>
|
|
</p>
|
|
<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>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<h3 class="subtitle is-4">Toasts</h3>
|
|
<div
|
|
style="padding: 1.5rem; color: #905515; background-color: #ffeeab; max-width: 18rem; font-size: 0.75rem; border-radius: 5px; animation: 0.5s slide-up;"
|
|
>
|
|
<h1 style="margin-bottom: 0.25rem; font-weight: bold;">New Changes</h1>
|
|
<p>The underlying Pull-Request has changed. Press reload to see the changes.</p>
|
|
<p>Warning: Non saved modification will be lost.</p>
|
|
<div style="display: flex; padding-top: 0.5rem; width: 100%;">
|
|
<button
|
|
class="button"
|
|
style="margin-right: 0.5rem; flex-grow: 1; color: #905515; border-color: #905515; background-color: #ffeeab; font-size: 0.75rem;"
|
|
>
|
|
<i class="fas fa-fw fa-redo" style="margin-right: 0.25rem;"></i>
|
|
Reload
|
|
</button>
|
|
<button
|
|
class="button"
|
|
style="flex-grow: 1; color: #905515; border-color: #905515; background-color: #ffeeab; font-size: 0.75rem;"
|
|
>
|
|
<i class="fas fa-fw fa-times" style="margin-right: 0.25rem;"></i>
|
|
Ignore
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="examples-of-use">
|
|
<div class="container">
|
|
<h2 class="title is-3">Examples of Use</h2>
|
|
<hr />
|
|
<div class="sg-sub-section">
|
|
<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="media" style="padding: .5em .75em;">
|
|
<figure class="media-left" style="margin-top: 0.5rem; margin-right: 0.5rem;">
|
|
<div class="image" style="width: 35px; height: 35px;">
|
|
<img
|
|
alt="Sebastian Sdorra"
|
|
class="has-rounded-border"
|
|
src="https://gravatar.com/avatar/c8afb88b3858e1202d582122f94ed5f6?size=64&default=identicon"
|
|
/>
|
|
</div>
|
|
</figure>
|
|
<div class="media-right" style="margin-left: 0; width: 100%;">
|
|
<h4 class="has-text-weight-bold is-ellipsis-overflow">
|
|
added system property to disable extraction of core plugins
|
|
</h4>
|
|
<p class="is-hidden-touch">
|
|
Changeset
|
|
<a>41cc612</a>
|
|
was committed
|
|
<time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;" title="2018-10-16 14:14:16"
|
|
>over 2 years ago
|
|
</time>
|
|
</p>
|
|
<p class="is-hidden-desktop">
|
|
Committed
|
|
<a>41cc612</a>
|
|
<time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;" title="2018-10-16 14:14:16"
|
|
>over 2 years ago
|
|
</time>
|
|
</p>
|
|
<div style="display: flex; flex-direction: row;">
|
|
<p class="is-size-7 is-ellipsis-overflow" style="margin-top: 0.5rem;">
|
|
Authored by
|
|
<a title="Send mail to Sebastian Sdorra">Sebastian Sdorra</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sg-sub-section">
|
|
<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="colums">
|
|
<div class="column" style="flex: 0 0 auto;">
|
|
<div style="margin-bottom: 2rem; padding: 1rem; border: 1px solid rgb(219, 219, 219); border-radius: 4px;">
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<h1 class="title is-inline is-marginless" style="margin-right: 0.5rem !important;">
|
|
#1497 Migrate integration tests to bdd
|
|
<span
|
|
class="tag is-light is-medium"
|
|
style="margin-top: 0.25rem; font-style: inherit; font-weight: normal;"
|
|
title="0 / 1 tasks done"
|
|
>0 / 1 tasks done</span
|
|
>
|
|
</h1>
|
|
</div>
|
|
<div class="media-right">
|
|
<div class="field is-grouped" style="">
|
|
<div class="control">
|
|
<button class="button is-link is-outlined" title="Subscribe" type="button">
|
|
<i class="fas fa-plus fa-fw has-text-inherit"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="media" style="">
|
|
<div class="media-content">
|
|
<div>
|
|
<span class="tag is-light is-medium" title="feature/bdd">feature/bdd</span>
|
|
<i class="fas fa-long-arrow-alt-right"> </i>
|
|
<span class="tag is-light is-medium" title="develop">develop</span>
|
|
</div>
|
|
</div>
|
|
<div class="media-right tag is-light is-medium">OPEN</div>
|
|
</div>
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<span class="is-word-break"
|
|
>Migrates the existing e2e tests towards a cucumber bdd-style and utilizes the integration-test-runner
|
|
package.<br />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media" style="margin-bottom: 1rem;">
|
|
<div class="media-content">
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-inline-flex" style="text-align: left; margin-right: 0; min-width: 5.5em;">
|
|
Author:
|
|
</div>
|
|
<div class="field-body is-inline-flex" style="flex-grow: 8;">
|
|
<div style="display: inline-block; font-weight: bold;">Emil Boyce</div>
|
|
|
|
<time
|
|
style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;"
|
|
title="2021-01-15 10:17:57"
|
|
>
|
|
11 days ago
|
|
</time>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-inline-flex" style="text-align: left; margin-right: 0; min-width: 5.5em;">
|
|
Reviewers:
|
|
</div>
|
|
<div class="field-body is-inline-flex" style="flex-grow: 8;">
|
|
<ul class="is-separated">
|
|
<li style="display: inline-block; font-weight: bold;">Jawad Mack</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="level">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<button class="button is-link is-outlined" type="button">
|
|
<span class="icon is-medium"><i class="fas fa-check has-text-inherit"></i></span>
|
|
<span>Approve </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
<div class="level-item">
|
|
<p class="control">
|
|
<button class="button is-warning" type="button">Reject Pull Request</button>
|
|
</p>
|
|
</div>
|
|
<div class="level-item">
|
|
<p class="control">
|
|
<button class="button is-primary" type="button">Merge Pull Request</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs">
|
|
<ul>
|
|
<li class="is-active"><a>Comments</a></li>
|
|
<li><a>Commits</a></li>
|
|
<li><a>Diff</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="comment-wrapper">
|
|
<div class="inline-comment" style="font-size: 0.9rem; padding: 0 1.5rem 1.5rem;">
|
|
<article class="media">
|
|
<div class="media-content is-clipped content" style="margin-bottom: 0;">
|
|
<a title="Collapse" style="color: inherit;">
|
|
<span class="icon is-small"><i class="fa fa-angle-down"></i></span>
|
|
<span style="margin-left: 5px;"><strong>Jawad Mack</strong> </span>
|
|
</a>
|
|
<span style="padding: 0 0.4rem">
|
|
<time
|
|
style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;"
|
|
title="2020-12-26 11:31:17"
|
|
>a month ago</time
|
|
>
|
|
</span>
|
|
<span
|
|
class="tag is-light is-rounded has-cursor-pointer"
|
|
style="font-style: inherit; font-weight: inherit;"
|
|
title="The comment is related to an older of the source or target branch. Click here to see the original context."
|
|
>
|
|
<i class="fas fa-clock has-text-link"></i>
|
|
outdated
|
|
</span>
|
|
<br />
|
|
<div class="content is-word-break">
|
|
<p>Maybe you can get a more elegant solution</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-right">
|
|
<div class="level-right">
|
|
<a class="level-item" title="Delete">
|
|
<span class="icon is-small"><i class="fas fa-trash has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Update">
|
|
<span class="icon is-small"><i class="fas fa-edit has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Reply">
|
|
<span class="icon is-small"><i class="fas fa-reply has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Make task from comment">
|
|
<span class="icon is-small"><i class="fas fa-tasks has-text-link"></i></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="comment-wrapper" style="border-top: 1px solid rgb(219, 219, 219);">
|
|
<div class="inline-comment" style="font-size: 0.9rem; padding: 1.5rem;">
|
|
<article class="media">
|
|
<div class="media-content is-clipped content" style="margin-bottom: 0;">
|
|
<a title="Collapse" style="color: inherit;">
|
|
<span class="icon is-small"><i class="fa fa-angle-down"></i></span>
|
|
<span style="margin-left: 5px;"><strong>Emil Boyce</strong> </span>
|
|
</a>
|
|
<span style="padding: 0 0.4rem">
|
|
<time
|
|
style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;"
|
|
title="2021-01-20 09:39:17"
|
|
>6 days ago</time
|
|
>
|
|
</span>
|
|
<br />
|
|
<div class="content is-word-break">
|
|
<p>Changelog updated</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-right">
|
|
<div class="level-right">
|
|
<a class="level-item" title="Delete">
|
|
<span class="icon is-small"><i class="fas fa-trash has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Update">
|
|
<span class="icon is-small"><i class="fas fa-edit has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Reply">
|
|
<span class="icon is-small"><i class="fas fa-reply has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Make task from comment">
|
|
<span class="icon is-small"><i class="fas fa-tasks has-text-link"></i></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="comment-wrapper" style="border-top: 1px solid rgb(219, 219, 219);">
|
|
<div class="inline-comment" style="font-size: 0.9rem; padding: 1.5rem;">
|
|
<article class="media">
|
|
<div class="media-content is-clipped content" style="margin-bottom: 0;">
|
|
<a title="Collapse" style="color: inherit;">
|
|
<span class="icon is-small"><i class="fa fa-angle-down"></i></span>
|
|
<span style="margin-left: 5px;"><strong>Ebrahim Mcneil</strong> </span>
|
|
</a>
|
|
<span style="padding: 0 0.4rem">
|
|
<time
|
|
style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;"
|
|
title="2021-01-26 13:03:27"
|
|
>12 minutes ago</time
|
|
>
|
|
</span>
|
|
<span style="font-style: inherit; font-weight: inherit;">
|
|
<span class="tag is-warning is-rounded"><i class="fas fa-check-circle"></i> Task</span>
|
|
</span>
|
|
<br />
|
|
<div class="content is-word-break">
|
|
<p>Migrate store name</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-right">
|
|
<div class="level-right">
|
|
<a class="level-item" title="Delete">
|
|
<span class="icon is-small"><i class="fas fa-trash has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Update">
|
|
<span class="icon is-small"><i class="fas fa-edit has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Reply">
|
|
<span class="icon is-small"><i class="fas fa-reply has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Mark as done">
|
|
<span class="icon is-small"><i class="fas fa-check-circle has-text-link"></i></span>
|
|
</a>
|
|
<a class="level-item" title="Make comment from task">
|
|
<span class="icon is-small"><i class="fas fa-comment-dots has-text-link"></i></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<article class="media">
|
|
<div class="media-content">
|
|
<div class="field">
|
|
<div class="control">
|
|
<textarea class="textarea" placeholder="Add comment"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<label class="radio" style="margin-right: 0.5em;">
|
|
<input checked="" name="comment_type_editor" type="radio" value="COMMENT" /> Comment
|
|
</label>
|
|
<label class="radio" style="">
|
|
<input name="comment_type_editor" type="radio" value="TASK_TODO" /> Task
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="level">
|
|
<div class="level-left"></div>
|
|
<div class="level-right">
|
|
<div class="level-item">
|
|
<button class="button is-primary" data-testid="submit-button" disabled="" type="submit">
|
|
Add comment
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|