Commit c2a8daf9 authored by Phil Hughes's avatar Phil Hughes

Merge branch '15664-remove-jquery-nicescroll' into 'master'

Resolve "Remove jQuery Nicescroll"

Closes #15664, #30860, and #35885

See merge request !13262
parents 60bc0fc1 1e39b51a
...@@ -164,7 +164,6 @@ window.Build = (function () { ...@@ -164,7 +164,6 @@ window.Build = (function () {
Build.prototype.initSidebar = function () { Build.prototype.initSidebar = function () {
this.$sidebar = $('.js-build-sidebar'); this.$sidebar = $('.js-build-sidebar');
this.$sidebar.niceScroll();
}; };
Build.prototype.getBuildTrace = function () { Build.prototype.getBuildTrace = function () {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
$(function() { $(function() {
$('.reveal-variables').off('click').on('click', function() { $('.reveal-variables').off('click').on('click', function() {
$('.js-build').toggle().niceScroll(); $('.js-build-variables').toggle();
$(this).hide(); $(this).hide();
}); });
}); });
...@@ -6,6 +6,5 @@ import 'vendor/jquery.endless-scroll'; ...@@ -6,6 +6,5 @@ import 'vendor/jquery.endless-scroll';
import 'vendor/jquery.caret'; import 'vendor/jquery.caret';
import 'vendor/jquery.atwho'; import 'vendor/jquery.atwho';
import 'vendor/jquery.scrollTo'; import 'vendor/jquery.scrollTo';
import 'vendor/jquery.nicescroll';
import 'vendor/jquery.waitforimages'; import 'vendor/jquery.waitforimages';
import 'select2/select2'; import 'select2/select2';
...@@ -577,7 +577,6 @@ import GpgBadges from './gpg_badges'; ...@@ -577,7 +577,6 @@ import GpgBadges from './gpg_badges';
shortcut_handler = new ShortcutsWiki(); shortcut_handler = new ShortcutsWiki();
new ZenMode(); new ZenMode();
new gl.GLForm($('.wiki-form'), true); new gl.GLForm($('.wiki-form'), true);
new Sidebar();
break; break;
case 'snippets': case 'snippets':
shortcut_handler = new ShortcutsNavigation(); shortcut_handler = new ShortcutsNavigation();
......
/* global Breakpoints */ /* global Breakpoints */
import 'vendor/jquery.nicescroll';
import './breakpoints'; import './breakpoints';
export default class Wikis { export default class Wikis {
...@@ -8,7 +7,6 @@ export default class Wikis { ...@@ -8,7 +7,6 @@ export default class Wikis {
this.bp = Breakpoints.get(); this.bp = Breakpoints.get();
this.sidebarEl = document.querySelector('.js-wiki-sidebar'); this.sidebarEl = document.querySelector('.js-wiki-sidebar');
this.sidebarExpanded = false; this.sidebarExpanded = false;
$(this.sidebarEl).niceScroll();
const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle'); const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle');
for (let i = 0; i < sidebarToggles.length; i += 1) { for (let i = 0; i < sidebarToggles.length; i += 1) {
......
...@@ -109,16 +109,8 @@ body { ...@@ -109,16 +109,8 @@ body {
} }
} }
.page-with-sidebar > .content-wrapper {
/* The following prevents side effects related to iOS Safari's implementation of -webkit-overflow-scrolling: touch, min-height: calc(100vh - #{$header-height});
which is applied to the body by jquery.nicescroling plugin to force hardware acceleration for momentum scrolling. Side
effects are commonly related to inconsisent z-index behavior (e.g. tooltips). By applying the following to direct children
of the body element here, we negate cascading side effects but allow momentum scrolling to be applied to the body */
.navbar,
.page-gutter,
.page-with-sidebar {
-webkit-overflow-scrolling: auto;
} }
.with-performance-bar .page-with-sidebar { .with-performance-bar .page-with-sidebar {
......
...@@ -78,15 +78,12 @@ ...@@ -78,15 +78,12 @@
.right-sidebar { .right-sidebar {
border-left: 1px solid $border-color; border-left: 1px solid $border-color;
height: calc(100% - #{$header-height});
&.affix { &.affix {
position: fixed; position: fixed;
top: $header-height; top: $header-height;
} }
&:not(.affix-top) {
min-height: 100%;
}
} }
.with-performance-bar .right-sidebar.affix { .with-performance-bar .right-sidebar.affix {
......
...@@ -24,7 +24,7 @@ $new-sidebar-collapsed-width: 50px; ...@@ -24,7 +24,7 @@ $new-sidebar-collapsed-width: 50px;
// Override position: absolute // Override position: absolute
.right-sidebar { .right-sidebar {
position: fixed; position: fixed;
height: 100%; 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 {
......
...@@ -235,8 +235,18 @@ ...@@ -235,8 +235,18 @@
display: none; display: none;
} }
.sidebar-container {
width: calc(100% + 100px);
padding-right: 100px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.blocks-container { .blocks-container {
padding: 0 $gl-padding; padding: 0 $gl-padding;
width: 289px;
} }
.block { .block {
...@@ -259,7 +269,15 @@ ...@@ -259,7 +269,15 @@
padding: 16px 0; padding: 16px 0;
} }
.trigger-build-variables {
margin: 0;
overflow-x: auto;
-ms-overflow-style: scrollbar;
-webkit-overflow-scrolling: touch;
}
.trigger-build-variable { .trigger-build-variable {
font-weight: normal;
color: $code-color; color: $code-color;
} }
...@@ -326,6 +344,7 @@ ...@@ -326,6 +344,7 @@
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
max-height: 300px; max-height: 300px;
width: 289px;
overflow: auto; overflow: auto;
svg { svg {
......
...@@ -95,12 +95,22 @@ ...@@ -95,12 +95,22 @@
} }
.right-sidebar.wiki-sidebar { .right-sidebar.wiki-sidebar {
padding: $gl-padding 0; padding: 0;
&.right-sidebar-collapsed { &.right-sidebar-collapsed {
display: none; display: none;
} }
.sidebar-container {
padding: $gl-padding 0;
width: calc(100% + 100px);
padding-right: 100px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.blocks-container { .blocks-container {
padding: 0 $gl-padding; padding: 0 $gl-padding;
} }
......
- builds = @build.pipeline.builds.to_a - builds = @build.pipeline.builds.to_a
%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } } %aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } }
.sidebar-container
.blocks-container .blocks-container
.block .block
%strong %strong
...@@ -49,11 +50,10 @@ ...@@ -49,11 +50,10 @@
%p %p
%button.btn.group.btn-group-justified.reveal-variables Reveal Variables %button.btn.group.btn-group-justified.reveal-variables Reveal Variables
%dl.js-build-variables.trigger-build-variables.hide
- @build.trigger_request.variables.each do |key, value| - @build.trigger_request.variables.each do |key, value|
.hide.js-build %dt.js-build-variable.trigger-build-variable= key
.js-build-variable.trigger-build-variable= key %dd.js-build-value.trigger-build-value= value
.js-build-value.trigger-build-value= value
%div{ class: (@build.pipeline.stages_count > 1 ? "block" : "block-last") } %div{ class: (@build.pipeline.stages_count > 1 ? "block" : "block-last") }
%p %p
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
#{@build.pipeline.git_commit_title} #{@build.pipeline.git_commit_title}
- if @build.pipeline.stages_count > 1 - if @build.pipeline.stages_count > 1
.dropdown.build-dropdown .block-last.dropdown.build-dropdown
%div %div
%span{ class: "ci-status-icon-#{@build.pipeline.status}" } %span{ class: "ci-status-icon-#{@build.pipeline.status}" }
= ci_icon_for_status(@build.pipeline.status) = ci_icon_for_status(@build.pipeline.status)
......
%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } } %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
.sidebar-container
.block.wiki-sidebar-header.append-bottom-default .block.wiki-sidebar-header.append-bottom-default
%a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" } %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
= icon('angle-double-right') = icon('angle-double-right')
......
...@@ -130,8 +130,8 @@ feature 'Issue Sidebar' do ...@@ -130,8 +130,8 @@ feature 'Issue Sidebar' do
it 'adds new label' do it 'adds new label' do
page.within('.block.labels') do page.within('.block.labels') do
fill_in 'new_label_name', with: 'wontfix' fill_in 'new_label_name', with: 'wontfix'
page.find(".suggest-colors a", match: :first).click page.find('.suggest-colors a', match: :first).trigger('click')
click_button 'Create' page.find('button', text: 'Create').trigger('click')
page.within('.dropdown-page-one') do page.within('.dropdown-page-one') do
expect(page).to have_content 'wontfix' expect(page).to have_content 'wontfix'
...@@ -142,8 +142,8 @@ feature 'Issue Sidebar' do ...@@ -142,8 +142,8 @@ feature 'Issue Sidebar' do
it 'shows error message if label title is taken' do it 'shows error message if label title is taken' do
page.within('.block.labels') do page.within('.block.labels') do
fill_in 'new_label_name', with: label.title fill_in 'new_label_name', with: label.title
page.find('.suggest-colors a', match: :first).click page.find('.suggest-colors a', match: :first).trigger('click')
click_button 'Create' page.find('button', text: 'Create').trigger('click')
page.within('.dropdown-page-two') do page.within('.dropdown-page-two') do
expect(page).to have_content 'Title has already been taken' expect(page).to have_content 'Title has already been taken'
......
...@@ -5,7 +5,6 @@ import '~/lib/utils/datetime_utility'; ...@@ -5,7 +5,6 @@ import '~/lib/utils/datetime_utility';
import '~/lib/utils/url_utility'; import '~/lib/utils/url_utility';
import '~/build'; import '~/build';
import '~/breakpoints'; import '~/breakpoints';
import 'vendor/jquery.nicescroll';
describe('Build', () => { describe('Build', () => {
const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`; const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`;
......
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
import '~/gl_dropdown'; import '~/gl_dropdown';
import 'select2'; import 'select2';
import 'vendor/jquery.nicescroll';
import '~/api'; import '~/api';
import '~/create_label'; import '~/create_label';
import '~/issuable_context'; import '~/issuable_context';
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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