Commit 30ef2545 authored by Phil Hughes's avatar Phil Hughes

fixed hover styling caused by dropdown

fixed karma specs
added CHANGELOG item
parent 2d5e47bf
...@@ -94,7 +94,7 @@ export default { ...@@ -94,7 +94,7 @@ export default {
v-show="fileList.length" v-show="fileList.length"
v-tooltip v-tooltip
type="button" type="button"
class="ide-staged-action-btn p-0 order-1 align-items-center rounded-right border-left-0" class="btn btn-default ide-staged-action-btn p-0 order-1 align-items-center"
:class="{ :class="{
'd-flex': fileList.length 'd-flex': fileList.length
}" }"
......
...@@ -54,6 +54,9 @@ export default { ...@@ -54,6 +54,9 @@ export default {
isActive() { isActive() {
return this.activeFileKey === this.fullKey; return this.activeFileKey === this.fullKey;
}, },
tooltipTitle() {
return this.file.path === this.file.name ? '' : this.file.path;
},
}, },
methods: { methods: {
...mapActions([ ...mapActions([
...@@ -85,17 +88,15 @@ export default { ...@@ -85,17 +88,15 @@ export default {
</script> </script>
<template> <template>
<div <div class="multi-file-commit-list-item position-relative">
<button
v-tooltip
:title="tooltipTitle"
:class="{ :class="{
'is-active': isActive 'is-active': isActive
}" }"
class="multi-file-commit-list-item"
>
<button
v-tooltip
:title="file.path"
type="button" type="button"
class="multi-file-commit-list-path" class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
@dblclick="fileAction" @dblclick="fileAction"
@click="openFileInEditor" @click="openFileInEditor"
> >
...@@ -108,9 +109,9 @@ export default { ...@@ -108,9 +109,9 @@ export default {
</span> </span>
</button> </button>
<component <component
class="d-flex ml-auto"
:is="actionComponent" :is="actionComponent"
:path="file.path" :path="file.path"
class="d-flex position-absolute"
/> />
</div> </div>
</template> </template>
...@@ -540,27 +540,12 @@ ...@@ -540,27 +540,12 @@
margin-right: -$grid-size; margin-right: -$grid-size;
min-height: 60px; min-height: 60px;
.multi-file-commit-list-item {
margin-left: 0;
margin-right: 0;
}
&.form-text.text-muted { &.form-text.text-muted {
margin-left: 0; margin-left: 0;
right: 0; right: 0;
} }
} }
.multi-file-commit-list-item {
&.is-active {
background-color: $white-normal;
}
.multi-file-discard-btn {
margin-top: -2px;
}
}
.multi-file-addition, .multi-file-addition,
.multi-file-addition-solid { .multi-file-addition-solid {
color: $green-500; color: $green-500;
...@@ -590,7 +575,7 @@ ...@@ -590,7 +575,7 @@
} }
} }
.multi-file-commit-list-item, .multi-file-commit-list-path,
.ide-file-list .file { .ide-file-list .file {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -607,11 +592,9 @@ ...@@ -607,11 +592,9 @@
} }
.multi-file-commit-list-path { .multi-file-commit-list-path {
padding: 0; &.is-active {
background: none; background-color: $white-normal;
border: 0; }
text-align: left;
width: 100%;
&:hover, &:hover,
&:focus { &:focus {
...@@ -637,6 +620,12 @@ ...@@ -637,6 +620,12 @@
} }
} }
.multi-file-discard-btn {
top: 0;
right: 8px;
bottom: 0;
}
.multi-file-commit-form { .multi-file-commit-form {
position: relative; position: relative;
background-color: $white-light; background-color: $white-light;
...@@ -832,7 +821,13 @@ ...@@ -832,7 +821,13 @@
.ide-staged-action-btn { .ide-staged-action-btn {
width: 22px; width: 22px;
border: 1px solid $white-dark; margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
> svg {
top: 0;
}
} }
.ide-commit-file-count { .ide-commit-file-count {
......
---
title: Improve Web IDE commit flow
merge_request:
author:
type: changed
...@@ -16,6 +16,7 @@ describe('Multi-file editor commit sidebar list', () => { ...@@ -16,6 +16,7 @@ describe('Multi-file editor commit sidebar list', () => {
iconName: 'staged', iconName: 'staged',
action: 'stageAllChanges', action: 'stageAllChanges',
actionBtnText: 'stage all', actionBtnText: 'stage all',
actionBtnIcon: 'history',
itemActionComponent: 'stage-button', itemActionComponent: 'stage-button',
activeFileKey: 'staged-testing', activeFileKey: 'staged-testing',
keyPrefix: 'staged', keyPrefix: 'staged',
......
...@@ -39,7 +39,7 @@ describe('IDE stage file button', () => { ...@@ -39,7 +39,7 @@ describe('IDE stage file button', () => {
}); });
it('calls store with discard button', () => { it('calls store with discard button', () => {
vm.$el.querySelectorAll('.btn')[1].click(); vm.$el.querySelector('.dropdown-menu button').click();
expect(vm.discardFileChanges).toHaveBeenCalledWith(f.path); expect(vm.discardFileChanges).toHaveBeenCalledWith(f.path);
}); });
......
...@@ -111,7 +111,7 @@ describe('RepoCommitSection', () => { ...@@ -111,7 +111,7 @@ describe('RepoCommitSection', () => {
}); });
it('renders a commit section', () => { it('renders a commit section', () => {
const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')]; const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list > li')];
const allFiles = vm.$store.state.changedFiles.concat(vm.$store.state.stagedFiles); const allFiles = vm.$store.state.changedFiles.concat(vm.$store.state.stagedFiles);
expect(changedFileElements.length).toEqual(4); expect(changedFileElements.length).toEqual(4);
...@@ -140,22 +140,26 @@ describe('RepoCommitSection', () => { ...@@ -140,22 +140,26 @@ describe('RepoCommitSection', () => {
vm.$el.querySelector('.multi-file-discard-btn .btn').click(); vm.$el.querySelector('.multi-file-discard-btn .btn').click();
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$el.querySelector('.ide-commit-list-container').querySelectorAll('li').length).toBe( expect(
1, vm.$el
); .querySelector('.ide-commit-list-container')
.querySelectorAll('.multi-file-commit-list > li').length,
).toBe(1);
done(); done();
}); });
}); });
it('discards a single file', done => { it('discards a single file', done => {
vm.$el.querySelectorAll('.multi-file-discard-btn .btn')[1].click(); vm.$el.querySelector('.multi-file-discard-btn .dropdown-menu button').click();
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$el.querySelector('.ide-commit-list-container').textContent).not.toContain('file1'); expect(vm.$el.querySelector('.ide-commit-list-container').textContent).not.toContain('file1');
expect(vm.$el.querySelector('.ide-commit-list-container').querySelectorAll('li').length).toBe( expect(
1, vm.$el
); .querySelector('.ide-commit-list-container')
.querySelectorAll('.multi-file-commit-list > li').length,
).toBe(1);
done(); done();
}); });
......
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