diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2018-03-27 16:56:22 +0200 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2018-03-28 12:17:30 +0200 |
commit | 4afd72377d0ad5fcc8dc5462cc3b80432f3ac79e (patch) | |
tree | 627c6b436379cb804e093ec1bf06004643ff2840 /app | |
parent | d9b7c33f779270dd8bb9fae3b452eca3d5a60d98 (diff) | |
download | gitlab-ce-4afd72377d0ad5fcc8dc5462cc3b80432f3ac79e.tar.gz |
Added Changes based on UX Review
Diffstat (limited to 'app')
9 files changed, 100 insertions, 63 deletions
diff --git a/app/assets/javascripts/ide/components/changed_file_icon.vue b/app/assets/javascripts/ide/components/changed_file_icon.vue index 0e03f527227..037e3efb4ce 100644 --- a/app/assets/javascripts/ide/components/changed_file_icon.vue +++ b/app/assets/javascripts/ide/components/changed_file_icon.vue @@ -13,8 +13,7 @@ export default { }, computed: { changedIcon() { - if (this.file.tempFile) return 'file-addition'; - return this.file.changed ? 'file-modified' : 'git-merge'; + return this.file.tempFile ? 'file-addition' : 'file-modified'; }, changedIconClass() { return `multi-${this.changedIcon}`; diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue index 1b0526b9ea5..399613912a7 100644 --- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue +++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue @@ -1,5 +1,6 @@ <script> import Icon from '~/vue_shared/components/icon.vue'; +import { __, sprintf } from '~/locale'; export default { components: { @@ -11,10 +12,10 @@ export default { required: false, default: false, }, - hasMergeRequest: { - type: Boolean, + mergeRequestId: { + type: String, required: false, - default: false, + default: '', }, viewer: { type: String, @@ -48,8 +49,8 @@ export default { }" data-toggle="dropdown" > - <template v-if="viewer === 'mrdiff'"> - {{ __('Reviewing (merge request)') }} + <template v-if="viewer === 'mrdiff' && mergeRequestId"> + {{ sprintf(__('Reviewing (merge request !%{mergeRequestId})'), { mergeRequestId }) }} </template> <template v-else-if="viewer === 'editor'"> {{ __('Editing') }} @@ -65,26 +66,27 @@ export default { </button> <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left"> <ul> - <li v-if="hasMergeRequest"> - <a - href="#" - @click.prevent="changeMode('mrdiff')" - :class="{ - 'is-active': viewer === 'mrdiff', - }" + <template v-if="mergeRequestId"> + <li> + <a + href="#" + @click.prevent="changeMode('mrdiff')" + :class="{ + 'is-active': viewer === 'mrdiff', + }" + > + <strong class="dropdown-menu-inner-title">{{ sprintf(__('Reviewing (merge request !%{mergeRequestId})'), { mergeRequestId }) }}</strong> + <span class="dropdown-menu-inner-content"> + {{ __('Compare changes with the merge request target branch') }} + </span> + </a> + </li> + <li + role="separator" + class="divider" > - <strong class="dropdown-menu-inner-title">{{ __('Reviewing (merge request)') }}</strong> - <span class="dropdown-menu-inner-content"> - {{ __('Compare changes of the merge request') }} - </span> - </a> - </li> - <li - v-if="hasMergeRequest" - role="separator" - class="divider" - > - </li> + </li> + </template> <li> <a href="#" diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index f300afa24ac..c9439ed2b59 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -6,6 +6,7 @@ import repoTabs from './repo_tabs.vue'; import repoFileButtons from './repo_file_buttons.vue'; import ideStatusBar from './ide_status_bar.vue'; import repoEditor from './repo_editor.vue'; +import { currentMergeRequest } from '../stores/getters'; export default { components: { @@ -31,8 +32,8 @@ export default { }, }, computed: { - ...mapState(['changedFiles', 'openFiles', 'viewer']), - ...mapGetters(['activeFile', 'hasChanges', 'hasMergeRequest']), + ...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']), + ...mapGetters(['activeFile', 'hasChanges', 'currentMergeRequest']), }, mounted() { const returnValue = 'Are you sure you want to lose unsaved changes?'; @@ -63,7 +64,7 @@ export default { :files="openFiles" :viewer="viewer" :has-changes="hasChanges" - :has-merge-request="hasMergeRequest" + :merge-request-id="currentMergeRequestId" /> <repo-editor class="multi-file-edit-pane-content" diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue new file mode 100644 index 00000000000..2e49a831d0b --- /dev/null +++ b/app/assets/javascripts/ide/components/mr_file_icon.vue @@ -0,0 +1,29 @@ +<script> +import icon from '~/vue_shared/components/icon.vue'; +import tooltip from '../../vue_shared/directives/tooltip'; + +export default { + components: { + icon, + }, + directives: { + tooltip, + }, + props: { + file: { + type: Object, + required: true, + }, + }, +}; +</script> + +<template> + <icon + name="git-merge" + v-tooltip + title="Part of merge request changes" + css-classes="ide-file-changed-icon" + :size="12" + /> +</template> diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index 88a248d5eeb..cdc9cd30a7e 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -6,6 +6,7 @@ import router from '../ide_router'; import newDropdown from './new_dropdown/index.vue'; import fileStatusIcon from './repo_file_status_icon.vue'; import changedFileIcon from './changed_file_icon.vue'; +import mrFileIcon from './mr_file_icon.vue'; export default { name: 'RepoFile', @@ -15,6 +16,7 @@ export default { fileStatusIcon, fileIcon, changedFileIcon, + mrFileIcon, }, props: { file: { @@ -99,11 +101,16 @@ export default { :file="file" /> </span> - <changed-file-icon - :file="file" - v-if="file.changed || file.tempFile || file.mrChange" - class="prepend-top-5 pull-right" - /> + <span class="pull-right"> + <mr-file-icon + :file="file" + v-if="file.mrChange" + /> + <changed-file-icon + :file="file" + v-if="file.changed || file.tempFile" + /> + </span> <new-dropdown v-if="isTree" :project-id="file.projectId" diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue index 25d311142d5..97589e116c5 100644 --- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue +++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue @@ -1,27 +1,27 @@ <script> - import icon from '~/vue_shared/components/icon.vue'; - import tooltip from '~/vue_shared/directives/tooltip'; - import '~/lib/utils/datetime_utility'; +import icon from '~/vue_shared/components/icon.vue'; +import tooltip from '~/vue_shared/directives/tooltip'; +import '~/lib/utils/datetime_utility'; - export default { - components: { - icon, +export default { + components: { + icon, + }, + directives: { + tooltip, + }, + props: { + file: { + type: Object, + required: true, }, - directives: { - tooltip, + }, + computed: { + lockTooltip() { + return `Locked by ${this.file.file_lock.user.name}`; }, - props: { - file: { - type: Object, - required: true, - }, - }, - computed: { - lockTooltip() { - return `Locked by ${this.file.file_lock.user.name}`; - }, - }, - }; + }, +}; </script> <template> diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue index c6973134ba2..a44e418b2eb 100644 --- a/app/assets/javascripts/ide/components/repo_tabs.vue +++ b/app/assets/javascripts/ide/components/repo_tabs.vue @@ -21,10 +21,10 @@ export default { type: Boolean, required: true, }, - hasMergeRequest: { - type: Boolean, - required: true, - default: false, + mergeRequestId: { + type: String, + required: false, + default: '', }, }, data() { @@ -59,7 +59,7 @@ export default { :viewer="viewer" :show-shadow="showShadow" :has-changes="hasChanges" - :has-merge-request="hasMergeRequest" + :merge-request-id="mergeRequestId" @click="updateViewer" /> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index cc03dca5291..d0a4b80bf13 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -105,7 +105,7 @@ export default { class="btn btn-sm btn-default inline js-web-ide" type="button" > - {{ s__("mrWidget|Open in Web IDE") }} + {{ s__("mrWidget|Web IDE") }} </a> <button data-target="#modal_merge_info" diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 65046f6665e..ff890d03ee1 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -50,6 +50,7 @@ flex: 1; white-space: nowrap; text-overflow: ellipsis; + max-width: inherit; svg { vertical-align: middle; @@ -720,9 +721,7 @@ } .ide-view { - height: calc( - 100vh - #{$header-height + $performance-bar-height + $flash-height} - ); + height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height}); } } } |