94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<script>
|
|
import { mapActions, mapState, mapGetters } from 'vuex';
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
|
import tooltip from '~/vue_shared/directives/tooltip';
|
|
|
|
export default {
|
|
components: {
|
|
Icon,
|
|
},
|
|
directives: {
|
|
tooltip,
|
|
},
|
|
props: {
|
|
noChangesStateSvgPath: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
committedStateSvgPath: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState(['lastCommitMsg', 'rightPanelCollapsed']),
|
|
...mapGetters(['collapseButtonIcon', 'collapseButtonTooltip']),
|
|
statusSvg() {
|
|
return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(['toggleRightPanelCollapsed']),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="multi-file-commit-panel-section ide-commit-empty-state js-empty-state"
|
|
>
|
|
<header
|
|
class="multi-file-commit-panel-header"
|
|
:class="{
|
|
'is-collapsed': rightPanelCollapsed,
|
|
}"
|
|
>
|
|
<button
|
|
v-tooltip
|
|
:title="collapseButtonTooltip"
|
|
data-container="body"
|
|
data-placement="left"
|
|
type="button"
|
|
class="btn btn-transparent multi-file-commit-panel-collapse-btn"
|
|
:aria-label="__('Toggle sidebar')"
|
|
@click.stop="toggleRightPanelCollapsed"
|
|
>
|
|
<icon
|
|
:name="collapseButtonIcon"
|
|
:size="18"
|
|
/>
|
|
</button>
|
|
</header>
|
|
<div
|
|
class="ide-commit-empty-state-container"
|
|
v-if="!rightPanelCollapsed"
|
|
>
|
|
<div class="svg-content svg-80">
|
|
<img :src="statusSvg" />
|
|
</div>
|
|
<div class="append-right-default prepend-left-default">
|
|
<div
|
|
class="text-content text-center"
|
|
v-if="!lastCommitMsg"
|
|
>
|
|
<h4>
|
|
{{ __('No changes') }}
|
|
</h4>
|
|
<p>
|
|
{{ __('Edit files in the editor and commit changes here') }}
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="text-content text-center"
|
|
v-else
|
|
>
|
|
<h4>
|
|
{{ __('All changes are committed') }}
|
|
</h4>
|
|
<p v-html="lastCommitMsg"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|