Commit ed787e15 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'rs-delimit-in-ui-guide' into 'master'

Add a UI guide note about number_with_delimiter



See merge request !5220
parents af2bcffb 78d75652
# UI Guide for building GitLab # UI Guide for building GitLab
## GitLab UI development kit ## GitLab UI development kit
We created a page inside GitLab where you can check commonly used html and css elements. We created a page inside GitLab where you can check commonly used html and css elements.
When you run GitLab instance locally - just visit http://localhost:3000/help/ui page to see UI examples When you run GitLab instance locally - just visit http://localhost:3000/help/ui page to see UI examples
you can use during GitLab development. you can use during GitLab development.
## Design repository ## Design repository
All design files are stored in the [gitlab-design](https://gitlab.com/gitlab-org/gitlab-design) All design files are stored in the [gitlab-design](https://gitlab.com/gitlab-org/gitlab-design)
repository and maintained by GitLab UX designers. repository and maintained by GitLab UX designers.
## Navigation ## Navigation
GitLab's layout contains 2 sections: the left sidebar and the content. The left sidebar contains a static navigation menu. GitLab's layout contains 2 sections: the left sidebar and the content. The left sidebar contains a static navigation menu.
This menu will be visible regardless of what page you visit. The left sidebar also contains the GitLab logo This menu will be visible regardless of what page you visit. The left sidebar also contains the GitLab logo
and the current user's profile picture. The content section contains a header and the content itself. and the current user's profile picture. The content section contains a header and the content itself.
The header describes the current GitLab page and what navigation is The header describes the current GitLab page and what navigation is
available to user in this area. Depending on the area (project, group, profile setting) the header name and navigation may change. For example when user visits one of the available to user in this area. Depending on the area (project, group, profile setting) the header name and navigation may change. For example when user visits one of the
project pages the header will contain a project name and navigation for that project. When the user visits a group page it will contain a group name and navigation related to this group. project pages the header will contain a project name and navigation for that project. When the user visits a group page it will contain a group name and navigation related to this group.
### Adding new tab to header navigation ### Adding new tab to header navigation
We try to keep the amount of tabs in the header navigation between 5 and 10 so that it fits on a typical laptop screen. We also try not to confuse the user with too many options. Ideally each We try to keep the amount of tabs in the header navigation between 5 and 10 so that it fits on a typical laptop screen. We also try not to confuse the user with too many options. Ideally each
tab should represent separate functionality. Everything related to the issue tab should represent separate functionality. Everything related to the issue
tracker should be under the 'Issues' tab while everything related to the wiki should tracker should be under the 'Issues' tab while everything related to the wiki should
be under 'Wiki' tab and so on and so forth. be under 'Wiki' tab and so on and so forth.
When adding a new tab to the header don't use more than 2 words for text in the link. When adding a new tab to the header don't use more than 2 words for text in the link.
We want to keep links short and easy to remember and fit all of them in the small screen. We want to keep links short and easy to remember and fit all of them in the small screen.
## Mobile screen size ## Mobile screen size
We want GitLab to work well on small mobile screens as well. Size limitations make it is impossible to fit everything on a mobile screen. In this case it is OK to hide We want GitLab to work well on small mobile screens as well. Size limitations make it is impossible to fit everything on a mobile screen. In this case it is OK to hide
part of the UI for smaller resolutions in favor of a better user experience. part of the UI for smaller resolutions in favor of a better user experience.
However core functionality like browsing files, creating issues, writing comments, should However core functionality like browsing files, creating issues, writing comments, should
be available on all resolutions. be available on all resolutions.
## Icons ## Icons
* `trash` icon for button or link that does destructive action like removing * `trash` icon for button or link that does destructive action like removing
information from database or file system information from database or file system
* `x` icon for closing/hiding UI element. For example close modal window * `x` icon for closing/hiding UI element. For example close modal window
* `pencil` icon for edit button or link * `pencil` icon for edit button or link
...@@ -52,8 +52,14 @@ information from database or file system ...@@ -52,8 +52,14 @@ information from database or file system
* Button should contain icon or text. Exceptions should be approved by UX designer. * Button should contain icon or text. Exceptions should be approved by UX designer.
* Use red button for destructive actions (not revertable). For example removing issue. * Use red button for destructive actions (not revertable). For example removing issue.
* Use green or blue button for primary action. Primary button should be only one. * Use green or blue button for primary action. Primary button should be only one.
Do not use both green and blue button in one form. Do not use both green and blue button in one form.
* For all other cases use default white button. * For all other cases use default white button.
* Text button should have only first word capitalized. So should be "Create issue" instead of "Create Issue" * Text button should have only first word capitalized. So should be "Create issue" instead of "Create Issue"
## Counts
* Always use the [`number_with_delimiter`][number_with_delimiter] helper to
display counts in the UI.
[number_with_delimiter]: http://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html#method-i-number_with_delimiter
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment