diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/commit_sidebar')
5 files changed, 31 insertions, 39 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue index 24499fb9f6d..59a32dd477e 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue @@ -29,7 +29,7 @@ export default { }, }, methods: { - ...mapActions(['stageChange', 'unstageChange', 'discardFileChanges']), + ...mapActions(['unstageChange', 'discardFileChanges']), showDiscardModal() { this.$refs.discardModal.show(); }, @@ -56,7 +56,7 @@ export default { v-if="canDiscard" ref="discardButton" type="button" - class="btn btn-remove btn-inverted append-right-8" + class="btn btn-remove btn-inverted gl-mr-3" @click="showDiscardModal" > {{ __('Discard changes') }} diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue index a23bae8e4c7..a13ca0cd138 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue @@ -9,10 +9,7 @@ export default { </script> <template> - <div - v-if="!lastCommitMsg" - class="multi-file-commit-panel-section ide-commit-empty-state js-empty-state" - > + <div v-if="!lastCommitMsg" class="multi-file-commit-panel-section ide-commit-empty-state"> <div class="ide-commit-empty-state-container"> <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div> <div class="append-right-default prepend-left-default"> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue index 4cbd33e6ed6..3bba4fbc906 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue @@ -26,7 +26,7 @@ export default { computed: { ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView', 'lastCommitMsg']), ...mapState('commit', ['commitMessage', 'submitCommitLoading']), - ...mapGetters(['hasChanges']), + ...mapGetters(['someUncommittedChanges']), ...mapGetters('commit', ['discardDraftButtonDisabled', 'preBuiltCommitMessage']), overviewText() { return n__('%d changed file', '%d changed files', this.stagedFiles.length); @@ -40,20 +40,9 @@ export default { }, }, watch: { - currentActivityView() { - if (this.lastCommitMsg) { - this.isCompact = false; - } else { - this.isCompact = !( - this.currentViewIsCommitView && window.innerHeight >= MAX_WINDOW_HEIGHT_COMPACT - ); - } - }, - - lastCommitMsg() { - this.isCompact = - this.currentActivityView !== leftSidebarViews.commit.name && this.lastCommitMsg === ''; - }, + currentActivityView: 'handleCompactState', + someUncommittedChanges: 'handleCompactState', + lastCommitMsg: 'handleCompactState', }, methods: { ...mapActions(['updateActivityBarView']), @@ -71,19 +60,24 @@ export default { forceCreateNewBranch() { return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commit()); }, - toggleIsCompact() { - if (this.currentViewIsCommitView) { - this.isCompact = !this.isCompact; + handleCompactState() { + if (this.lastCommitMsg) { + this.isCompact = false; } else { - this.updateActivityBarView(leftSidebarViews.commit.name) - .then(() => { - this.isCompact = false; - }) - .catch(e => { - throw e; - }); + this.isCompact = + !this.someUncommittedChanges || + !this.currentViewIsCommitView || + window.innerHeight < MAX_WINDOW_HEIGHT_COMPACT; } }, + toggleIsCompact() { + this.isCompact = !this.isCompact; + }, + beginCommit() { + return this.updateActivityBarView(leftSidebarViews.commit.name).then(() => { + this.isCompact = false; + }); + }, beforeEnterTransition() { const elHeight = this.isCompact ? this.$refs.formEl && this.$refs.formEl.offsetHeight @@ -126,16 +120,17 @@ export default { > <div v-if="isCompact" ref="compactEl" class="commit-form-compact"> <button - :disabled="!hasChanges" + :disabled="!someUncommittedChanges" type="button" class="btn btn-primary btn-sm btn-block qa-begin-commit-button" - @click="toggleIsCompact" + data-testid="begin-commit-button" + @click="beginCommit" > {{ __('Commit…') }} </button> <p class="text-center bold">{{ overviewText }}</p> </div> - <form v-if="!isCompact" ref="formEl" @submit.prevent.stop="commit"> + <form v-else ref="formEl" @submit.prevent.stop="commit"> <transition name="fade"> <success-message v-show="lastCommitMsg" /> </transition> <commit-message-field :text="commitMessage" diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index e6a1a1ba73c..5cff1079eb0 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -55,7 +55,7 @@ export default { }, }, methods: { - ...mapActions(['stageAllChanges', 'unstageAllChanges', 'discardAllChanges']), + ...mapActions(['unstageAllChanges', 'discardAllChanges']), openDiscardModal() { this.$refs.discardAllModal.show(); }, @@ -74,7 +74,7 @@ export default { <div class="ide-commit-list-container"> <header class="multi-file-commit-panel-header d-flex mb-0"> <div class="d-flex align-items-center flex-fill"> - <icon v-once :name="iconName" :size="18" class="append-right-8" /> + <icon v-once :name="iconName" :size="18" class="gl-mr-3" /> <strong> {{ titleText }} </strong> <div class="d-flex ml-auto"> <button @@ -98,7 +98,7 @@ export default { </div> </div> </header> - <ul v-if="filesLength" class="multi-file-commit-list list-unstyled append-bottom-0"> + <ul v-if="filesLength" class="multi-file-commit-list list-unstyled gl-mb-0"> <li v-for="file in fileList" :key="file.key"> <list-item :file="file" diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue index e70e251c117..c65169f5d31 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -4,7 +4,7 @@ import tooltip from '~/vue_shared/directives/tooltip'; import Icon from '~/vue_shared/components/icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; import { viewerTypes } from '../../constants'; -import { getCommitIconMap } from '../../utils'; +import getCommitIconMap from '../../commit_icon'; export default { components: { @@ -87,7 +87,7 @@ export default { @click="openFileInEditor" > <span class="multi-file-commit-list-file-path d-flex align-items-center"> - <file-icon :file-name="file.name" class="append-right-8" /> + <file-icon :file-name="file.name" class="gl-mr-3" /> <template v-if="file.prevName && file.prevName !== file.name"> {{ file.prevName }} → </template> |