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:
Eric Eastwood 2017-03-27 21:27:25 -05:00
parent d4c99f644a
commit 550adacb3e
4 changed files with 56 additions and 41 deletions

View File

@ -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);
}

View File

@ -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 {

View File

@ -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;

View File

@ -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