Commit 550adacb authored by Eric Eastwood's avatar Eric Eastwood

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.
parent d4c99f64
......@@ -6,7 +6,7 @@ class ProtectedBranchDropdown {
this.$dropdown = options.$dropdown;
this.$dropdownContainer = this.$dropdown.parent();
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.bindEvents();
......@@ -46,7 +46,9 @@ class ProtectedBranchDropdown {
this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
}
onClickCreateWildcard() {
onClickCreateWildcard(e) {
e.preventDefault();
// Refresh the dropdown's data, which ends up calling `getProtectedBranches`
this.$dropdown.data('glDropdown').remote.execute();
this.$dropdown.data('glDropdown').selectRowAtIndex();
......@@ -69,7 +71,7 @@ class ProtectedBranchDropdown {
if (branchName) {
this.$dropdownContainer
.find('.create-new-protected-branch code')
.find('.js-create-new-protected-branch code')
.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-nav {
display: none;
......@@ -178,43 +218,7 @@
}
a {
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;
}
@include dropdown-link;
}
.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 {
margin-bottom: 30px;
......
......@@ -10,6 +10,6 @@
%ul.dropdown-footer-list
%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
%code
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