Skip to content

G
gitlab-ce
Commit 198926dc authored by Jacob Schatz's avatar Jacob Schatz
Browse files
Options

Merge branch 'enhanced-dropdow-css' into 'master' 

New dropdown UI

See #3279 for the designs

See merge request !3110
parents 60ddd5ef 22b89f35
Hide whitespace changes
Inline Side-by-side
Showing with 408 additions and 2 deletions
app/assets/stylesheets/framework/dropdowns.scss
View file @ 198926dc
...@@ -17,6 +17,47 @@ ...@@ -17,6 +17,47 @@
.dropdown-menu { .dropdown-menu {
display: block; display: block;
} }
.dropdown-menu-toggle {
border-color: $dropdown-toggle-hover-border-color;
.fa {
color: $dropdown-toggle-hover-icon-color;
}
}
}
.dropdown-menu-toggle {
position: relative;
min-width: 160px;
padding: 5px 20px 5px 10px;
background-color: $dropdown-toggle-bg;
color: $dropdown-toggle-color;
font-size: 15px;
text-align: left;
border: 1px solid $dropdown-toggle-border-color;
border-radius: 2px;
outline: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.fa {
position: absolute;
top: 50%;
right: 6px;
margin-top: -4px;
color: $dropdown-toggle-icon-color;
font-size: 10px;
}
&:hover, {
border-color: $dropdown-toggle-hover-border-color;
.fa {
color: $dropdown-toggle-hover-icon-color;
}
}
} }
.dropdown-menu { .dropdown-menu {
...@@ -36,6 +77,21 @@ ...@@ -36,6 +77,21 @@
border-radius: $border-radius-base; border-radius: $border-radius-base;
box-shadow: 0 2px 4px $dropdown-shadow-color; box-shadow: 0 2px 4px $dropdown-shadow-color;
&.is-loading {
.dropdown-content {
display: none;
}
.dropdown-loading {
display: block;
}
}
ul {
margin: 0;
padding: 0;
}
li { li {
text-align: left; text-align: left;
list-style: none; list-style: none;
...@@ -68,6 +124,57 @@ ...@@ -68,6 +124,57 @@
} }
} }
.dropdown-menu-paging {
.dropdown-page-two {
display: none;
}
&.is-page-two {
.dropdown-page-one {
display: none;
}
.dropdown-page-two {
display: block;
}
}
}
.dropdown-menu-user {
.avatar {
float: left;
width: 30px;
height: 30px;
margin: 0 10px 0 0;
}
}
.dropdown-menu-user-link {
padding-top: 7px;
padding-bottom: 7px;
}
.dropdown-menu-user-full-name {
display: block;
margin-bottom: 2px;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dropdown-menu-user-username {
display: block;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dropdown-select {
width: 280px;
}
.dropdown-menu-align-right { .dropdown-menu-align-right {
left: auto; left: auto;
right: 0; right: 0;
...@@ -101,3 +208,112 @@ ...@@ -101,3 +208,112 @@
font-size: 13px; font-size: 13px;
line-height: 22px; line-height: 22px;
} }
.dropdown-title {
position: relative;
margin-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
font-weight: 600;
line-height: 1;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: 1px solid $dropdown-divider-color;
overflow: hidden;
}
.dropdown-title-button {
position: absolute;
top: -1px;
padding: 0;
color: $dropdown-title-btn-color;
font-size: 14px;
border: 0;
background: none;
&:hover {
color: darken($dropdown-title-btn-color, 15%);
}
}
.dropdown-menu-close {
right: 0;
}
.dropdown-menu-back {
left: 0;
}
.dropdown-input {
position: relative;
margin-bottom: 10px;
.fa {
position: absolute;
top: 10px;
right: 10px;
color: #C7C7C7;
font-size: 12px;
pointer-events: none;
}
}
.dropdown-input-field {
width: 100%;
padding: 0 7px;
color: $dropdown-input-color;
line-height: 30px;
border: 1px solid $dropdown-divider-color;
border-radius: 2px;
outline: 0;
&:focus {
color: $dropdown-link-color;
border-color: $dropdown-input-focus-border;
box-shadow: 0 0 4px $dropdown-input-focus-shadow;
+ .fa {
color: $dropdown-link-color;
}
}
&:hover {
+ .fa {
color: $dropdown-link-color;
}
}
}
.dropdown-content {
max-height: 200px;
overflow-y: scroll;
}
.dropdown-footer {
padding-top: 10px;
margin-top: 10px;
font-size: 13px;
border-top: 1px solid $dropdown-divider-color;
}
.dropdown-loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 9;
background-color: $dropdown-loading-bg;
font-size: 28px;
.fa {
position: absolute;
top: 50%;
left: 50%;
margin-top: -14px;
margin-left: -14px;
}
}
app/assets/stylesheets/framework/variables.scss
View file @ 198926dc
...@@ -138,3 +138,15 @@ $dropdown-shadow-color: rgba(#000, .1); ...@@ -138,3 +138,15 @@ $dropdown-shadow-color: rgba(#000, .1);
$dropdown-divider-color: rgba(#000, .1); $dropdown-divider-color: rgba(#000, .1);
$dropdown-header-color: #959494; $dropdown-header-color: #959494;
$dropdown-caret-color: #54565B; $dropdown-caret-color: #54565B;
$dropdown-title-btn-color: #BFBFBF;
$dropdown-input-color: #C7C7C7;
$dropdown-input-focus-border: rgb(58, 171, 240);
$dropdown-input-focus-shadow: rgba(#000, .2);
$dropdown-loading-bg: rgba(#fff, .6);
$dropdown-toggle-bg: #fff;
$dropdown-toggle-color: #626262;
$dropdown-toggle-border-color: #EAEAEA;
$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
$dropdown-toggle-icon-color: #C4C4C4;
$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
app/views/help/ui.html.haml
View file @ 198926dc
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
= link_to 'Nav', '#nav' = link_to 'Nav', '#nav'
%li %li
= link_to 'Buttons', '#buttons' = link_to 'Buttons', '#buttons'
%li
= link_to 'Dropdowns', '#dropdowns'
%li %li
= link_to 'Panels', '#panels' = link_to 'Panels', '#panels'
%li %li
...@@ -180,9 +182,9 @@ ...@@ -180,9 +182,9 @@
.nav-controls .nav-controls
= text_field_tag 'sample', nil, class: 'form-control' = text_field_tag 'sample', nil, class: 'form-control'
.dropdown .dropdown
%button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'} %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
%span Sort by name %span Sort by name
%b.caret = icon('chevron-down')
%ul.dropdown-menu %ul.dropdown-menu
%li %li
%a Sort by date %a Sort by date
...@@ -212,6 +214,182 @@ ...@@ -212,6 +214,182 @@
%button.btn.btn-danger{:type => "button"} Danger %button.btn.btn-danger{:type => "button"} Danger
%button.btn.btn-link{:type => "button"} Link %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(current_user, size: 30)
%strong.dropdown-menu-user-full-name
= current_user.name
.dropdown-menu-user-username
= current_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(current_user, size: 30)
%strong.dropdown-menu-user-full-name
= current_user.name
.dropdown-menu-user-username
= current_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
%h2#panels Panels %h2#panels Panels
.row .row
......
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