552 lines
15 KiB
Text
552 lines
15 KiB
Text
- page_title "UI Development Kit", "Help"
|
|
- lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."
|
|
|
|
.gitlab-ui-dev-kit
|
|
%h1 GitLab UI development kit
|
|
%p.light
|
|
Use page inspector in your browser to check element classes and structure
|
|
of examples below.
|
|
%hr
|
|
%ul
|
|
%li
|
|
= link_to 'Blocks', '#blocks'
|
|
%li
|
|
= link_to 'Lists', '#lists'
|
|
%li
|
|
= link_to 'Tables', '#tables'
|
|
%li
|
|
= link_to 'Nav', '#nav'
|
|
%li
|
|
= link_to 'Buttons', '#buttons'
|
|
%li
|
|
= link_to 'Dropdowns', '#dropdowns'
|
|
%li
|
|
= link_to 'Panels', '#panels'
|
|
%li
|
|
= link_to 'Alerts', '#alerts'
|
|
%li
|
|
= link_to 'Forms', '#forms'
|
|
%li
|
|
= link_to 'Files', '#file'
|
|
%li
|
|
= link_to 'Markdown', '#markdown'
|
|
|
|
%h2#blocks Blocks
|
|
|
|
.lead
|
|
Content block separated with botton border
|
|
%code .content-block
|
|
|
|
.example
|
|
.content-block
|
|
%h4 Normal block inside content
|
|
= lorem
|
|
|
|
.content-block
|
|
%h4 Second block
|
|
= lorem
|
|
|
|
.lead
|
|
Gray content block with side padding using
|
|
%code .row-content-block
|
|
|
|
.example
|
|
.row-content-block
|
|
%h4 Normal block inside content
|
|
= lorem
|
|
|
|
.row-content-block.second-block
|
|
%h4 Second block
|
|
= lorem
|
|
|
|
|
|
.lead
|
|
Cover block for profile page with avatar, name and description
|
|
%code .cover-block
|
|
.example
|
|
.cover-block
|
|
.avatar-holder
|
|
= image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: ''
|
|
.cover-title
|
|
John Smith
|
|
|
|
.cover-desc
|
|
= lorem
|
|
|
|
.cover-controls
|
|
= link_to '#', class: 'btn btn-gray' do
|
|
= icon('pencil')
|
|
|
|
= link_to '#', class: 'btn btn-gray' do
|
|
= icon('rss')
|
|
|
|
%h2#lists Lists
|
|
|
|
.lead
|
|
Simple list using
|
|
%code .content-list
|
|
|
|
.example
|
|
%ul.content-list
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
|
|
.lead
|
|
List with avatar, title and description using
|
|
%code .content-list
|
|
|
|
.example
|
|
%ul.content-list
|
|
%li
|
|
= image_tag 'no_avatar.png', class: 'avatar s40'
|
|
.title Title
|
|
.description Description
|
|
%li
|
|
= image_tag 'no_avatar.png', class: 'avatar s40'
|
|
.title Title
|
|
.description Description
|
|
%li
|
|
= image_tag 'no_avatar.png', class: 'avatar s40'
|
|
.title Title
|
|
.description Description
|
|
|
|
.lead
|
|
List with hover effect
|
|
%code .well-list
|
|
.example
|
|
%ul.well-list
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
|
|
.lead
|
|
List inside panel
|
|
.example
|
|
.panel.panel-default
|
|
.panel-heading Your list
|
|
%ul.well-list
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
|
|
%h2#tables Tables
|
|
|
|
.example
|
|
%table.table
|
|
%thead
|
|
%tr
|
|
%th #
|
|
%th First Name
|
|
%th Last Name
|
|
%th Username
|
|
%tbody
|
|
%tr
|
|
%td 1
|
|
%td Mark
|
|
%td Otto
|
|
%td @mdo
|
|
%tr
|
|
%td 2
|
|
%td Jacob
|
|
%td Thornton
|
|
%td @fat
|
|
%tr
|
|
%td 3
|
|
%td Larry
|
|
%td the Bird
|
|
%td @twitter
|
|
|
|
%h2#navs Navigation
|
|
|
|
.lead
|
|
Holder for top page navigation. Includes navigation, search field, sorting and button
|
|
%code .top-area
|
|
|
|
.example
|
|
.top-area
|
|
%ul.nav-links
|
|
%li.active
|
|
%a Open
|
|
%li
|
|
%a Closed
|
|
.nav-controls
|
|
= text_field_tag 'sample', nil, class: 'form-control'
|
|
.dropdown
|
|
%button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
|
|
%span Sort by name
|
|
= icon('chevron-down')
|
|
%ul.dropdown-menu
|
|
%li
|
|
%a Sort by date
|
|
|
|
= link_to 'New issue', '#', class: 'btn btn-new btn-inverted'
|
|
|
|
.lead
|
|
Only nav links without button and search
|
|
%code .nav-links
|
|
.example
|
|
%ul.nav-links
|
|
%li.active
|
|
%a Open
|
|
%li
|
|
%a Closed
|
|
|
|
|
|
%h2#buttons Buttons
|
|
|
|
.example
|
|
%button.btn.btn-default{ :type => "button" } Default
|
|
%button.btn.btn-gray{ :type => "button" } Gray
|
|
%button.btn.btn-primary{ :type => "button" } Primary
|
|
%button.btn.btn-success{ :type => "button" } Success
|
|
%button.btn.btn-info{ :type => "button" } Info
|
|
%button.btn.btn-warning{ :type => "button" } Warning
|
|
%button.btn.btn-danger{ :type => "button" } Danger
|
|
%button.btn.btn-link{ :type => "button" } Link
|
|
|
|
%h2#dropdowns Dropdowns
|
|
|
|
.example
|
|
.clearfix
|
|
.dropdown.inline.pull-left
|
|
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
|
|
Dropdown
|
|
= icon('chevron-down')
|
|
%ul.dropdown-menu
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
.dropdown.inline.pull-right
|
|
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
|
|
Dropdown
|
|
= icon('chevron-down')
|
|
%ul.dropdown-menu.dropdown-menu-align-right
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
.example
|
|
%div
|
|
.dropdown.inline
|
|
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
|
|
Dropdown
|
|
= icon('chevron-down')
|
|
%ul.dropdown-menu.dropdown-menu-selectable
|
|
%li
|
|
%a.is-active{ href: "#" }
|
|
Dropdown option
|
|
.example
|
|
%div
|
|
.dropdown.inline
|
|
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
|
|
Dropdown
|
|
= icon('chevron-down')
|
|
.dropdown-menu.dropdown-select.dropdown-menu-selectable
|
|
.dropdown-title
|
|
%span Dropdown title
|
|
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
|
|
= icon('times')
|
|
.dropdown-input
|
|
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
|
|
= icon('search')
|
|
.dropdown-content
|
|
%ul
|
|
%li
|
|
%a.is-active{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li.divider
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
.dropdown-footer
|
|
%strong Tip:
|
|
If an author is not a member of this project, you can still filter by his name while using the search field.
|
|
.dropdown.inline
|
|
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
|
|
Dropdown loading
|
|
= icon('chevron-down')
|
|
.dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
|
|
.dropdown-title
|
|
%span Dropdown title
|
|
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
|
|
= icon('times')
|
|
.dropdown-input
|
|
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
|
|
= icon('search')
|
|
.dropdown-content
|
|
%ul
|
|
%li
|
|
%a.is-active{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li.divider
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
%li
|
|
%a{ href: "#" }
|
|
Dropdown option
|
|
.dropdown-footer
|
|
%strong Tip:
|
|
If an author is not a member of this project, you can still filter by his name while using the search field.
|
|
.dropdown-loading
|
|
= icon('spinner spin')
|
|
|
|
.example
|
|
%div
|
|
.dropdown.inline
|
|
%button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
|
|
Dropdown user
|
|
= icon('chevron-down')
|
|
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
|
|
.dropdown-title
|
|
%span Dropdown title
|
|
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
|
|
= icon('times')
|
|
.dropdown-input
|
|
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
|
|
= icon('search')
|
|
.dropdown-content
|
|
%ul
|
|
%li
|
|
%a.dropdown-menu-user-link.is-active{ href: "#" }
|
|
= link_to_member_avatar(@user, size: 30)
|
|
%strong.dropdown-menu-user-full-name
|
|
= @user.name
|
|
.dropdown-menu-user-username
|
|
= @user.to_reference
|
|
|
|
.example
|
|
%div
|
|
.dropdown.inline
|
|
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
|
|
Dropdown page 2
|
|
= icon('chevron-down')
|
|
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
|
|
.dropdown-page-one
|
|
.dropdown-title
|
|
%button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
|
|
= icon('arrow-left')
|
|
%span Dropdown title
|
|
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
|
|
= icon('times')
|
|
.dropdown-input
|
|
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
|
|
= icon('search')
|
|
.dropdown-content
|
|
%ul
|
|
%li
|
|
%a.dropdown-menu-user-link.is-active{ href: "#" }
|
|
= link_to_member_avatar(@user, size: 30)
|
|
%strong.dropdown-menu-user-full-name
|
|
= @user.name
|
|
.dropdown-menu-user-username
|
|
= @user.to_reference
|
|
.dropdown-page-two
|
|
.dropdown-title
|
|
%button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
|
|
= icon('arrow-left')
|
|
%span Create label
|
|
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
|
|
= icon('times')
|
|
.dropdown-input
|
|
%input.dropdown-input-field{ type: "search", placeholder: "Name new label" }
|
|
.dropdown-content
|
|
%button.btn.btn-primary
|
|
Create
|
|
|
|
.example
|
|
%div
|
|
.dropdown.inline
|
|
%button#js-project-dropdown.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
|
|
Projects
|
|
= icon('chevron-down')
|
|
.dropdown-menu.dropdown-select.dropdown-menu-selectable
|
|
.dropdown-title
|
|
%span Go to project
|
|
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
|
|
= icon('times')
|
|
.dropdown-input
|
|
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
|
|
= icon('search')
|
|
.dropdown-content
|
|
.dropdown-loading
|
|
= icon('spinner spin')
|
|
:javascript
|
|
$('#js-project-dropdown').glDropdown({
|
|
data: function (term, callback) {
|
|
Api.projects(term, { order_by: 'last_activity_at' }, function (data) {
|
|
callback(data);
|
|
});
|
|
},
|
|
text: function (project) {
|
|
return project.name_with_namespace || project.name;
|
|
},
|
|
selectable: true,
|
|
fieldName: "author_id",
|
|
filterable: true,
|
|
search: {
|
|
fields: ['name_with_namespace']
|
|
},
|
|
id: function (data) {
|
|
return data.id;
|
|
},
|
|
isSelected: function (data) {
|
|
return data.id === 2;
|
|
}
|
|
})
|
|
|
|
.example
|
|
%div
|
|
= dropdown_tag("Projects", options: { title: "Go to project", filter: true, placeholder: "Filter projects" })
|
|
|
|
%h2#panels Panels
|
|
|
|
.row
|
|
.col-md-6
|
|
.panel.panel-success
|
|
.panel-heading Success
|
|
.panel-body
|
|
= lorem
|
|
.panel.panel-primary
|
|
.panel-heading Primary
|
|
.panel-body
|
|
= lorem
|
|
.panel.panel-info
|
|
.panel-heading Info
|
|
.panel-body
|
|
= lorem
|
|
.col-md-6
|
|
.panel.panel-warning
|
|
.panel-heading Warning
|
|
.panel-body
|
|
= lorem
|
|
.panel.panel-danger
|
|
.panel-heading Danger
|
|
.panel-body
|
|
= lorem
|
|
|
|
%h2#alerts Alerts
|
|
|
|
.row
|
|
.col-md-6
|
|
.alert.alert-success
|
|
= lorem
|
|
.alert.alert-primary
|
|
= lorem
|
|
.alert.alert-info
|
|
= lorem
|
|
.col-md-6
|
|
.alert.alert-warning
|
|
= lorem
|
|
.alert.alert-danger
|
|
= lorem
|
|
|
|
%h2#forms Forms
|
|
|
|
.lead
|
|
Horizontal form when label rendered inline with input
|
|
%code form.horizontal-form
|
|
|
|
.example
|
|
%form.form-horizontal
|
|
.form-group
|
|
%label.col-sm-2.control-label{ :for => "inputEmail3" } Email
|
|
.col-sm-10
|
|
%input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/
|
|
.form-group
|
|
%label.col-sm-2.control-label{ :for => "inputPassword3" } Password
|
|
.col-sm-10
|
|
%input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/
|
|
.form-group
|
|
.col-sm-offset-2.col-sm-10
|
|
.checkbox
|
|
%label
|
|
%input{ :type => "checkbox" }/
|
|
Remember me
|
|
.form-group
|
|
.col-sm-offset-2.col-sm-10
|
|
%button.btn.btn-default{ :type => "submit" } Sign in
|
|
|
|
.lead
|
|
Form when label rendered above input
|
|
%code form
|
|
|
|
.example
|
|
%form
|
|
.form-group
|
|
%label{ :for => "exampleInputEmail1" } Email address
|
|
%input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/
|
|
.form-group
|
|
%label{ :for => "exampleInputPassword1" } Password
|
|
%input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
|
|
.checkbox
|
|
%label
|
|
%input{ :type => "checkbox" }/
|
|
Remember me
|
|
%button.btn.btn-default{ :type => "submit" } Sign in
|
|
|
|
%h2#file File
|
|
%h4
|
|
%code .file-holder
|
|
|
|
- blob = Snippet.new(content: "Wow\nSuch\nFile")
|
|
.example
|
|
.file-holder
|
|
.js-file-title.file-title
|
|
Awesome file
|
|
.file-actions
|
|
.btn-group
|
|
%a.btn Edit
|
|
%a.btn.btn-danger Remove
|
|
.file-contenta.code
|
|
= render 'shared/file_highlight', blob: blob
|
|
|
|
%h2#markdown Markdown
|
|
%h4
|
|
%code .md or .wiki and others
|
|
|
|
Markdown rendering has a bit different css and presented in next UI elements:
|
|
|
|
%ul
|
|
%li comment
|
|
%li issue, merge request description
|
|
%li wiki page
|
|
%li help page
|
|
|
|
You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("user/markdown")}.
|