Fix custom protected branch pattern jumping scroll position to top
Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/30149 Use more semantic `<button>` element and prevent the form from submitting.
This commit is contained in:
parent
d4c99f644a
commit
550adacb3e
|
@ -6,7 +6,7 @@ class ProtectedBranchDropdown {
|
||||||
this.$dropdown = options.$dropdown;
|
this.$dropdown = options.$dropdown;
|
||||||
this.$dropdownContainer = this.$dropdown.parent();
|
this.$dropdownContainer = this.$dropdown.parent();
|
||||||
this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
|
this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
|
||||||
this.$protectedBranch = this.$dropdownContainer.find('.create-new-protected-branch');
|
this.$protectedBranch = this.$dropdownContainer.find('.js-create-new-protected-branch');
|
||||||
|
|
||||||
this.buildDropdown();
|
this.buildDropdown();
|
||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
|
@ -46,7 +46,9 @@ class ProtectedBranchDropdown {
|
||||||
this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
|
this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickCreateWildcard() {
|
onClickCreateWildcard(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
// Refresh the dropdown's data, which ends up calling `getProtectedBranches`
|
// Refresh the dropdown's data, which ends up calling `getProtectedBranches`
|
||||||
this.$dropdown.data('glDropdown').remote.execute();
|
this.$dropdown.data('glDropdown').remote.execute();
|
||||||
this.$dropdown.data('glDropdown').selectRowAtIndex();
|
this.$dropdown.data('glDropdown').selectRowAtIndex();
|
||||||
|
@ -69,7 +71,7 @@ class ProtectedBranchDropdown {
|
||||||
|
|
||||||
if (branchName) {
|
if (branchName) {
|
||||||
this.$dropdownContainer
|
this.$dropdownContainer
|
||||||
.find('.create-new-protected-branch code')
|
.find('.js-create-new-protected-branch code')
|
||||||
.text(branchName);
|
.text(branchName);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -119,6 +119,46 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin dropdown-link {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
padding: 5px 8px;
|
||||||
|
color: $gl-text-color;
|
||||||
|
line-height: initial;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
border-radius: 2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&.is-focused {
|
||||||
|
background-color: $dropdown-link-hover-bg;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background-color: darken($dropdown-link-hover-bg, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dropdown-menu-empty-link {
|
||||||
|
&.is-focused {
|
||||||
|
background-color: $dropdown-empty-row-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dropdown-menu-user-link {
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-play {
|
||||||
|
fill: $gl-text-color-secondary;
|
||||||
|
margin-right: 6px;
|
||||||
|
height: 12px;
|
||||||
|
width: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-menu,
|
.dropdown-menu,
|
||||||
.dropdown-menu-nav {
|
.dropdown-menu-nav {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -178,43 +218,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
@include dropdown-link;
|
||||||
position: relative;
|
|
||||||
padding: 5px 8px;
|
|
||||||
color: $gl-text-color;
|
|
||||||
line-height: initial;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
border-radius: 2px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&.is-focused {
|
|
||||||
background-color: $dropdown-link-hover-bg;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
background-color: darken($dropdown-link-hover-bg, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dropdown-menu-empty-link {
|
|
||||||
&.is-focused {
|
|
||||||
background-color: $dropdown-empty-row-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dropdown-menu-user-link {
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-play {
|
|
||||||
fill: $gl-text-color-secondary;
|
|
||||||
margin-right: 6px;
|
|
||||||
height: 12px;
|
|
||||||
width: 11px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-header {
|
.dropdown-header {
|
||||||
|
|
|
@ -732,6 +732,15 @@ pre.light-well {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.create-new-protected-branch-button {
|
||||||
|
@include dropdown-link;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.protected-branches-list {
|
.protected-branches-list {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
|
|
@ -10,6 +10,6 @@
|
||||||
|
|
||||||
%ul.dropdown-footer-list
|
%ul.dropdown-footer-list
|
||||||
%li
|
%li
|
||||||
= link_to '#', title: "New Protected Branch", class: "create-new-protected-branch" do
|
%button{ class: "create-new-protected-branch-button js-create-new-protected-branch", title: "New Protected Branch" }
|
||||||
Create wildcard
|
Create wildcard
|
||||||
%code
|
%code
|
||||||
|
|
Loading…
Reference in New Issue