diff options
Diffstat (limited to 'app/views/help/ui.html.haml')
| -rw-r--r-- | app/views/help/ui.html.haml | 524 |
1 files changed, 0 insertions, 524 deletions
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml deleted file mode 100644 index 5c216ee1ec0..00000000000 --- a/app/views/help/ui.html.haml +++ /dev/null @@ -1,524 +0,0 @@ -- 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." -- link_classes = "flex-grow-1 mx-1 " - -.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.user-cover-block - = render layout: 'users/cover_controls' do - = link_to '#', class: link_classes + 'btn btn-default' do - = icon('pencil') - = link_to '#', class: link_classes + 'btn btn-default' do - = icon('rss') - .avatar-holder - = image_tag avatar_icon_for_email('admin@example.com', 90), class: "avatar s90", alt: '' - .cover-title - John Smith - - .cover-desc.cgray - = lorem - - %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 .hover-list - .example - %ul.hover-list - %li - One item - %li - One item - %li - One item - - .lead - List inside panel - .example - .card - .card-header Your list - %ul.content-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.nav.nav-tabs - %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 - = link_to 'Sort by date', '#' - - = link_to 'New issue', '#', class: 'btn btn-success 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" } Secondary - %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.float-left - %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } - Dropdown - = icon('chevron-down') - %ul.dropdown-menu - %li - %a{ href: "#" } - Dropdown option - .dropdown.inline.float-right - %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } - Dropdown - = icon('chevron-down') - %ul.dropdown-menu.dropdown-menu-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 their 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 their name while using the search field. - .dropdown-loading.text-center - .spinner.spinner-md.mt-8 - - .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.text-center - .spinner.spinner-md.mt-8 - - .example - %div - = dropdown_tag("Projects", options: { title: "Go to project", filter: true, placeholder: "Filter projects" }) - - %h2#panels Panels - - .row - .col-md-6 - .card.bg-success - .card-header Success - .card-body - = lorem - .card.bg-primary - .card-header Primary - .card-body - = lorem - .card.bg-info - .card-header Info - .card-body - = lorem - .col-md-6 - .card.bg-warning - .card-header Warning - .card-body - = lorem - .card.bg-danger - .card-header Danger - .card-body - = lorem - - %h2#alerts Alerts - - .row - .col-md-6 - .alert.alert-success - = 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-group.row - %label.col-sm-2.col-form-label{ :for => "inputEmail3" } Email - .col-sm-10 - %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/ - .form-group.row - %label.col-sm-2.col-form-label{ :for => "inputPassword3" } Password - .col-sm-10 - %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/ - .form-group.row - .offset-sm-2.col-sm-10 - .form-check - %input.form-check-input{ :type => "checkbox" }/ - %label.form-check-label - Remember me - .form-group.row - .offset-sm-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" }/ - .form-check - %input.form-check-input{ :type => "checkbox" }/ - %label.form-check-label - Remember me - %button.btn.btn-default{ :type => "submit" } Sign in - - %h2#file File - %h4 - %code .file-holder - - - blob = Snippet.new(content: "Wow\nSuch\nFile").blob - .example - .file-holder - .js-file-title.file-title - Awesome file - .file-actions - .btn-group - %a.btn Edit - %a.btn.btn-danger Remove - = render 'shared/file_highlight', blob: blob - - %h2#markdown Markdown - %h4 - %code .md - - 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")}. |