diff options
Diffstat (limited to 'app/assets/javascripts/boards/components')
3 files changed, 23 insertions, 9 deletions
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index dc821cb9f58..3638fdd2ca5 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/app/assets/javascripts/boards/components/board_card.vue @@ -48,6 +48,15 @@ export default { isDraggable() { return !this.disabled && this.item.id && !this.item.isLoading; }, + cardStyle() { + return this.isColorful && this.item.color ? { borderColor: this.item.color } : ''; + }, + isColorful() { + return gon?.features?.epicColorHighlight; + }, + colorClass() { + return this.isColorful ? 'gl-pl-4 gl-border-l-solid gl-border-4' : ''; + }, }, methods: { ...mapActions(['toggleBoardItemMultiSelection', 'toggleBoardItem']), @@ -70,17 +79,21 @@ export default { <template> <li data-qa-selector="board_card" - :class="{ - 'multi-select': multiSelectVisible, - 'gl-cursor-grab': isDraggable, - 'is-disabled': isDisabled, - 'is-active': isActive, - 'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading, - }" + :class="[ + { + 'multi-select': multiSelectVisible, + 'gl-cursor-grab': isDraggable, + 'is-disabled': isDisabled, + 'is-active': isActive, + 'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading, + }, + colorClass, + ]" :index="index" :data-item-id="item.id" :data-item-iid="item.iid" :data-item-path="item.referencePath" + :style="cardStyle" data-testid="board_card" class="board-card gl-p-5 gl-rounded-base" @click="toggleIssue($event)" diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue index 98ce1ac7f97..a632f5ae0ed 100644 --- a/app/assets/javascripts/boards/components/board_card_inner.vue +++ b/app/assets/javascripts/boards/components/board_card_inner.vue @@ -243,6 +243,7 @@ export default { :description="label.description" size="sm" :scoped="showScopedLabel(label)" + target="#" @click="filterByLabel(label)" /> </template> @@ -253,7 +254,7 @@ export default { <div class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden" > - <gl-loading-icon v-if="item.isLoading" size="lg" class="mt-3" /> + <gl-loading-icon v-if="item.isLoading" size="lg" class="gl-mt-5" /> <span v-if="item.referencePath" class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3" diff --git a/app/assets/javascripts/boards/components/toggle_focus.vue b/app/assets/javascripts/boards/components/toggle_focus.vue index 71612e0742f..990a6fa63d4 100644 --- a/app/assets/javascripts/boards/components/toggle_focus.vue +++ b/app/assets/javascripts/boards/components/toggle_focus.vue @@ -20,7 +20,7 @@ export default { hide(this.$refs.toggleFocusModeButton); const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board'); - issueBoardsContent.classList.toggle('is-focused'); + issueBoardsContent?.classList.toggle('is-focused'); this.isFullscreen = !this.isFullscreen; }, |