Skip to content

G
gitlab-ce
Commit a52302b5 authored by Mayra Cabrera's avatar Mayra Cabrera
Browse files
Options

Merge branch 'bye-bye-ui' into 'master' 

Removes an old UI page that's no-longer needed

See merge request gitlab-org/gitlab!38277
parents ec247475 afeb47ad
Hide whitespace changes
Inline Side-by-side
Showing with 5 additions and 542 deletions
.haml-lint_todo.yml
View file @ a52302b5
......@@ -113,7 +113,6 @@ linters:
- "app/views/help/instance_configuration.html.haml"
- "app/views/help/instance_configuration/_gitlab_ci.html.haml"
- "app/views/help/instance_configuration/_gitlab_pages.html.haml"
- "app/views/help/ui.html.haml"
- "app/views/import/bitbucket/status.html.haml"
- "app/views/import/bitbucket_server/status.html.haml"
- "app/views/invites/show.html.haml"
......
app/views/help/ui.html.haml deleted 100644 → 0
View file @ ec247475
- 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
= sprite_icon('pencil')
= link_to '#', class: link_classes + 'btn btn-svg btn-default' do
= sprite_icon('rss', css_class: 'qa-rss-icon', size: 16)
.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")}.
changelogs/unreleased/bye-bye-ui.yml 0 → 100644
View file @ a52302b5
---
title: Removes the old UI page
merge_request: 38277
author:
type: other
config/routes/help.rb
View file @ a52302b5
get 'help' => 'help#index'
get 'help/shortcuts' => 'help#shortcuts'
get 'help/ui' => 'help#ui'
get 'help/instance_configuration' => 'help#instance_configuration'
get 'help/*path' => 'help#show', as: :help_page
locale/gitlab.pot
View file @ a52302b5
......@@ -25590,9 +25590,6 @@ msgstr ""
msgid "U2F only works with HTTPS-enabled websites. Contact your administrator for more details."
msgstr ""
msgid "UI Development Kit"
msgstr ""
msgid "URL"
msgstr ""
......
spec/controllers/help_controller_spec.rb
View file @ a52302b5
......@@ -159,15 +159,6 @@ RSpec.describe HelpController do
end
end
describe 'GET #ui' do
context 'for UI Development Kit' do
it 'renders found' do
get :ui
expect(response).to have_gitlab_http_status(:ok)
end
end
end
def stub_readme(content)
expect(File).to receive(:read).and_return(content)
end
......
spec/routing/routing_spec.rb
View file @ a52302b5
......@@ -115,7 +115,6 @@ end
# help GET /help(.:format) help#index
# help_page GET /help/*path(.:format) help#show
# help_shortcuts GET /help/shortcuts(.:format) help#shortcuts
# help_ui GET /help/ui(.:format) help#ui
RSpec.describe HelpController, "routing" do
it "to #index" do
expect(get("/help")).to route_to('help#index')
......@@ -131,9 +130,6 @@ RSpec.describe HelpController, "routing" do
expect(get(path)).to route_to('help#show',
path: 'workflow/protected_branches/protected_branches1',
format: 'png')
path = '/help/ui'
expect(get(path)).to route_to('help#ui')
end
end
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7