updates to variable names to make more sense
fixed up duplicate is-collapsed classes
This commit is contained in:
parent
fb3e23b06d
commit
8c5adf681b
|
@ -29,8 +29,8 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
changedIcon() {
|
changedIcon() {
|
||||||
const prefix = this.file.staged && !this.showStagedIcon ? '-solid' : '';
|
const suffix = this.file.staged && !this.showStagedIcon ? '-solid' : '';
|
||||||
return this.file.tempFile ? `file-additions${prefix}` : `file-modified${prefix}`;
|
return this.file.tempFile ? `file-addition${suffix}` : `file-modified${suffix}`;
|
||||||
},
|
},
|
||||||
stagedIcon() {
|
stagedIcon() {
|
||||||
return `${this.changedIcon}-solid`;
|
return `${this.changedIcon}-solid`;
|
||||||
|
|
|
@ -29,7 +29,7 @@ export default {
|
||||||
required: false,
|
required: false,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
icon: {
|
iconName: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
@ -78,9 +78,6 @@ export default {
|
||||||
>
|
>
|
||||||
<header
|
<header
|
||||||
class="multi-file-commit-panel-header"
|
class="multi-file-commit-panel-header"
|
||||||
:class="{
|
|
||||||
'is-collapsed': rightPanelCollapsed,
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="!rightPanelCollapsed"
|
v-if="!rightPanelCollapsed"
|
||||||
|
@ -91,7 +88,7 @@ export default {
|
||||||
>
|
>
|
||||||
<icon
|
<icon
|
||||||
v-once
|
v-once
|
||||||
:name="icon"
|
:name="iconName"
|
||||||
:size="18"
|
:size="18"
|
||||||
/>
|
/>
|
||||||
{{ titleText }}
|
{{ titleText }}
|
||||||
|
@ -123,7 +120,7 @@ export default {
|
||||||
<list-collapsed
|
<list-collapsed
|
||||||
v-if="rightPanelCollapsed"
|
v-if="rightPanelCollapsed"
|
||||||
:files="fileList"
|
:files="fileList"
|
||||||
:icon="icon"
|
:icon-name="iconName"
|
||||||
:title="title"
|
:title="title"
|
||||||
/>
|
/>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import icon from '~/vue_shared/components/icon.vue';
|
import Icon from '~/vue_shared/components/icon.vue';
|
||||||
import tooltip from '~/vue_shared/directives/tooltip';
|
import tooltip from '~/vue_shared/directives/tooltip';
|
||||||
import { sprintf, n__, __ } from '~/locale';
|
import { sprintf, n__, __ } from '~/locale';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
icon,
|
Icon,
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
tooltip,
|
tooltip,
|
||||||
|
@ -15,7 +15,7 @@ export default {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
icon: {
|
iconName: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
@ -52,7 +52,7 @@ export default {
|
||||||
return sprintf(__('%{title} changes'), { title: this.title });
|
return sprintf(__('%{title} changes'), { title: this.title });
|
||||||
},
|
},
|
||||||
additionIconName() {
|
additionIconName() {
|
||||||
return this.title.toLowerCase() === 'staged' ? 'file-additions-solid' : 'file-additions';
|
return this.title.toLowerCase() === 'staged' ? 'file-addition-solid' : 'file-addition';
|
||||||
},
|
},
|
||||||
modifiedIconName() {
|
modifiedIconName() {
|
||||||
return this.title.toLowerCase() === 'staged' ? 'file-modified-solid' : 'file-modified';
|
return this.title.toLowerCase() === 'staged' ? 'file-modified-solid' : 'file-modified';
|
||||||
|
@ -74,7 +74,7 @@ export default {
|
||||||
>
|
>
|
||||||
<icon
|
<icon
|
||||||
v-once
|
v-once
|
||||||
:name="icon"
|
:name="iconName"
|
||||||
:size="18"
|
:size="18"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -33,7 +33,7 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
iconName() {
|
iconName() {
|
||||||
const prefix = this.stagedList ? '-solid' : '';
|
const prefix = this.stagedList ? '-solid' : '';
|
||||||
return this.file.tempFile ? `file-additions${prefix}` : `file-modified${prefix}`;
|
return this.file.tempFile ? `file-addition${prefix}` : `file-modified${prefix}`;
|
||||||
},
|
},
|
||||||
iconClass() {
|
iconClass() {
|
||||||
return `multi-file-${this.file.tempFile ? 'additions' : 'modified'} append-right-8`;
|
return `multi-file-${this.file.tempFile ? 'additions' : 'modified'} append-right-8`;
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
import { mapState, mapActions, mapGetters } from 'vuex';
|
import { mapState, mapActions, mapGetters } from 'vuex';
|
||||||
import tooltip from '~/vue_shared/directives/tooltip';
|
import tooltip from '~/vue_shared/directives/tooltip';
|
||||||
import icon from '~/vue_shared/components/icon.vue';
|
import Icon from '~/vue_shared/components/icon.vue';
|
||||||
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
|
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
|
||||||
import LoadingButton from '~/vue_shared/components/loading_button.vue';
|
import LoadingButton from '~/vue_shared/components/loading_button.vue';
|
||||||
import commitFilesList from './commit_sidebar/list.vue';
|
import CommitFilesList from './commit_sidebar/list.vue';
|
||||||
import EmptyState from './commit_sidebar/empty_state.vue';
|
import EmptyState from './commit_sidebar/empty_state.vue';
|
||||||
import CommitMessageField from './commit_sidebar/message_field.vue';
|
import CommitMessageField from './commit_sidebar/message_field.vue';
|
||||||
import * as consts from '../stores/modules/commit/constants';
|
import * as consts from '../stores/modules/commit/constants';
|
||||||
|
@ -13,8 +13,8 @@ import Actions from './commit_sidebar/actions.vue';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
DeprecatedModal,
|
DeprecatedModal,
|
||||||
icon,
|
Icon,
|
||||||
commitFilesList,
|
CommitFilesList,
|
||||||
EmptyState,
|
EmptyState,
|
||||||
Actions,
|
Actions,
|
||||||
LoadingButton,
|
LoadingButton,
|
||||||
|
@ -72,7 +72,7 @@ export default {
|
||||||
v-if="changedFiles.length || stagedFiles.length"
|
v-if="changedFiles.length || stagedFiles.length"
|
||||||
>
|
>
|
||||||
<commit-files-list
|
<commit-files-list
|
||||||
icon="unstaged"
|
icon-name="unstaged"
|
||||||
:title="__('Unstaged')"
|
:title="__('Unstaged')"
|
||||||
:file-list="changedFiles"
|
:file-list="changedFiles"
|
||||||
action="stageAllChanges"
|
action="stageAllChanges"
|
||||||
|
@ -80,7 +80,7 @@ export default {
|
||||||
item-action-component="stage-button"
|
item-action-component="stage-button"
|
||||||
/>
|
/>
|
||||||
<commit-files-list
|
<commit-files-list
|
||||||
icon="staged"
|
icon-name="staged"
|
||||||
:title="__('Staged')"
|
:title="__('Staged')"
|
||||||
:file-list="stagedFiles"
|
:file-list="stagedFiles"
|
||||||
action="unstageAllChanges"
|
action="unstageAllChanges"
|
||||||
|
|
|
@ -540,22 +540,6 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
border-bottom: 1px solid $white-dark;
|
border-bottom: 1px solid $white-dark;
|
||||||
padding: $gl-btn-padding 0;
|
padding: $gl-btn-padding 0;
|
||||||
|
|
||||||
&.is-collapsed {
|
|
||||||
margin-left: -$gl-padding;
|
|
||||||
margin-right: -$gl-padding;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multi-file-commit-panel-collapse-btn {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
border-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.multi-file-commit-panel-header-title {
|
.multi-file-commit-panel-header-title {
|
||||||
|
@ -835,6 +819,24 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 140px;
|
min-height: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.is-collapsed {
|
||||||
|
.multi-file-commit-panel-header {
|
||||||
|
margin-left: -$gl-padding;
|
||||||
|
margin-right: -$gl-padding;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multi-file-commit-panel-collapse-btn {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ide-staged-action-btn {
|
.ide-staged-action-btn {
|
||||||
|
|
|
@ -28,7 +28,7 @@ describe('IDE changed file icon', () => {
|
||||||
it('equals file-addition when a temp file', () => {
|
it('equals file-addition when a temp file', () => {
|
||||||
vm.file.tempFile = true;
|
vm.file.tempFile = true;
|
||||||
|
|
||||||
expect(vm.changedIcon).toBe('file-additions');
|
expect(vm.changedIcon).toBe('file-addition');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -73,7 +73,7 @@ describe('Multi-file editor commit sidebar list item', () => {
|
||||||
it('returns addition when not a tempFile', () => {
|
it('returns addition when not a tempFile', () => {
|
||||||
f.tempFile = true;
|
f.tempFile = true;
|
||||||
|
|
||||||
expect(vm.iconName).toBe('file-additions');
|
expect(vm.iconName).toBe('file-addition');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue