diff options
author | Phil Hughes <me@iamphill.com> | 2018-09-04 09:00:25 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-09-07 11:28:02 +0100 |
commit | ebc15f4318ed23ccdfe7dc543721968ae92daae0 (patch) | |
tree | 061a0e0e77f94b4adbddd88c5fe429b7987d433d /app/assets/javascripts/ide | |
parent | 1f808ffe9e567bcafce3372c488f20ca293b14a7 (diff) | |
download | gitlab-ce-ebc15f4318ed23ccdfe7dc543721968ae92daae0.tar.gz |
design improvements
Diffstat (limited to 'app/assets/javascripts/ide')
4 files changed, 30 insertions, 18 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index 92cd46e9385..a69df0956bc 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -97,7 +97,7 @@ export default { class="ide-commit-list-container" > <header - class="multi-file-commit-panel-header" + class="multi-file-commit-panel-header d-flex mb-0" > <div class="d-flex align-items-center flex-fill" @@ -131,7 +131,7 @@ export default { <icon :name="actionBtnIcon" :size="16" - class="mr-0" + class="ml-auto mr-auto" /> </button> <button @@ -144,7 +144,7 @@ export default { 'disabled-content': !filesLength }" type="button" - class="d-flex ide-staged-action-btn p-0 border-0 align-items-center prepend-left-8" + class="d-flex ide-staged-action-btn p-0 border-0 align-items-center" data-placement="bottom" data-container="body" data-boundary="viewport" @@ -153,7 +153,7 @@ export default { <icon :size="16" name="remove-all" - class="mr-0" + class="ml-auto mr-auto" /> </button> </div> 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 391004dcd3c..10c78a80302 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -2,6 +2,7 @@ import { mapActions } from 'vuex'; 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 StageButton from './stage_button.vue'; import UnstageButton from './unstage_button.vue'; import { viewerTypes } from '../../constants'; @@ -12,6 +13,7 @@ export default { Icon, StageButton, UnstageButton, + FileIcon, }, directives: { tooltip, @@ -48,7 +50,7 @@ export default { return `${getCommitIconMap(this.file).icon}${suffix}`; }, iconClass() { - return `${getCommitIconMap(this.file).class} append-right-8`; + return `${getCommitIconMap(this.file).class} ml-auto mr-auto`; }, fullKey() { return `${this.keyPrefix}-${this.file.key}`; @@ -105,17 +107,24 @@ export default { @click="openFileInEditor" > <span class="multi-file-commit-list-file-path d-flex align-items-center"> - <icon - :name="iconName" - :size="16" - :css-classes="iconClass" + <file-icon + :file-name="file.name" + class="append-right-8" />{{ file.name }} </span> + <div class="ml-auto d-flex align-items-center"> + <div class="d-flex align-items-center ide-commit-list-changed-icon"> + <icon + :name="iconName" + :size="16" + :css-classes="iconClass" + /> + </div> + <component + :is="actionComponent" + :path="file.path" + /> + </div> </div> - <component - :is="actionComponent" - :path="file.path" - class="d-flex position-absolute" - /> </div> </template> 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 13e66e4bcf5..fb8392d2e1b 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue @@ -46,15 +46,16 @@ export default { :aria-label="__('Stage changes')" :title="__('Stage changes')" type="button" - class="btn btn-blank append-right-8 d-flex align-items-center" + class="btn btn-blank d-flex align-items-center" data-container="body" data-boundary="viewport" data-placement="bottom" - @click="stageChange(path)" + @click.stop.prevent="stageChange(path)" > <icon :size="16" name="mobile-issue-close" + class="ml-auto mr-auto" /> </button> <button @@ -66,11 +67,12 @@ export default { data-container="body" data-boundary="viewport" data-placement="bottom" - @click="showDiscardModal" + @click.stop.prevent="showDiscardModal" > <icon :size="16" name="remove" + class="ml-auto mr-auto" /> </button> <gl-modal diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue index 4a24cf65e5a..95c80c31d41 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue @@ -36,11 +36,12 @@ export default { data-container="body" data-boundary="viewport" data-placement="bottom" - @click="unstageChange(path)" + @click.stop.prevent="unstageChange(path)" > <icon :size="16" name="redo" + class="ml-auto mr-auto" /> </button> </div> |