diff options
author | Phil Hughes <me@iamphill.com> | 2018-06-12 17:05:45 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-06-14 15:42:55 +0100 |
commit | 2d5e47bfc3c6c9a77dbb61694cd65c18f45a11cc (patch) | |
tree | 41c695965227d123b84e76a226100e31384ea868 | |
parent | ea891fb3ad930a5df1f0021ef1513098de86545b (diff) | |
download | gitlab-ce-2d5e47bfc3c6c9a77dbb61694cd65c18f45a11cc.tar.gz |
Improve commit flow in Web IDE
Closes #46122
5 files changed, 64 insertions, 50 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index 3d59410cbc2..72c02d1584f 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -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> - <button - v-show="showActionButton" - type="button" - class="btn btn-blank btn-link ide-staged-action-btn" - @click="actionBtnClicked" - > - {{ actionBtnText }} - </button> + <div class="d-flex ml-auto"> + <button + v-show="fileList.length" + v-tooltip + type="button" + 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" + > + <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 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 2ecf9af4bf0..040e2ea5375 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -1,5 +1,6 @@ <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" /> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue index a786ec80ac2..60d0023d121 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue @@ -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> diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue index 01df0019fd4..c2c678ff0be 100644 --- a/app/assets/javascripts/ide/components/repo_commit_section.vue +++ b/app/assets/javascripts/ide/components/repo_commit_section.vue @@ -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 diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 4b8a3db1d06..0b0a435b6f4 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -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 { |