Merge branch '41186-sidebar-too-much-vertical-scroll' into 'master'
Remove animations from dropdowns Closes #41186 See merge request gitlab-org/gitlab-ce!15968
This commit is contained in:
commit
febb0b9a80
|
@ -300,7 +300,7 @@ GitLabDropdown = (function() {
|
||||||
return function(data) {
|
return function(data) {
|
||||||
_this.fullData = data;
|
_this.fullData = data;
|
||||||
_this.parseData(_this.fullData);
|
_this.parseData(_this.fullData);
|
||||||
_this.focusTextInput(true);
|
_this.focusTextInput();
|
||||||
if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') {
|
if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') {
|
||||||
return _this.filter.input.trigger('input');
|
return _this.filter.input.trigger('input');
|
||||||
}
|
}
|
||||||
|
@ -790,9 +790,8 @@ GitLabDropdown = (function() {
|
||||||
return [selectedObject, isMarking];
|
return [selectedObject, isMarking];
|
||||||
};
|
};
|
||||||
|
|
||||||
GitLabDropdown.prototype.focusTextInput = function(triggerFocus = false) {
|
GitLabDropdown.prototype.focusTextInput = function() {
|
||||||
if (this.options.filterable) {
|
if (this.options.filterable) {
|
||||||
this.dropdown.one('transitionend', () => {
|
|
||||||
const initialScrollTop = $(window).scrollTop();
|
const initialScrollTop = $(window).scrollTop();
|
||||||
|
|
||||||
if (this.dropdown.is('.open')) {
|
if (this.dropdown.is('.open')) {
|
||||||
|
@ -802,13 +801,6 @@ GitLabDropdown = (function() {
|
||||||
if ($(window).scrollTop() < initialScrollTop) {
|
if ($(window).scrollTop() < initialScrollTop) {
|
||||||
$(window).scrollTop(initialScrollTop);
|
$(window).scrollTop(initialScrollTop);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
if (triggerFocus) {
|
|
||||||
// This triggers after a ajax request
|
|
||||||
// in case of slow requests, the dropdown transition could already be finished
|
|
||||||
this.dropdown.trigger('transitionend');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -9,12 +9,6 @@
|
||||||
padding-left: $contextual-sidebar-width;
|
padding-left: $contextual-sidebar-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Override position: absolute
|
|
||||||
.right-sidebar {
|
|
||||||
position: fixed;
|
|
||||||
height: calc(100% - #{$header-height});
|
|
||||||
}
|
|
||||||
|
|
||||||
.issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
|
.issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
|
||||||
padding: 10px 0 15px;
|
padding: 10px 0 15px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,27 +16,18 @@
|
||||||
|
|
||||||
@mixin set-visible {
|
@mixin set-visible {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
visibility: visible;
|
display: block;
|
||||||
opacity: 1;
|
|
||||||
transition-duration: 100ms, 150ms, 25ms;
|
|
||||||
transition-delay: 35ms, 50ms, 25ms;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin set-invisible {
|
@mixin set-invisible {
|
||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
visibility: hidden;
|
display: none;
|
||||||
opacity: 0;
|
|
||||||
transition-property: opacity, transform, visibility;
|
|
||||||
transition-duration: 70ms, 250ms, 250ms;
|
|
||||||
transition-timing-function: linear, $dropdown-animation-timing;
|
|
||||||
transition-delay: 25ms, 50ms, 0ms;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.open {
|
.open {
|
||||||
.dropdown-menu,
|
.dropdown-menu,
|
||||||
.dropdown-menu-nav {
|
.dropdown-menu-nav {
|
||||||
@include set-visible;
|
@include set-visible;
|
||||||
display: block;
|
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
|
|
||||||
@media (max-width: $screen-xs-max) {
|
@media (max-width: $screen-xs-max) {
|
||||||
|
@ -55,6 +46,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Get search dropdown to line up with other nav dropdowns
|
||||||
|
.search-input-container .dropdown-menu {
|
||||||
|
margin-top: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-toggle {
|
.dropdown-toggle {
|
||||||
padding: 6px 8px 6px 10px;
|
padding: 6px 8px 6px 10px;
|
||||||
background-color: $white-light;
|
background-color: $white-light;
|
||||||
|
@ -214,7 +210,6 @@
|
||||||
.dropdown-menu,
|
.dropdown-menu,
|
||||||
.dropdown-menu-nav {
|
.dropdown-menu-nav {
|
||||||
@include set-invisible;
|
@include set-invisible;
|
||||||
display: block;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: auto;
|
width: auto;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
|
|
|
@ -90,11 +90,6 @@
|
||||||
.right-sidebar {
|
.right-sidebar {
|
||||||
border-left: 1px solid $border-color;
|
border-left: 1px solid $border-color;
|
||||||
height: calc(100% - #{$header-height});
|
height: calc(100% - #{$header-height});
|
||||||
|
|
||||||
&.affix {
|
|
||||||
position: fixed;
|
|
||||||
top: $header-height;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.with-performance-bar .right-sidebar.affix {
|
.with-performance-bar .right-sidebar.affix {
|
||||||
|
|
|
@ -122,7 +122,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-sidebar {
|
.right-sidebar {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: $header-height;
|
top: $header-height;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@ -502,7 +502,7 @@
|
||||||
top: $header-height + $performance-bar-height;
|
top: $header-height + $performance-bar-height;
|
||||||
|
|
||||||
.issuable-sidebar {
|
.issuable-sidebar {
|
||||||
height: calc(100% - #{$header-height} - #{$performance-bar-height});
|
height: calc(100% - #{$performance-bar-height});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -108,13 +108,6 @@ input[type="checkbox"]:hover {
|
||||||
|
|
||||||
// Custom dropdown positioning
|
// Custom dropdown positioning
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
transition-property: opacity, transform;
|
|
||||||
transition-duration: 250ms, 250ms;
|
|
||||||
transition-delay: 0ms, 25ms;
|
|
||||||
transition-timing-function: $dropdown-animation-timing;
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 0;
|
|
||||||
display: block;
|
|
||||||
left: -5px;
|
left: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -152,13 +145,6 @@ input[type="checkbox"]:hover {
|
||||||
background-color: $nav-badge-bg;
|
background-color: $nav-badge-bg;
|
||||||
border-color: $border-color;
|
border-color: $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
transition-duration: 100ms, 75ms;
|
|
||||||
transition-delay: 75ms, 100ms;
|
|
||||||
transform: translateY(7px);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-value {
|
&.has-value {
|
||||||
|
|
Loading…
Reference in New Issue