diff options
-rw-r--r-- | app/assets/javascripts/ide/components/editor_mode_dropdown.vue | 75 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/ide_review.vue | 41 | ||||
-rw-r--r-- | app/assets/javascripts/ide/ide_router.js | 3 |
3 files changed, 51 insertions, 68 deletions
diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue index 0c44a755f56..e50b1c0315d 100644 --- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue +++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue @@ -1,28 +1,14 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; import { __, sprintf } from '~/locale'; export default { - components: { - Icon, - }, props: { - hasChanges: { - type: Boolean, - required: false, - default: false, - }, - mergeRequestId: { - type: String, - required: false, - default: '', - }, viewer: { type: String, required: true, }, - showShadow: { - type: Boolean, + mergeRequestId: { + type: Number, required: true, }, }, @@ -44,69 +30,30 @@ export default { <template> <div class="dropdown" - :class="{ - shadow: showShadow, - }" + style="margin-left:auto;" > <button type="button" - class="btn btn-primary btn-sm" - :class="{ - 'btn-inverted': hasChanges, - }" + class="btn btn-link" data-toggle="dropdown" > - <template v-if="viewer === 'mrdiff' && mergeRequestId"> - {{ mergeReviewLine }} - </template> - <template v-else-if="viewer === 'editor'"> - {{ __('Editing') }} - </template> - <template v-else> - {{ __('Reviewing') }} - </template> - <icon - name="angle-down" - :size="12" - css-classes="caret-down" - /> + Edit </button> <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left"> <ul> - <template v-if="mergeRequestId"> - <li> - <a - href="#" - @click.prevent="changeMode('mrdiff')" - :class="{ - 'is-active': viewer === 'mrdiff', - }" - > - <strong class="dropdown-menu-inner-title"> - {{ mergeReviewLine }} - </strong> - <span class="dropdown-menu-inner-content"> - {{ __('Compare changes with the merge request target branch') }} - </span> - </a> - </li> - <li - role="separator" - class="divider" - > - </li> - </template> <li> <a href="#" - @click.prevent="changeMode('editor')" + @click.prevent="changeMode('mrdiff')" :class="{ - 'is-active': viewer === 'editor', + 'is-active': viewer === 'mrdiff', }" > - <strong class="dropdown-menu-inner-title">{{ __('Editing') }}</strong> + <strong class="dropdown-menu-inner-title"> + {{ mergeReviewLine }} + </strong> <span class="dropdown-menu-inner-content"> - {{ __('View and edit lines') }} + {{ __('Compare changes with the merge request target branch') }} </span> </a> </li> diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue index ede1a753f17..230fd094d69 100644 --- a/app/assets/javascripts/ide/components/ide_review.vue +++ b/app/assets/javascripts/ide/components/ide_review.vue @@ -1,26 +1,61 @@ <script> +import { mapGetters, mapState, mapActions } from 'vuex'; import IdeTreeList from './ide_tree_list.vue'; +import EditorModeDropdown from './editor_mode_dropdown.vue'; export default { components: { IdeTreeList, + EditorModeDropdown, + }, + computed: { + ...mapGetters(['currentMergeRequest']), + ...mapState(['viewer']), + }, + mounted() { + this.updateViewer(this.currentMergeRequest ? 'mrdiff' : 'diff'); + }, + methods: { + ...mapActions(['updateViewer']), }, }; </script> <template> <ide-tree-list - viewer-type="diff" + :viewer-type="viewer" header-class="ide-review-header" :disable-action-dropdown="true" > <template slot="header" > - {{ __('Review') }} + <div class="ide-review-button-holder"> + {{ __('Review') }} + <editor-mode-dropdown + v-if="currentMergeRequest" + :viewer="viewer" + :merge-request-id="currentMergeRequest.iid" + @click="updateViewer" + /> + </div> <div class="prepend-top-5 ide-review-sub-header"> - {{ __('Lastest changes') }} + <template v-if="!currentMergeRequest || viewer === 'diff'"> + {{ __('Lastest changes') }} + </template> + <template v-else-if="currentMergeRequest && viewer === 'mrdiff'"> + Merge request + (<a :href="currentMergeRequest.web_url">!{{ currentMergeRequest.iid }}</a>) + </template> </div> </template> </ide-tree-list> </template> + +<style> +.ide-review-button-holder { + display: flex; + width: 100%; + align-items: center; +} +</style> diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js index ee30e5074b3..f68eb8f4ce6 100644 --- a/app/assets/javascripts/ide/ide_router.js +++ b/app/assets/javascripts/ide/ide_router.js @@ -2,6 +2,7 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import flash from '~/flash'; import store from './stores'; +import { activityBarViews } from './constants'; Vue.use(VueRouter); @@ -101,7 +102,7 @@ router.beforeEach((to, from, next) => { throw e; }); } else if (to.params.mrid) { - store.dispatch('updateViewer', 'mrdiff'); + store.dispatch('updateActivityBarView', activityBarViews.review); store .dispatch('getMergeRequestData', { |