diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-10 09:08:56 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-10 09:08:56 +0000 |
commit | b4ded0ba7b4d2cdbed5b1f331cf2083a25ee4d7c (patch) | |
tree | 6694fa9d8f3e226597cc01dfb8e3e07b50ae85b6 /app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue | |
parent | 2aaef94c80937d9d188f7b9cbbad2dcd1508c3c1 (diff) | |
download | gitlab-ce-b4ded0ba7b4d2cdbed5b1f331cf2083a25ee4d7c.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue')
-rw-r--r-- | app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue new file mode 100644 index 00000000000..7acdd574359 --- /dev/null +++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue @@ -0,0 +1,75 @@ +<script> +import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { + RICH_BLOB_VIEWER, + RICH_BLOB_VIEWER_TITLE, + SIMPLE_BLOB_VIEWER, + SIMPLE_BLOB_VIEWER_TITLE, +} from './constants'; + +export default { + components: { + GlIcon, + GlButtonGroup, + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + blob: { + type: Object, + required: true, + }, + }, + data() { + return { + viewer: this.blob.richViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, + }; + }, + computed: { + isSimpleViewer() { + return this.viewer === SIMPLE_BLOB_VIEWER; + }, + isRichViewer() { + return this.viewer === RICH_BLOB_VIEWER; + }, + }, + methods: { + switchToViewer(viewer) { + if (viewer !== this.viewer) { + this.viewer = viewer; + this.$emit('switch-viewer', viewer); + } + }, + }, + SIMPLE_BLOB_VIEWER, + RICH_BLOB_VIEWER, + SIMPLE_BLOB_VIEWER_TITLE, + RICH_BLOB_VIEWER_TITLE, +}; +</script> +<template> + <gl-button-group class="js-blob-viewer-switcher ml-2"> + <gl-button + v-gl-tooltip.hover + :aria-label="$options.SIMPLE_BLOB_VIEWER_TITLE" + :title="$options.SIMPLE_BLOB_VIEWER_TITLE" + :selected="isSimpleViewer" + :class="{ active: isSimpleViewer }" + @click="switchToViewer($options.SIMPLE_BLOB_VIEWER)" + > + <gl-icon name="code" :size="14" /> + </gl-button> + <gl-button + v-gl-tooltip.hover + :aria-label="$options.RICH_BLOB_VIEWER_TITLE" + :title="$options.RICH_BLOB_VIEWER_TITLE" + :selected="isRichViewer" + :class="{ active: isRichViewer }" + @click="switchToViewer($options.RICH_BLOB_VIEWER)" + > + <gl-icon name="document" :size="14" /> + </gl-button> + </gl-button-group> +</template> |