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