Commit 9ea2e664 authored by Phil Hughes's avatar Phil Hughes

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
parents 4cebdbbe a8e599f8
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
}, },
computed: { computed: {
className() { className() {
return `drag${this.side}`; return `drag-${this.side}`;
}, },
cursorStyle() { cursorStyle() {
if (this.enabled) { if (this.enabled) {
...@@ -44,8 +44,15 @@ ...@@ -44,8 +44,15 @@
methods: { methods: {
resetSize(e) { resetSize(e) {
e.preventDefault(); e.preventDefault();
this.$emit('resize-start', this.size);
this.size = this.startSize; this.size = this.startSize;
this.$emit('update:size', this.size); 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) { startDrag(e) {
if (this.enabled) { if (this.enabled) {
...@@ -84,7 +91,7 @@ ...@@ -84,7 +91,7 @@
<div <div
:class="className" :class="className"
:style="cursorStyle" :style="cursorStyle"
class="dragHandle" class="drag-handle"
@mousedown="startDrag" @mousedown="startDrag"
@dblclick="resetSize" @dblclick="resetSize"
></div> ></div>
......
...@@ -833,18 +833,21 @@ ...@@ -833,18 +833,21 @@
} }
} }
.dragHandle { .drag-handle {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 1px; width: 4px;
background-color: $white-dark;
&:hover {
background-color: $white-normal;
}
&.dragright { &.drag-right {
right: 0; right: 0;
} }
&.dragleft { &.drag-left {
left: 0; left: 0;
} }
} }
......
---
title: Increase width of Web IDE sidebar resize handles
merge_request: 20818
author:
type: fixed
...@@ -29,7 +29,7 @@ describe('Panel Resizer component', () => { ...@@ -29,7 +29,7 @@ describe('Panel Resizer component', () => {
}); });
expect(vm.$el.tagName).toEqual('DIV'); 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;'); expect(vm.$el.getAttribute('style')).toBe('cursor: ew-resize;');
}); });
...@@ -40,7 +40,7 @@ describe('Panel Resizer component', () => { ...@@ -40,7 +40,7 @@ describe('Panel Resizer component', () => {
}); });
expect(vm.$el.tagName).toEqual('DIV'); 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', () => { it('drag the resizer', () => {
......
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