Commit 2aa47e10 authored by Phil Hughes's avatar Phil Hughes

Improved IDE commit flow

Closes #48182
parent 44cb8a74
<script>
import $ from 'jquery';
import { mapActions } from 'vuex';
import { __ } from '~/locale';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import ChangedFileIcon from '../changed_file_icon.vue';
export default {
components: {
FileIcon,
ChangedFileIcon,
},
props: {
activeFile: {
type: Object,
required: true,
},
},
computed: {
activeButtonText() {
return this.activeFile.staged ? __('Unstage') : __('Stage');
},
isStaged() {
return !this.activeFile.changed && this.activeFile.staged;
},
},
methods: {
...mapActions(['stageChange', 'unstageChange']),
actionButtonClicked() {
if (this.activeFile.staged) {
this.unstageChange(this.activeFile.path);
} else {
this.stageChange(this.activeFile.path);
}
},
showDiscardModal() {
$(document.getElementById(`discard-file-${this.activeFile.path}`)).modal('show');
},
},
};
</script>
<template>
<div class="d-flex ide-commit-editor-header align-items-center">
<file-icon
:file-name="activeFile.name"
:size="16"
class="mr-2"
/>
<strong class="mr-2">
{{ activeFile.path }}
</strong>
<changed-file-icon
:file="activeFile"
/>
<div class="ml-auto">
<button
v-if="!isStaged"
type="button"
class="btn btn-remove btn-inverted append-right-8"
@click="showDiscardModal"
>
{{ __('Discard') }}
</button>
<button
:class="{
'btn-success': !isStaged,
'btn-warning': isStaged
}"
type="button"
class="btn btn-inverted"
@click="actionButtonClicked"
>
{{ activeButtonText }}
</button>
</div>
</div>
</template>
......@@ -56,6 +56,11 @@ export default {
type: String,
required: true,
},
emptyStateText: {
type: String,
required: false,
default: __('No changes'),
},
},
computed: {
titleText() {
......@@ -91,17 +96,20 @@ export default {
:name="iconName"
:size="18"
/>
<strong>
{{ titleText }}
</strong>
<div class="d-flex ml-auto">
<button
v-tooltip
v-show="filesLength"
:title="actionBtnText"
:aria-label="actionBtnText"
:disabled="!filesLength"
:class="{
'd-flex': filesLength
'disabled-content': !filesLength
}"
:title="actionBtnText"
type="button"
class="btn btn-default ide-staged-action-btn p-0 order-1 align-items-center"
class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
data-placement="bottom"
data-container="body"
data-boundary="viewport"
......@@ -109,18 +117,10 @@ export default {
>
<icon
:name="actionBtnIcon"
:size="12"
class="ml-auto mr-auto"
:size="16"
class="mr-0"
/>
</button>
<span
:class="{
'rounded-right': !filesLength
}"
class="ide-commit-file-count order-0 rounded-left text-center"
>
{{ filesLength }}
</span>
</div>
</div>
</header>
......@@ -143,9 +143,9 @@ export default {
</ul>
<p
v-else
class="multi-file-commit-list form-text text-muted"
class="multi-file-commit-list form-text text-muted text-center"
>
{{ __('No changes') }}
{{ emptyStateText }}
</p>
</div>
</template>
<script>
import $ from 'jquery';
import { mapActions } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import GlModal from '~/vue_shared/components/gl_modal.vue';
export default {
components: {
Icon,
GlModal,
},
directives: {
tooltip,
......@@ -16,8 +19,19 @@ export default {
required: true,
},
},
computed: {
modalId() {
return `discard-file-${this.path}`;
},
modalTitle() {
return `Discard changes to ${this.path}?`;
},
},
methods: {
...mapActions(['stageChange', 'discardFileChanges']),
showDiscardModal() {
$(document.getElementById(this.modalId)).modal('show');
},
},
};
</script>
......@@ -25,51 +39,48 @@ export default {
<template>
<div
v-once
class="multi-file-discard-btn dropdown"
class="multi-file-discard-btn"
>
<button
v-tooltip
:aria-label="__('Stage changes')"
:title="__('Stage changes')"
type="button"
class="btn btn-blank append-right-5 d-flex align-items-center"
class="btn btn-blank append-right-8 d-flex align-items-center"
data-container="body"
data-boundary="viewport"
data-placement="bottom"
@click.stop="stageChange(path)"
@click="stageChange(path)"
>
<icon
:size="12"
:size="16"
name="mobile-issue-close"
/>
</button>
<button
v-tooltip
:title="__('More actions')"
:aria-label="__('Discard changes')"
:title="__('Discard changes')"
type="button"
class="btn btn-blank d-flex align-items-center"
data-container="body"
data-boundary="viewport"
data-placement="bottom"
data-toggle="dropdown"
data-display="static"
@click="showDiscardModal"
>
<icon
:size="12"
name="ellipsis_h"
:size="16"
name="remove"
/>
</button>
<div class="dropdown-menu dropdown-menu-right">
<ul>
<li>
<button
type="button"
@click.stop="discardFileChanges(path)"
<gl-modal
:id="modalId"
:header-title-text="modalTitle"
:footer-primary-button-text="__('Discard changes')"
footer-primary-button-variant="danger"
@submit="discardFileChanges(path)"
>
{{ __('Discard changes') }}
</button>
</li>
</ul>
</div>
{{ __("You will loose all changes you've made to this file. This action cannot be undone.") }}
</gl-modal>
</div>
</template>
......@@ -39,8 +39,8 @@ export default {
@click="unstageChange(path)"
>
<icon
:size="12"
name="history"
:size="16"
name="redo"
/>
</button>
</div>
......
......@@ -10,6 +10,7 @@ import RepoEditor from './repo_editor.vue';
import FindFile from './file_finder/index.vue';
import RightPane from './panes/right.vue';
import ErrorMessage from './error_message.vue';
import CommitEditorHeader from './commit_sidebar/editor_header.vue';
const originalStopCallback = Mousetrap.stopCallback;
......@@ -23,6 +24,7 @@ export default {
FindFile,
RightPane,
ErrorMessage,
CommitEditorHeader,
},
computed: {
...mapState([
......@@ -34,7 +36,7 @@ export default {
'currentProjectId',
'errorMessage',
]),
...mapGetters(['activeFile', 'hasChanges', 'someUncommitedChanges']),
...mapGetters(['activeFile', 'hasChanges', 'someUncommitedChanges', 'isCommitModeActive']),
},
mounted() {
window.onbeforeunload = e => this.onBeforeUnload(e);
......@@ -96,7 +98,12 @@ export default {
<template
v-if="activeFile"
>
<commit-editor-header
v-if="isCommitModeActive"
:active-file="activeFile"
/>
<repo-tabs
v-else
:active-file="activeFile"
:files="openFiles"
:viewer="viewer"
......
......@@ -95,6 +95,7 @@ export default {
:file-list="changedFiles"
:action-btn-text="__('Stage all changes')"
:active-file-key="activeFileKey"
:empty-state-text="__('There are no unstaged changes')"
action="stageAllChanges"
action-btn-icon="mobile-issue-close"
item-action-component="stage-button"
......@@ -108,6 +109,7 @@ export default {
:action-btn-text="__('Unstage all changes')"
:staged-list="true"
:active-file-key="activeFileKey"
:empty-state-text="__('There are no staged changes')"
action="unstageAllChanges"
action-btn-icon="history"
item-action-component="unstage-button"
......
......@@ -166,6 +166,10 @@
@include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
}
&.btn-warning {
@include btn-outline($white-light, $orange-500, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
}
&.btn-primary,
&.btn-info {
@include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
......
......@@ -679,6 +679,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.multi-file-commit-list-file-path {
@include str-truncated(calc(100% - 30px));
user-select: none;
&:active {
text-decoration: none;
......@@ -807,11 +808,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
}
.ide-staged-action-btn {
width: 22px;
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
> svg {
top: 0;
}
......@@ -1456,3 +1452,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
max-height: 222px;
}
}
.ide-commit-editor-header {
padding: 8px 16px;
background-color: $white-normal;
box-shadow: inset 0 -1px $white-dark;
}
......@@ -2301,6 +2301,9 @@ msgstr ""
msgid "Disable group Runners"
msgstr ""
msgid "Discard"
msgstr ""
msgid "Discard changes"
msgstr ""
......@@ -3777,9 +3780,6 @@ msgstr ""
msgid "More"
msgstr ""
msgid "More actions"
msgstr ""
msgid "More information"
msgstr ""
......@@ -5769,6 +5769,12 @@ msgstr ""
msgid "There are no projects shared with this group yet"
msgstr ""
msgid "There are no staged changes"
msgstr ""
msgid "There are no unstaged changes"
msgstr ""
msgid "There are problems accessing Git storage: "
msgstr ""
......@@ -6226,6 +6232,9 @@ msgstr ""
msgid "Unresolve discussion"
msgstr ""
msgid "Unstage"
msgstr ""
msgid "Unstage all changes"
msgstr ""
......@@ -6643,6 +6652,9 @@ msgstr ""
msgid "You need permission."
msgstr ""
msgid "You will loose all changes you've made to this file. This action cannot be undone."
msgstr ""
msgid "You will not get any notifications via email"
msgstr ""
......
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