Skip to content

G
gitlab-ce
Commit ab0d5e27 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray
Browse files
Options

Merge branch 'winh-cleanup-dropdowns' into 'master' 

Clean up new dropdown styles

Closes #39142 and #39446

See merge request gitlab-org/gitlab-ce!13676
parents 007e470c c07df632
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 361 deletions
app/assets/stylesheets/framework/dropdowns.scss
View file @ ab0d5e27
......@@ -143,20 +143,48 @@
}
}
@mixin dropdown-item-hover {
background-color: $dropdown-item-hover-bg;
color: $gl-text-color;
outline: 0;
// make sure the text color is not overriden
&.text-danger {
color: $brand-danger;
}
.avatar {
border-color: $white-light;
}
}
@mixin dropdown-link {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: block;
font-weight: $gl-font-weight-normal;
position: relative;
padding: 5px 8px;
padding: 8px 16px;
color: $gl-text-color;
line-height: initial;
border-radius: 2px;
white-space: nowrap;
line-height: normal;
white-space: normal;
overflow: hidden;
text-align: left;
width: 100%;
// make sure the text color is not overriden
&.text-danger {
color: $brand-danger;
}
&:hover,
&:active,
&:focus,
&.is-focused {
background-color: $dropdown-link-hover-bg;
@include dropdown-item-hover;
text-decoration: none;
.badge {
......@@ -166,6 +194,13 @@
&.dropdown-menu-user-link {
line-height: 16px;
padding-top: 10px;
padding-bottom: 7px;
white-space: nowrap;
.dropdown-menu-user-username {
display: block;
}
}
.icon-play {
......@@ -187,8 +222,8 @@
z-index: 300;
min-width: 240px;
max-width: 500px;
margin-top: 2px;
margin-bottom: 2px;
margin-top: $dropdown-vertical-offset;
margin-bottom: 24px;
font-size: 14px;
font-weight: $gl-font-weight-normal;
padding: 8px 0;
......@@ -197,6 +232,10 @@
border-radius: $border-radius-base;
box-shadow: 0 2px 4px $dropdown-shadow-color;
&.dropdown-open-top {
margin-bottom: $dropdown-vertical-offset;
}
&.dropdown-open-left {
right: 0;
left: auto;
......@@ -227,16 +266,27 @@
}
li {
display: block;
text-align: left;
list-style: none;
padding: 0 10px;
padding: 0 1px;
a,
button,
.menu-item {
@include dropdown-link;
}
}
.divider {
height: 1px;
margin: 6px 10px;
margin: 6px 0;
padding: 0;
background-color: $dropdown-divider-color;
&:hover {
background-color: $dropdown-divider-color;
}
}
.separator {
......@@ -247,10 +297,6 @@
background-color: $dropdown-divider-color;
}
a {
@include dropdown-link;
}
.dropdown-menu-empty-item a {
&:hover,
&:focus {
......@@ -262,7 +308,7 @@
color: $gl-text-color-secondary;
font-size: 13px;
line-height: 22px;
padding: 0 16px;
padding: 8px 16px;
}
&.capitalize-header .dropdown-header {
......@@ -277,7 +323,7 @@
.separator + .dropdown-header,
.separator + .dropdown-bold-header {
padding-top: 2px;
padding-top: 10px;
}
.unclickable {
......@@ -298,48 +344,28 @@
}
.dropdown-menu li {
padding: $gl-btn-padding;
cursor: pointer;
&.droplab-item-active button {
@include dropdown-item-hover;
}
> a,
> button {
display: flex;
margin: 0;
padding: 0;
border-radius: 0;
text-overflow: inherit;
background-color: inherit;
color: inherit;
border: inherit;
text-align: left;
&:hover,
&:focus {
background-color: inherit;
color: inherit;
}
&.btn .fa:not(:last-child) {
margin-left: 5px;
}
}
&:hover,
&:focus {
background-color: $dropdown-hover-color;
color: $white-light;
}
&.droplab-item-selected i {
visibility: visible;
}
&.divider {
margin: 0 8px;
padding: 0;
border-top: $gray-darkest;
}
.icon {
visibility: hidden;
}
......@@ -431,11 +457,6 @@
}
}
.dropdown-menu-user-link {
padding-top: 10px;
padding-bottom: 7px;
}
.dropdown-menu-user-full-name {
display: block;
font-weight: $gl-font-weight-normal;
......@@ -464,41 +485,44 @@
.dropdown-menu-align-right {
left: auto;
right: 0;
margin-top: -5px;
}
.dropdown-menu-selectable {
a {
padding-left: 26px;
position: relative;
li {
a {
padding: 8px 40px;
position: relative;
&.is-indeterminate,
&.is-active {
color: $gl-text-color;
&::before {
position: absolute;
left: 16px;
top: 16px;
transform: translateY(-50%);
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
&.is-indeterminate,
&.is-active {
font-weight: $gl-font-weight-bold;
color: $gl-text-color;
&::before {
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&.dropdown-menu-user-link {
&::before {
top: 50%;
}
}
}
}
&.is-indeterminate::before {
content: "\f068";
}
&.is-indeterminate::before {
content: "\f068";
}
&.is-active::before {
content: "\f00c";
position: absolute;
top: 50%;
transform: translateY(-50%);
&.is-active::before {
content: "\f00c";
}
}
}
}
......@@ -735,136 +759,6 @@
}
}
@mixin dropdown-item-hover {
background-color: $dropdown-item-hover-bg;
color: $gl-text-color;
}
// TODO: change global style and remove mixin
@mixin new-style-dropdown($selector: '') {
#{$selector}.dropdown-menu,
#{$selector}.dropdown-menu-nav {
margin-bottom: 24px;
&.dropdown-open-top {
margin-bottom: $dropdown-vertical-offset;
}
li {
display: block;
padding: 0 1px;
&:hover {
background-color: transparent;
}
&.divider {
margin: 6px 0;
&:hover {
background-color: $dropdown-divider-color;
}
}
&.dropdown-header {
padding: 8px 16px;
}
&.droplab-item-active button {
@include dropdown-item-hover;
}
a,
button,
.menu-item {
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
padding: 8px 16px;
text-align: left;
white-space: normal;
width: 100%;
font-weight: $gl-font-weight-normal;
line-height: normal;
&.dropdown-menu-user-link {
white-space: nowrap;
.dropdown-menu-user-username {
display: block;
}
}
// make sure the text color is not overriden
&.text-danger {
color: $brand-danger;
}
&.is-focused,
&:hover,
&:active,
&:focus {
@include dropdown-item-hover;
background-color: $dropdown-item-hover-bg;
color: $gl-text-color;
// make sure the text color is not overriden
&.text-danger {
color: $brand-danger;
}
}
&.is-active {
font-weight: inherit;
&::before {
top: 16px;
}
&.dropdown-menu-user-link::before {
top: 50%;
transform: translateY(-50%);
}
}
}
&.dropdown-menu-empty-item a {
&:hover,
&:focus {
background-color: transparent;
}
}
}
&.dropdown-menu-selectable {
li {
a {
padding: 8px 40px;
&.is-indeterminate::before,
&.is-active::before {
left: 16px;
}
}
}
}
}
#{$selector}.dropdown-menu-align-right {
margin-top: 2px;
}
.open {
#{$selector}.dropdown-menu,
#{$selector}.dropdown-menu-nav {
@media (max-width: $screen-xs-max) {
max-width: 100%;
}
}
}
}
@media (max-width: $screen-xs-max) {
.navbar-gitlab {
li.header-projects,
......@@ -891,9 +785,6 @@
}
}
@include new-style-dropdown('.breadcrumbs-list .dropdown ');
@include new-style-dropdown('.js-namespace-select + ');
header.header-content .dropdown-menu.projects-dropdown-menu {
padding: 0;
}
......
app/assets/stylesheets/framework/filters.scss
View file @ ab0d5e27
......@@ -50,8 +50,6 @@
}
.filtered-search-wrapper {
@include new-style-dropdown;
display: -webkit-flex;
display: flex;
......@@ -165,16 +163,6 @@
}
}
.droplab-dropdown li.filtered-search-token {
padding: 0;
&:hover,
&:focus {
background-color: inherit;
color: inherit;
}
}
.filtered-search-term {
.name {
background-color: inherit;
......@@ -336,21 +324,12 @@
.filtered-search-history-dropdown-content {
max-height: none;
}
.filtered-search-history-dropdown-item,
.filtered-search-history-clear-button {
@include dropdown-link;
overflow: hidden;
width: 100%;
margin: 0.5em 0;
background-color: transparent;
border: 0;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
.filtered-search-history-dropdown-item,
.filtered-search-history-clear-button {
white-space: nowrap;
text-overflow: ellipsis;
}
}
.filtered-search-history-dropdown-token {
......@@ -402,24 +381,9 @@
}
}
%filter-dropdown-item-btn-hover {
text-decoration: none;
outline: 0;
.avatar {
border-color: $white-light;
}
}
.droplab-dropdown .dropdown-menu .filter-dropdown-item {
.btn {
border: 0;
width: 100%;
text-align: left;
padding: 8px 16px;
text-overflow: ellipsis;
overflow: hidden;
border-radius: 0;
.fa {
width: 15px;
......@@ -434,11 +398,6 @@
height: 17px;
top: 0;
}
&:hover,
&:focus {
@extend %filter-dropdown-item-btn-hover;
}
}
.dropdown-light-content {
......@@ -459,17 +418,9 @@
word-break: break-all;
}
}
&.droplab-item-active .btn {
@extend %filter-dropdown-item-btn-hover;
}
}
.filter-dropdown-loading {
padding: 8px 16px;
text-align: center;
}
.issues-details-filters {
@include new-style-dropdown;
}
app/assets/stylesheets/framework/header.scss
View file @ ab0d5e27
......@@ -3,8 +3,6 @@
}
.navbar-gitlab {
@include new-style-dropdown;
&.navbar-gitlab {
padding: 0 16px;
z-index: 1000;
......
app/assets/stylesheets/framework/lists.scss
View file @ ab0d5e27
......@@ -132,8 +132,6 @@ ul.content-list {
}
.controls {
@include new-style-dropdown;
float: right;
> .control-text {
......
app/assets/stylesheets/framework/secondary-navigation-elements.scss
View file @ ab0d5e27
......@@ -86,8 +86,6 @@
}
.nav-controls {
@include new-style-dropdown;
display: inline-block;
float: right;
text-align: right;
......
app/assets/stylesheets/framework/sidebar.scss
View file @ ab0d5e27
......@@ -144,10 +144,6 @@
}
}
.issuable-sidebar {
@include new-style-dropdown;
}
.pikaday-container {
.pika-single {
margin-top: 2px;
......
app/assets/stylesheets/framework/typography.scss
View file @ ab0d5e27
......@@ -343,8 +343,6 @@ a > code {
@extend .ref-name;
}
@include new-style-dropdown('.git-revision-dropdown');
/**
* Apply Markdown typography
*
......
app/assets/stylesheets/pages/builds.scss
View file @ ab0d5e27
......@@ -323,8 +323,6 @@
}
.build-dropdown {
@include new-style-dropdown;
margin: $gl-padding 0;
padding: 0;
......
app/assets/stylesheets/pages/clusters.scss
View file @ ab0d5e27
......@@ -13,8 +13,6 @@
max-width: 100%;
}
@include new-style-dropdown('.clusters-dropdown ');
.clusters-container {
.nav-bar-right {
padding: $gl-padding-top $gl-padding;
......
app/assets/stylesheets/pages/cycle_analytics.scss
View file @ ab0d5e27
#cycle-analytics {
@include new-style-dropdown;
max-width: 1000px;
margin: 24px auto 0;
position: relative;
......
app/assets/stylesheets/pages/detail_page.scss
View file @ ab0d5e27
......@@ -32,8 +32,6 @@
}
.detail-page-header-actions {
@include new-style-dropdown;
align-self: center;
flex-shrink: 0;
flex: 0 0 auto;
......
app/assets/stylesheets/pages/diff.scss
View file @ ab0d5e27
......@@ -581,8 +581,6 @@
}
.commit-stat-summary {
@include new-style-dropdown;
@media (min-width: $screen-sm-min) {
margin-left: -$gl-padding;
padding-left: $gl-padding;
......
app/assets/stylesheets/pages/editor.scss
View file @ ab0d5e27
......@@ -204,8 +204,6 @@
.gitlab-ci-yml-selector,
.dockerfile-selector,
.template-type-selector {
@include new-style-dropdown;
display: inline-block;
vertical-align: top;
font-family: $regular_font;
......
app/assets/stylesheets/pages/environments.scss
View file @ ab0d5e27
......@@ -12,8 +12,6 @@
.environments-container {
.ci-table {
@include new-style-dropdown;
.deployment-column {
> span {
word-break: break-all;
......
app/assets/stylesheets/pages/issuable.scss
View file @ ab0d5e27
......@@ -488,12 +488,6 @@
}
}
.dropdown-content {
a:hover {
color: inherit;
}
}
.dropdown-menu-toggle {
width: 100%;
padding-top: 6px;
......@@ -512,10 +506,6 @@
}
}
.sidebar-move-issue-dropdown {
@include new-style-dropdown;
}
.sidebar-move-issue-confirmation-button {
width: 100%;
......
app/assets/stylesheets/pages/issues.scss
View file @ ab0d5e27
......@@ -142,8 +142,6 @@ ul.related-merge-requests > li {
}
.issue-form {
@include new-style-dropdown;
.select2-container {
width: 250px !important;
}
......
app/assets/stylesheets/pages/labels.scss
View file @ ab0d5e27
......@@ -116,8 +116,6 @@
}
.manage-labels-list {
@include new-style-dropdown;
> li:not(.empty-message):not(.is-not-draggable) {
background-color: $white-light;
cursor: move;
......
app/assets/stylesheets/pages/members.scss
View file @ ab0d5e27
......@@ -58,8 +58,6 @@
}
.member-form-control {
@include new-style-dropdown;
@media (max-width: $screen-xs-max) {
padding-bottom: 5px;
margin-left: 0;
......@@ -73,8 +71,6 @@
}
.member-search-form {
@include new-style-dropdown;
position: relative;
@media (min-width: $screen-sm-min) {
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ ab0d5e27
......@@ -485,8 +485,6 @@
}
.mr-source-target {
@include new-style-dropdown;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
......@@ -608,8 +606,6 @@
}
.mr-version-controls {
@include new-style-dropdown;
position: relative;
background: $gray-light;
color: $gl-text-color;
......@@ -727,7 +723,3 @@
font-size: 16px;
}
}
.merge-request-form {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/note_form.scss
View file @ ab0d5e27
......@@ -23,8 +23,6 @@
.new-note,
.note-edit-form {
.note-form-actions {
@include new-style-dropdown;
position: relative;
margin: $gl-padding 0 0;
}
......
app/assets/stylesheets/pages/notes.scss
View file @ ab0d5e27
......@@ -490,8 +490,6 @@ ul.notes {
}
.note-actions {
@include new-style-dropdown;
align-self: flex-start;
flex-shrink: 0;
display: inline-flex;
......
app/assets/stylesheets/pages/notifications.scss
View file @ ab0d5e27
......@@ -14,7 +14,3 @@
font-size: 18px;
}
}
.notification-form {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/pipelines.scss
View file @ ab0d5e27
......@@ -286,8 +286,6 @@
// Pipeline visualization
.pipeline-actions {
@include new-style-dropdown;
border-bottom: 0;
}
......@@ -703,9 +701,6 @@ button.mini-pipeline-graph-dropdown-toggle {
}
}
@include new-style-dropdown('.big-pipeline-graph-dropdown-menu');
@include new-style-dropdown('.mini-pipeline-graph-dropdown-menu');
// dropdown content for big and mini pipeline
.big-pipeline-graph-dropdown-menu,
.mini-pipeline-graph-dropdown-menu {
......@@ -804,7 +799,6 @@ button.mini-pipeline-graph-dropdown-toggle {
font-weight: normal;
line-height: $line-height-base;
white-space: nowrap;
border-radius: 3px;
.ci-job-name-component {
align-items: center;
......
app/assets/stylesheets/pages/projects.scss
View file @ ab0d5e27
......@@ -323,8 +323,6 @@
}
.project-repo-buttons {
@include new-style-dropdown;
.project-action-button .dropdown-menu {
max-height: 250px;
overflow-y: auto;
......@@ -898,8 +896,6 @@ pre.light-well {
.new-protected-branch,
.new-protected-tag {
@include new-style-dropdown;
label {
margin-top: 6px;
font-weight: $gl-font-weight-normal;
......@@ -919,8 +915,6 @@ pre.light-well {
.protected-branches-list,
.protected-tags-list {
@include new-style-dropdown;
margin-bottom: 30px;
.settings-message {
......
app/assets/stylesheets/pages/search.scss
View file @ ab0d5e27
......@@ -116,11 +116,6 @@ input[type="checkbox"]:hover {
opacity: 0;
display: block;
left: -5px;
padding: 0;
ul {
padding: 10px 0;
}
}
.dropdown-content {
......@@ -185,8 +180,6 @@ input[type="checkbox"]:hover {
}
.search-holder {
@include new-style-dropdown;
@media (min-width: $screen-sm-min) {
display: -webkit-flex;
display: flex;
......
app/assets/stylesheets/pages/todos.scss
View file @ ab0d5e27
......@@ -265,7 +265,3 @@
font-weight: $gl-font-weight-bold;
}
}
.todos-filters {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/tree.scss
View file @ ab0d5e27
.tree-holder {
@include new-style-dropdown;
.nav-block {
margin: 10px 0;
......
app/views/projects/blob/_template_selectors.html.haml
View file @ ab0d5e27
......@@ -3,15 +3,15 @@
Template
.template-selector-dropdowns-wrap
.template-type-selector.js-template-type-selector-wrap.hidden
= dropdown_tag("Choose type", options: { toggle_class: 'btn js-template-type-selector', title: "Choose a template type" } )
= dropdown_tag("Choose type", options: { toggle_class: 'js-template-type-selector', title: "Choose a template type" } )
.license-selector.js-license-selector-wrap.js-template-selector-wrap.hidden
= dropdown_tag("Apply a license template", options: { toggle_class: 'btn js-license-selector', title: "Apply a license", filter: true, placeholder: "Filter", data: { data: licenses_for_select, project: @project.name, fullname: @project.namespace.human_name } } )
= dropdown_tag("Apply a license template", options: { toggle_class: 'js-license-selector', title: "Apply a license", filter: true, placeholder: "Filter", data: { data: licenses_for_select, project: @project.name, fullname: @project.namespace.human_name } } )
.gitignore-selector.js-gitignore-selector-wrap.js-template-selector-wrap.hidden
= dropdown_tag("Apply a .gitignore template", options: { toggle_class: 'btn js-gitignore-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
= dropdown_tag("Apply a .gitignore template", options: { toggle_class: 'js-gitignore-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
.gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden
= dropdown_tag("Apply a GitLab CI Yaml template", options: { toggle_class: 'btn js-gitlab-ci-yml-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
= dropdown_tag("Apply a GitLab CI Yaml template", options: { toggle_class: 'js-gitlab-ci-yml-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
.dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden
= dropdown_tag("Apply a Dockerfile template", options: { toggle_class: 'btn js-dockerfile-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
= dropdown_tag("Apply a Dockerfile template", options: { toggle_class: 'js-dockerfile-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
.template-selectors-undo-menu.hidden
%span.text-info Template applied
%button.btn.btn-sm.btn-info Undo
app/views/projects/branches/new.html.haml
View file @ ab0d5e27
......@@ -20,7 +20,7 @@
.col-sm-10.create-from
.dropdown
= hidden_field_tag :ref, default_ref
= button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
= button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
.text-left.dropdown-toggle-text= default_ref
= icon('chevron-down')
= render 'shared/ref_dropdown', dropdown_class: 'wide'
......
app/views/projects/tags/new.html.haml
View file @ ab0d5e27
......@@ -20,7 +20,7 @@
.col-sm-10.create-from
.dropdown
= hidden_field_tag :ref, default_ref
= button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
= button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
.text-left.dropdown-toggle-text= default_ref
= render 'shared/ref_dropdown', dropdown_class: 'wide'
.help-block
......
app/views/shared/_label.html.haml
View file @ ab0d5e27
......@@ -39,7 +39,12 @@
%li
= link_to 'Edit', edit_label_path(label)
%li
= link_to 'Delete', destroy_label_path(label), title: 'Delete', method: :delete, data: {confirm: 'Remove this label? Are you sure?'}
= link_to 'Delete',
destroy_label_path(label),
title: 'Delete',
method: :delete,
data: {confirm: 'Remove this label? Are you sure?'},
class: 'text-danger'
.pull-right.hidden-xs.hidden-sm.hidden-md
- if show_label_merge_requests_link
......
doc/development/fe_guide/dropdowns.md
View file @ ab0d5e27
......@@ -4,15 +4,15 @@
## How to style a bootstrap dropdown
1. Use the HTML structure provided by the [docs][bootstrap-dropdowns]
1. Add a specific class to the top level `.dropdown` element
```Haml
.dropdown.my-dropdown
%button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false }
%span.dropdown-toggle-text
Toggle Dropdown
= icon('chevron-down')
%ul.dropdown-menu
%li
%a
......@@ -29,10 +29,4 @@
item!
```
1. Include the mixin in CSS
```SCSS
@include new-style-dropdown('.my-dropdown ');
```
[bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns
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