diff options
Diffstat (limited to 'app/assets/javascripts/boards/components')
3 files changed, 84 insertions, 13 deletions
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js index 3c683e88cf3..915d1676e62 100644 --- a/app/assets/javascripts/boards/components/board_sidebar.js +++ b/app/assets/javascripts/boards/components/board_sidebar.js @@ -16,6 +16,7 @@ import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue'; import MilestoneSelect from '~/milestone_select'; import RemoveBtn from './sidebar/remove_issue.vue'; import boardsStore from '../stores/boards_store'; +import { isScopedLabel } from '~/lib/utils/common_utils'; export default Vue.extend({ components: { @@ -140,5 +141,11 @@ export default Vue.extend({ Flash(__('An error occurred while saving assignees')); }); }, + showScopedLabels(label) { + return boardsStore.scopedLabels.enabled && isScopedLabel(label); + }, + helpLink() { + return boardsStore.scopedLabels.helpLink; + }, }, }); diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index 206573dd444..be0de63e772 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -9,6 +9,8 @@ import eventHub from '../eventhub'; import IssueDueDate from './issue_due_date.vue'; import IssueTimeEstimate from './issue_time_estimate.vue'; import boardsStore from '../stores/boards_store'; +import IssueCardInnerScopedLabel from './issue_card_inner_scoped_label.vue'; +import { isScopedLabel } from '~/lib/utils/common_utils'; export default { components: { @@ -17,6 +19,7 @@ export default { TooltipOnTruncate, IssueDueDate, IssueTimeEstimate, + IssueCardInnerScopedLabel, }, directives: { GlTooltip: GlTooltipDirective, @@ -96,6 +99,9 @@ export default { orderedLabels() { return _.sortBy(this.issue.labels, 'title'); }, + helpLink() { + return boardsStore.scopedLabels.helpLink; + }, }, methods: { isIndexLessThanlimit(index) { @@ -159,6 +165,9 @@ export default { color: label.textColor, }; }, + showScopedLabel(label) { + return boardsStore.scopedLabels.enabled && isScopedLabel(label); + }, }, }; </script> @@ -179,19 +188,29 @@ export default { </h4> </div> <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap"> - <button - v-for="label in orderedLabels" - v-if="showLabel(label)" - :key="label.id" - v-gl-tooltip - :style="labelStyle(label)" - :title="label.description" - class="badge color-label append-right-4 prepend-top-4" - type="button" - @click="filterByLabel(label)" - > - {{ label.title }} - </button> + <template v-for="label in orderedLabels" v-if="showLabel(label)"> + <issue-card-inner-scoped-label + v-if="showScopedLabel(label)" + :key="label.id" + :label="label" + :label-style="labelStyle(label)" + :scoped-labels-documentation-link="helpLink" + @scoped-label-click="filterByLabel($event)" + /> + + <button + v-else + :key="label.id" + v-gl-tooltip + :style="labelStyle(label)" + :title="label.description" + class="badge color-label append-right-4 prepend-top-4" + type="button" + @click="filterByLabel(label)" + > + {{ label.title }} + </button> + </template> </div> <div class="board-card-footer d-flex justify-content-between align-items-end"> <div diff --git a/app/assets/javascripts/boards/components/issue_card_inner_scoped_label.vue b/app/assets/javascripts/boards/components/issue_card_inner_scoped_label.vue new file mode 100644 index 00000000000..fa4c68964cb --- /dev/null +++ b/app/assets/javascripts/boards/components/issue_card_inner_scoped_label.vue @@ -0,0 +1,45 @@ +<script> +import { GlLink, GlTooltip } from '@gitlab/ui'; + +export default { + components: { + GlTooltip, + GlLink, + }, + props: { + label: { + type: Object, + required: true, + }, + labelStyle: { + type: Object, + required: true, + }, + scopedLabelsDocumentationLink: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <span + class="d-inline-block position-relative scoped-label-wrapper append-right-4 prepend-top-4 board-label" + > + <a @click="$emit('scoped-label-click', label)"> + <span :ref="'labelTitleRef'" :style="labelStyle" class="badge label color-label"> + {{ label.title }} + </span> + <gl-tooltip :target="() => $refs.labelTitleRef" placement="top" boundary="viewport"> + <span class="font-weight-bold scoped-label-tooltip-title">{{ __('Scoped label') }}</span + ><br /> + {{ label.description }} + </gl-tooltip> + </a> + + <gl-link :href="scopedLabelsDocumentationLink" target="_blank" class="label scoped-label" + ><i class="fa fa-question-circle" :style="labelStyle"></i + ></gl-link> + </span> +</template> |