From a7572ee70e3bda02880efa48f313a2d0ac71ee67 Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Tue, 24 Jul 2018 11:31:50 -0500 Subject: [PATCH 1/5] Resize drag handle for Web IDE --- app/assets/stylesheets/pages/repo.scss | 2 +- changelogs/unreleased/48055-web-ide-resize-handles.yml | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 changelogs/unreleased/48055-web-ide-resize-handles.yml diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 8b1227b9131..d8545882647 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -785,7 +785,7 @@ position: absolute; top: 0; bottom: 0; - width: 1px; + width: 4px; background-color: $white-dark; &.dragright { diff --git a/changelogs/unreleased/48055-web-ide-resize-handles.yml b/changelogs/unreleased/48055-web-ide-resize-handles.yml new file mode 100644 index 00000000000..0f650cdda6f --- /dev/null +++ b/changelogs/unreleased/48055-web-ide-resize-handles.yml @@ -0,0 +1,5 @@ +--- +title: Increase width of Web IDE sidebar resize handles +merge_request: 20818 +author: +type: fixed From 818a8314cbd97fb78cf444d16801e60c63188d79 Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Tue, 24 Jul 2018 11:33:07 -0500 Subject: [PATCH 2/5] Rename class dragHandle to drag-handle --- .../javascripts/vue_shared/components/panel_resizer.vue | 2 +- app/assets/stylesheets/pages/repo.scss | 2 +- spec/javascripts/vue_shared/components/panel_resizer_spec.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue index 8c2dcc2d902..f3bc387318d 100644 --- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue +++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue @@ -84,7 +84,7 @@
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index d8545882647..0dada5f9db8 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -781,7 +781,7 @@ } } -.dragHandle { +.drag-handle { position: absolute; top: 0; bottom: 0; diff --git a/spec/javascripts/vue_shared/components/panel_resizer_spec.js b/spec/javascripts/vue_shared/components/panel_resizer_spec.js index 8efcb54659d..6f4c3c99b76 100644 --- a/spec/javascripts/vue_shared/components/panel_resizer_spec.js +++ b/spec/javascripts/vue_shared/components/panel_resizer_spec.js @@ -29,7 +29,7 @@ describe('Panel Resizer component', () => { }); expect(vm.$el.tagName).toEqual('DIV'); - expect(vm.$el.getAttribute('class')).toBe('dragHandle dragleft'); + expect(vm.$el.getAttribute('class')).toBe('drag-handle dragleft'); expect(vm.$el.getAttribute('style')).toBe('cursor: ew-resize;'); }); @@ -40,7 +40,7 @@ describe('Panel Resizer component', () => { }); expect(vm.$el.tagName).toEqual('DIV'); - expect(vm.$el.getAttribute('class')).toBe('dragHandle dragright'); + expect(vm.$el.getAttribute('class')).toBe('drag-handle dragright'); }); it('drag the resizer', () => { From 0c5740a2705368fc3be894c7687fcfb16288ebad Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Tue, 24 Jul 2018 11:48:54 -0500 Subject: [PATCH 3/5] Rename 'dragleft' and 'dragright' to 'drag-left' and 'drag-right' --- .../javascripts/vue_shared/components/panel_resizer.vue | 2 +- app/assets/stylesheets/pages/repo.scss | 4 ++-- spec/javascripts/vue_shared/components/panel_resizer_spec.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue index f3bc387318d..438b2fee159 100644 --- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue +++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue @@ -32,7 +32,7 @@ }, computed: { className() { - return `drag${this.side}`; + return `drag-${this.side}`; }, cursorStyle() { if (this.enabled) { diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 0dada5f9db8..90512d8bac4 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -788,11 +788,11 @@ width: 4px; background-color: $white-dark; - &.dragright { + &.drag-right { right: 0; } - &.dragleft { + &.drag-left { left: 0; } } diff --git a/spec/javascripts/vue_shared/components/panel_resizer_spec.js b/spec/javascripts/vue_shared/components/panel_resizer_spec.js index 6f4c3c99b76..f1e62069462 100644 --- a/spec/javascripts/vue_shared/components/panel_resizer_spec.js +++ b/spec/javascripts/vue_shared/components/panel_resizer_spec.js @@ -29,7 +29,7 @@ describe('Panel Resizer component', () => { }); expect(vm.$el.tagName).toEqual('DIV'); - expect(vm.$el.getAttribute('class')).toBe('drag-handle dragleft'); + expect(vm.$el.getAttribute('class')).toBe('drag-handle drag-left'); expect(vm.$el.getAttribute('style')).toBe('cursor: ew-resize;'); }); @@ -40,7 +40,7 @@ describe('Panel Resizer component', () => { }); expect(vm.$el.tagName).toEqual('DIV'); - expect(vm.$el.getAttribute('class')).toBe('drag-handle dragright'); + expect(vm.$el.getAttribute('class')).toBe('drag-handle drag-right'); }); it('drag the resizer', () => { From 8b0f926a558a04578636a0354c06e4cec1db9c3b Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Wed, 25 Jul 2018 10:32:35 -0500 Subject: [PATCH 4/5] Update resize handle to show lighter background on hover --- app/assets/stylesheets/pages/repo.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 90512d8bac4..d728697b8bc 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -786,7 +786,10 @@ top: 0; bottom: 0; width: 4px; - background-color: $white-dark; + + &:hover { + background-color: $white-normal; + } &.drag-right { right: 0; From a8e599f86ec1698ae1d6b1d3941196debdf6db99 Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Wed, 25 Jul 2018 11:31:25 -0500 Subject: [PATCH 5/5] Fix Web IDE editor resizing on sidebar reset size --- .../javascripts/vue_shared/components/panel_resizer.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue index 438b2fee159..7947ae1e4da 100644 --- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue +++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue @@ -44,8 +44,15 @@ methods: { resetSize(e) { e.preventDefault(); + this.$emit('resize-start', this.size); + this.size = this.startSize; this.$emit('update:size', this.size); + + // End resizing on next tick so that listeners can react to DOM changes + this.$nextTick(() => { + this.$emit('resize-end', this.size); + }); }, startDrag(e) { if (this.enabled) {