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

Improve commit flow in Web IDE

Closes #46122
parent ea891fb3
...@@ -34,6 +34,10 @@ export default { ...@@ -34,6 +34,10 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
actionBtnIcon: {
type: String,
required: true,
},
itemActionComponent: { itemActionComponent: {
type: String, type: String,
required: true, required: true,
...@@ -53,11 +57,6 @@ export default { ...@@ -53,11 +57,6 @@ export default {
required: true, required: true,
}, },
}, },
data() {
return {
showActionButton: false,
};
},
computed: { computed: {
titleText() { titleText() {
return sprintf(__('%{title} changes'), { return sprintf(__('%{title} changes'), {
...@@ -70,9 +69,6 @@ export default { ...@@ -70,9 +69,6 @@ export default {
actionBtnClicked() { actionBtnClicked() {
this[this.action](); this[this.action]();
}, },
setShowActionButton(show) {
this.showActionButton = show;
},
}, },
}; };
</script> </script>
...@@ -83,8 +79,6 @@ export default { ...@@ -83,8 +79,6 @@ export default {
> >
<header <header
class="multi-file-commit-panel-header" class="multi-file-commit-panel-header"
@mouseenter="setShowActionButton(true)"
@mouseleave="setShowActionButton(false)"
> >
<div <div
class="multi-file-commit-panel-header-title" class="multi-file-commit-panel-header-title"
...@@ -95,20 +89,34 @@ export default { ...@@ -95,20 +89,34 @@ export default {
:size="18" :size="18"
/> />
{{ titleText }} {{ titleText }}
<span <div class="d-flex ml-auto">
v-show="!showActionButton" <button
class="ide-commit-file-count" v-show="fileList.length"
> v-tooltip
{{ fileList.length }} type="button"
</span> class="ide-staged-action-btn p-0 order-1 align-items-center rounded-right border-left-0"
<button :class="{
v-show="showActionButton" 'd-flex': fileList.length
type="button" }"
class="btn btn-blank btn-link ide-staged-action-btn" :title="actionBtnText"
@click="actionBtnClicked" data-placement="bottom"
> @click="actionBtnClicked"
{{ actionBtnText }} >
</button> <icon
class="ml-auto mr-auto"
:name="actionBtnIcon"
:size="12"
/>
</button>
<span
class="ide-commit-file-count order-0 rounded-left text-center"
:class="{
'rounded-right': !fileList.length
}"
>
{{ fileList.length }}
</span>
</div>
</div> </div>
</header> </header>
<ul <ul
......
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import StageButton from './stage_button.vue'; import StageButton from './stage_button.vue';
import UnstageButton from './unstage_button.vue'; import UnstageButton from './unstage_button.vue';
...@@ -11,6 +12,9 @@ export default { ...@@ -11,6 +12,9 @@ export default {
StageButton, StageButton,
UnstageButton, UnstageButton,
}, },
directives: {
tooltip,
},
props: { props: {
file: { file: {
type: Object, type: Object,
...@@ -88,6 +92,8 @@ export default { ...@@ -88,6 +92,8 @@ export default {
class="multi-file-commit-list-item" class="multi-file-commit-list-item"
> >
<button <button
v-tooltip
:title="file.path"
type="button" type="button"
class="multi-file-commit-list-path" class="multi-file-commit-list-path"
@dblclick="fileAction" @dblclick="fileAction"
...@@ -98,10 +104,11 @@ export default { ...@@ -98,10 +104,11 @@ export default {
:name="iconName" :name="iconName"
:size="16" :size="16"
:css-classes="iconClass" :css-classes="iconClass"
/>{{ file.path }} />{{ file.name }}
</span> </span>
</button> </button>
<component <component
class="d-flex ml-auto"
:is="actionComponent" :is="actionComponent"
:path="file.path" :path="file.path"
/> />
......
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
<template> <template>
<div <div
v-once v-once
class="multi-file-discard-btn" class="multi-file-discard-btn dropdown"
> >
<button <button
v-tooltip v-tooltip
...@@ -43,17 +43,27 @@ export default { ...@@ -43,17 +43,27 @@ export default {
</button> </button>
<button <button
v-tooltip v-tooltip
:aria-label="__('Discard changes')"
:title="__('Discard changes')"
type="button" type="button"
class="btn btn-blank" class="btn btn-blank"
data-container="body" data-container="body"
@click.stop="discardFileChanges(path)" data-toggle="dropdown"
> >
<icon <icon
:size="12" :size="12"
name="remove" name="more"
/> />
</button> </button>
<div class="dropdown-menu">
<ul>
<li>
<button
type="button"
@click.stop="discardFileChanges(path)"
>
{{ __('Discard changes') }}
</button>
</li>
</ul>
</div>
</div> </div>
</template> </template>
...@@ -93,23 +93,25 @@ export default { ...@@ -93,23 +93,25 @@ export default {
:title="__('Unstaged')" :title="__('Unstaged')"
:key-prefix="$options.stageKeys.unstaged" :key-prefix="$options.stageKeys.unstaged"
:file-list="changedFiles" :file-list="changedFiles"
:action-btn-text="__('Stage all')" :action-btn-text="__('Stage all changes')"
:active-file-key="activeFileKey" :active-file-key="activeFileKey"
class="is-first"
icon-name="unstaged"
action="stageAllChanges" action="stageAllChanges"
action-btn-icon="mobile-issue-close"
item-action-component="stage-button" item-action-component="stage-button"
class="is-first"
icon-name="unstaged"
/> />
<commit-files-list <commit-files-list
:title="__('Staged')" :title="__('Staged')"
:key-prefix="$options.stageKeys.staged" :key-prefix="$options.stageKeys.staged"
:file-list="stagedFiles" :file-list="stagedFiles"
:action-btn-text="__('Unstage all')" :action-btn-text="__('Unstage all changes')"
:staged-list="true" :staged-list="true"
:active-file-key="activeFileKey" :active-file-key="activeFileKey"
icon-name="staged"
action="unstageAllChanges" action="unstageAllChanges"
action-btn-icon="history"
item-action-component="unstage-button" item-action-component="unstage-button"
icon-name="staged"
/> />
</template> </template>
<empty-state <empty-state
......
...@@ -557,16 +557,7 @@ ...@@ -557,16 +557,7 @@
} }
.multi-file-discard-btn { .multi-file-discard-btn {
display: none;
margin-top: -2px; margin-top: -2px;
margin-left: auto;
color: $gl-link-color;
}
&:hover {
.multi-file-discard-btn {
display: flex;
}
} }
} }
...@@ -840,18 +831,14 @@ ...@@ -840,18 +831,14 @@
} }
.ide-staged-action-btn { .ide-staged-action-btn {
margin-left: auto; width: 22px;
line-height: 22px; border: 1px solid $white-dark;
} }
.ide-commit-file-count { .ide-commit-file-count {
min-width: 22px; min-width: 22px;
margin-left: auto;
background-color: $gray-light; background-color: $gray-light;
border-radius: $border-radius-default;
border: 1px solid $white-dark; border: 1px solid $white-dark;
line-height: 20px;
text-align: center;
} }
.ide-commit-radios { .ide-commit-radios {
......
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