debian-mirror-gitlab/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

91 lines
2 KiB
Vue
Raw Normal View History

2018-11-18 11:00:15 +05:30
<script>
2021-02-22 17:27:13 +05:30
import { GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui';
2018-11-18 11:00:15 +05:30
import { __ } from '~/locale';
2019-09-30 21:07:59 +05:30
const MARK_TEXT = __('Mark as done');
2021-03-11 19:13:27 +05:30
const TODO_TEXT = __('Add a to do');
2018-11-18 11:00:15 +05:30
export default {
components: {
2020-11-24 15:15:51 +05:30
GlIcon,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2018-11-18 11:00:15 +05:30
},
2021-02-22 17:27:13 +05:30
directives: {
GlTooltip: GlTooltipDirective,
},
2018-11-18 11:00:15 +05:30
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() {
2018-12-13 13:39:08 +05:30
return this.collapsed
? 'btn-blank btn-todo sidebar-collapsed-icon dont-change-state'
2021-03-11 19:13:27 +05:30
: 'gl-button btn btn-default btn-todo issuable-header-btn float-right';
2018-11-18 11:00:15 +05:30
},
buttonLabel() {
return this.isTodo ? MARK_TEXT : TODO_TEXT;
},
2019-07-07 11:18:12 +05:30
buttonTooltip() {
return !this.collapsed ? undefined : this.buttonLabel;
},
2018-11-18 11:00:15 +05:30
collapsedButtonIconClasses() {
return this.isTodo ? 'todo-undone' : '';
},
collapsedButtonIcon() {
return this.isTodo ? 'todo-done' : 'todo-add';
},
2020-01-01 13:55:28 +05:30
collapsedButtonIconVisible() {
return this.collapsed && !this.isActionActive;
},
2018-11-18 11:00:15 +05:30
},
methods: {
handleButtonClick() {
this.$emit('toggleTodo');
},
},
};
</script>
<template>
<button
2021-02-22 17:27:13 +05:30
v-gl-tooltip.left.viewport
2018-11-18 11:00:15 +05:30
:class="buttonClasses"
2019-07-07 11:18:12 +05:30
:title="buttonTooltip"
2018-11-18 11:00:15 +05:30
:aria-label="buttonLabel"
:data-issuable-id="issuableId"
:data-issuable-type="issuableType"
type="button"
@click="handleButtonClick"
>
2020-11-24 15:15:51 +05:30
<gl-icon
2020-01-01 13:55:28 +05:30
v-show="collapsedButtonIconVisible"
:class="collapsedButtonIconClasses"
:name="collapsedButtonIcon"
/>
<span v-show="!collapsed" class="issuable-todo-inner">{{ buttonLabel }}</span>
2021-09-30 23:02:18 +05:30
<gl-loading-icon v-show="isActionActive" size="sm" :inline="true" />
2018-11-18 11:00:15 +05:30
</button>
</template>