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