Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 4x 4x | <!-- eslint-disable vue/multi-word-component-names -->
<script>
import { GlButton, GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
const MARK_TEXT = __('Mark as done');
const TODO_TEXT = __('Add a to do');
export default {
components: {
GlButton,
GlIcon,
GlLoadingIcon,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
issuableId: {
type: Number,
required: true,
},
issuableType: {
type: String,
required: true,
},
isTodo: {
type: Boolean,
required: false,
default: true,
},
isActionActive: {
type: Boolean,
required: false,
default: false,
},
collapsed: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
buttonClasses() {
return this.collapsed
? 'sidebar-collapsed-icon js-dont-change-state'
: 'issuable-header-btn gl-float-right';
},
buttonVariant() {
return this.collapsed ? 'link' : 'default';
},
buttonLabel() {
return this.isTodo ? MARK_TEXT : TODO_TEXT;
},
buttonTooltip() {
return !this.collapsed ? undefined : this.buttonLabel;
},
collapsedButtonIconClasses() {
return this.isTodo ? 'todo-undone' : '';
},
collapsedButtonIcon() {
return this.isTodo ? 'todo-done' : 'todo-add';
},
collapsedButtonIconVisible() {
return this.collapsed && !this.isActionActive;
},
},
methods: {
handleButtonClick() {
this.$emit('toggleTodo');
},
},
};
</script>
<template>
<gl-button
v-gl-tooltip.left.viewport
:class="buttonClasses"
:variant="buttonVariant"
:title="buttonTooltip"
:aria-label="buttonLabel"
:data-issuable-id="issuableId"
:data-issuable-type="issuableType"
size="small"
type="button"
@click="handleButtonClick"
>
<gl-icon
v-show="collapsedButtonIconVisible"
:class="collapsedButtonIconClasses"
:name="collapsedButtonIcon"
/>
<span v-if="!collapsed" class="issuable-todo-inner">{{ buttonLabel }}</span>
<gl-loading-icon v-if="isActionActive" size="sm" inline />
</gl-button>
</template>
|