Merge branch '48055-web-ide-resize-handles' into 'master'

Resolve "Resize handles for Web IDE right sidebar are too thin"

Closes #48055

See merge request gitlab-org/gitlab-ce!20818

4 files changed, 24 insertions, 9 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..7947ae1e4da 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) {
@@ -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) {
@@ -84,7 +91,7 @@
   <div
     :class="className"
     :style="cursorStyle"
-    class="dragHandle"
+    class="drag-handle"
     @mousedown="startDrag"
     @dblclick="resetSize"
   ></div>
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index a346bd04ad3..442aef124d3 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -833,18 +833,21 @@
   }
 }
 
-.dragHandle {
+.drag-handle {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 1px;
-  background-color: $white-dark;
+  width: 4px;
 
-  &.dragright {
+  &:hover {
+    background-color: $white-normal;
+  }
+
+  &.drag-right {
     right: 0;
   }
 
-  &.dragleft {
+  &.drag-left {
     left: 0;
   }
 }
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
diff --git a/spec/javascripts/vue_shared/components/panel_resizer_spec.js b/spec/javascripts/vue_shared/components/panel_resizer_spec.js
index 8efcb54659d..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('dragHandle 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('dragHandle dragright');
+    expect(vm.$el.getAttribute('class')).toBe('drag-handle drag-right');
   });
 
   it('drag the resizer', () => {