diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-11 15:08:52 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-11 15:08:52 +0300 |
commit | 05b5c609cb8c260b10c2eb1b92b711dc82d32c3f (patch) | |
tree | 05253c66806b17c5b1f9f13addab59524d536fc4 /app/assets/javascripts/blob | |
parent | 1078b7bf25c2cb6e03c57da9ae25b0512858556f (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/blob')
4 files changed, 107 insertions, 12 deletions
diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue new file mode 100644 index 00000000000..61a66513838 --- /dev/null +++ b/app/assets/javascripts/blob/components/blob_header.vue @@ -0,0 +1,76 @@ +<script> +import ViewerSwitcher from './blob_header_viewer_switcher.vue'; +import DefaultActions from './blob_header_default_actions.vue'; +import BlobFilepath from './blob_header_filepath.vue'; +import eventHub from '../event_hub'; +import { RICH_BLOB_VIEWER, SIMPLE_BLOB_VIEWER } from './constants'; + +export default { + components: { + ViewerSwitcher, + DefaultActions, + BlobFilepath, + }, + props: { + blob: { + type: Object, + required: true, + }, + hideDefaultActions: { + type: Boolean, + required: false, + default: false, + }, + hideViewerSwitcher: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + activeViewer: this.blob.richViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, + }; + }, + computed: { + showViewerSwitcher() { + return !this.hideViewerSwitcher && Boolean(this.blob.simpleViewer && this.blob.richViewer); + }, + showDefaultActions() { + return !this.hideDefaultActions; + }, + }, + created() { + if (this.showViewerSwitcher) { + eventHub.$on('switch-viewer', this.setActiveViewer); + } + }, + beforeDestroy() { + if (this.showViewerSwitcher) { + eventHub.$off('switch-viewer', this.setActiveViewer); + } + }, + methods: { + setActiveViewer(viewer) { + this.activeViewer = viewer; + }, + }, +}; +</script> +<template> + <div class="js-file-title file-title-flex-parent"> + <blob-filepath :blob="blob"> + <template #filepathPrepend> + <slot name="prepend"></slot> + </template> + </blob-filepath> + + <div class="file-actions d-none d-sm-block"> + <viewer-switcher v-if="showViewerSwitcher" :blob="blob" :active-viewer="activeViewer" /> + + <slot name="actions"></slot> + + <default-actions v-if="showDefaultActions" :blob="blob" :active-viewer="activeViewer" /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/blob/components/blob_header_default_actions.vue b/app/assets/javascripts/blob/components/blob_header_default_actions.vue index b0522c08a65..e526fae0dba 100644 --- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue +++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue @@ -1,6 +1,13 @@ <script> import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui'; -import { BTN_COPY_CONTENTS_TITLE, BTN_DOWNLOAD_TITLE, BTN_RAW_TITLE } from './constants'; +import { + BTN_COPY_CONTENTS_TITLE, + BTN_DOWNLOAD_TITLE, + BTN_RAW_TITLE, + RICH_BLOB_VIEWER, + SIMPLE_BLOB_VIEWER, +} from './constants'; +import eventHub from '../event_hub'; export default { components: { @@ -16,6 +23,11 @@ export default { type: Object, required: true, }, + activeViewer: { + type: String, + default: SIMPLE_BLOB_VIEWER, + required: false, + }, }, computed: { rawUrl() { @@ -24,10 +36,13 @@ export default { downloadUrl() { return `${this.blob.rawPath}?inline=false`; }, + copyDisabled() { + return this.activeViewer === RICH_BLOB_VIEWER; + }, }, methods: { requestCopyContents() { - this.$emit('copy'); + eventHub.$emit('copy'); }, }, BTN_COPY_CONTENTS_TITLE, @@ -41,6 +56,7 @@ export default { v-gl-tooltip.hover :aria-label="$options.BTN_COPY_CONTENTS_TITLE" :title="$options.BTN_COPY_CONTENTS_TITLE" + :disabled="copyDisabled" @click="requestCopyContents" > <gl-icon name="copy-to-clipboard" :size="14" /> diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue index 7acdd574359..13ea87c99b1 100644 --- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue +++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue @@ -6,6 +6,7 @@ import { SIMPLE_BLOB_VIEWER, SIMPLE_BLOB_VIEWER_TITLE, } from './constants'; +import eventHub from '../event_hub'; export default { components: { @@ -21,25 +22,24 @@ export default { type: Object, required: true, }, - }, - data() { - return { - viewer: this.blob.richViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, - }; + activeViewer: { + type: String, + default: SIMPLE_BLOB_VIEWER, + required: false, + }, }, computed: { isSimpleViewer() { - return this.viewer === SIMPLE_BLOB_VIEWER; + return this.activeViewer === SIMPLE_BLOB_VIEWER; }, isRichViewer() { - return this.viewer === RICH_BLOB_VIEWER; + return this.activeViewer === RICH_BLOB_VIEWER; }, }, methods: { switchToViewer(viewer) { - if (viewer !== this.viewer) { - this.viewer = viewer; - this.$emit('switch-viewer', viewer); + if (viewer !== this.activeViewer) { + eventHub.$emit('switch-viewer', viewer); } }, }, diff --git a/app/assets/javascripts/blob/event_hub.js b/app/assets/javascripts/blob/event_hub.js new file mode 100644 index 00000000000..0948c2e5352 --- /dev/null +++ b/app/assets/javascripts/blob/event_hub.js @@ -0,0 +1,3 @@ +import Vue from 'vue'; + +export default new Vue(); |