diff options
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> |