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
This commit is contained in:
commit
9ea2e6645e
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Increase width of Web IDE sidebar resize handles
|
||||
merge_request: 20818
|
||||
author:
|
||||
type: fixed
|
|
@ -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', () => {
|
||||
|
|
Loading…
Reference in New Issue