From ebc15f4318ed23ccdfe7dc543721968ae92daae0 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 4 Sep 2018 09:00:25 +0100 Subject: [PATCH] design improvements --- .../ide/components/commit_sidebar/list.vue | 8 ++--- .../components/commit_sidebar/list_item.vue | 29 ++++++++++------ .../commit_sidebar/stage_button.vue | 8 +++-- .../commit_sidebar/unstage_button.vue | 3 +- app/assets/stylesheets/page_bundles/ide.scss | 33 ++++++++++++++----- 5 files changed, 54 insertions(+), 27 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" >
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" > - {{ file.name }} +
+
+ +
+ +
- 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)" > diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index f4c99016696..2eadc55bdfd 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -567,9 +567,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } .multi-file-commit-panel-header { - display: flex; - align-items: center; - margin-bottom: 0; + height: 48px; border-bottom: 1px solid $white-dark; padding: 12px 0; } @@ -583,8 +581,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; flex: 1; overflow: auto; padding: $grid-size 0; - margin-left: -$grid-size; - margin-right: -$grid-size; min-height: 60px; &.form-text.text-muted { @@ -649,6 +645,8 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; .multi-file-commit-list-path { cursor: pointer; + height: 32px; + padding-right: 0; &.is-active { background-color: $white-normal; @@ -657,6 +655,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; &:hover, &:focus { outline: 0; + + .multi-file-discard-btn { + display: flex; + } } svg { @@ -676,13 +678,16 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } .multi-file-discard-btn { - top: 4px; - right: 8px; - bottom: 4px; + display: none; svg { top: 0; } + + .btn { + width: 32px; + height: 32px; + } } .multi-file-commit-form { @@ -797,6 +802,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } .ide-staged-action-btn { + width: 32px; + height: 32px; + color: inherit; + > svg { top: 0; } @@ -1443,7 +1452,13 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } .ide-commit-editor-header { + height: 65px; padding: 8px 16px; - background-color: $white-normal; + background-color: $theme-gray-50; box-shadow: inset 0 -1px $white-dark; } + +.ide-commit-list-changed-icon { + width: 32px; + height: 32px; +}