-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
generic tag and block status tag (#197)
* generic tag and block status tag
- Loading branch information
1 parent
28fc22a
commit 8061afd
Showing
10 changed files
with
256 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <script setup lang="ts"> | ||
| import type { IconDefinition } from '@fortawesome/fontawesome-svg-core' | ||
| import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' | ||
| import type { TagColor, TagSize } from '~/types/tag' | ||
| interface Props { | ||
| color?: TagColor | ||
| size?: TagSize | ||
| label?: string, | ||
| tooltip?: string | ||
| icon?: IconDefinition, | ||
| } | ||
| defineProps<Props>() | ||
| </script> | ||
| <template> | ||
| <BcTooltip v-if="label || icon" class="tag" :class="[color, size]" :text="tooltip"> | ||
| {{ label }} | ||
| <FontAwesomeIcon v-if="icon" :icon="icon" /> | ||
| </BcTooltip> | ||
| </template> | ||
| <style lang="scss" scoped> | ||
| @use "~/assets/css/utils.scss"; | ||
| .tag { | ||
| min-width: 80px; | ||
| height: 20px; | ||
| padding: 0 14px; | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 10px; | ||
| font-size: var(--small_text_font_weight); | ||
| font-weight: var(--small_text_bold_font_weight); | ||
| cursor: default; | ||
| svg { | ||
| margin-left: var(--padding-small); | ||
| width: 12px; | ||
| height: 12px; | ||
| } | ||
| &.compact { | ||
| min-width: unset; | ||
| } | ||
| &.circle { | ||
| min-width: unset; | ||
| width: 14px; | ||
| height: 14px; | ||
| padding: 0; | ||
| border-radius: 50%; | ||
| font-size: var(--tooltip_text_font_size); | ||
| svg { | ||
| margin-left: unset; | ||
| width: 10px; | ||
| height: 10px; | ||
| } | ||
| } | ||
| &.success { | ||
| @include utils.positive-background; | ||
| } | ||
| &.failed { | ||
| @include utils.negative-background; | ||
| } | ||
| &.orphaned { | ||
| @include utils.orphaned-background; | ||
| } | ||
| &.partial { | ||
| @include utils.partial-background; | ||
| } | ||
| &.light { | ||
| @include utils.light-tag-background; | ||
| } | ||
| &.dark { | ||
| @include utils.dark-tag-background; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <script setup lang="ts"> | ||
| import { type BlockStatus } from '~/types/block' | ||
| import type { TagSize, TagColor } from '~/types/tag' | ||
| interface Props { | ||
| status?: BlockStatus, | ||
| mobile?: boolean | ||
| } | ||
| const props = defineProps<Props>() | ||
| const { t: $t } = useI18n() | ||
| const mapped = computed(() => { | ||
| if (!props.status) { | ||
| return | ||
| } | ||
| const size: TagSize = props.mobile ? 'circle' : 'default' | ||
| let color: TagColor | ||
| const tStatus = $t(`block.status.${props.status}`) | ||
| const label = props.mobile ? tStatus.substring(0, 1) : tStatus | ||
| const tooltip = props.mobile ? tStatus : undefined | ||
| switch (props.status) { | ||
| case 'missed': | ||
| color = 'failed' | ||
| break | ||
| case 'success': | ||
| color = 'success' | ||
| break | ||
| case 'orphaned': | ||
| color = 'orphaned' | ||
| break | ||
| case 'scheduled': | ||
| color = 'dark' | ||
| break | ||
| } | ||
| return { | ||
| size, | ||
| color, | ||
| label, | ||
| tooltip | ||
| } | ||
| }) | ||
| </script> | ||
| <template> | ||
| <BcTableTag v-if="mapped" v-bind="mapped" /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <script setup lang="ts"> | ||
| import { | ||
| faAnchor, | ||
| faTrophy | ||
| } from '@fortawesome/pro-solid-svg-icons' | ||
| import type { BlockStatus } from '~/types/block' | ||
| import { TagColors } from '~/types/tag' | ||
| const blockStati: BlockStatus[] = ['missed', 'orphaned', 'scheduled', 'success'] | ||
| </script> | ||
|
|
||
| <template> | ||
| <h1>Block table status tags</h1> | ||
| <div class="container"> | ||
| <div v-for="status in blockStati" :key="status" class="item"> | ||
| <BlockTableStatus :status="status" /> | ||
| <BlockTableStatus :status="status" :mobile="true" /> | ||
| </div> | ||
| </div> | ||
| <h1>Generic tags</h1> | ||
| <div class="container"> | ||
| <div v-for="color in TagColors" :key="color" class="item"> | ||
| <BcTableTag :color="color" :label="color" /> | ||
| <BcTableTag :color="color" :label="color" :icon="faAnchor" /> | ||
| <BcTableTag :color="color" :label="color" size="compact" /> | ||
| <BcTableTag :color="color" :label="color" size="compact" /> | ||
| <BcTableTag :color="color" :label="color" :icon="faAnchor" size="compact" /> | ||
| <BcTableTag :color="color" :label="color.substring(0,2)" size="circle" :tooltip="color" /> | ||
| <BcTableTag :color="color" :icon="faAnchor" size="circle" :tooltip="color" /> | ||
| </div> | ||
| </div> | ||
| <h1>Custom colors</h1> | ||
| <div class="container"> | ||
| <div class="item"> | ||
| <BcTableTag label="this is gold" :icon="faTrophy" :style="{'background-color': 'gold', 'color': 'silver'}" tooltip="we can also set custom colors on our tags!" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <style lang="scss" scoped> | ||
| .container{ | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| .item{ | ||
| flex-grow: 0; | ||
| margin: 10px; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 5px; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import type { VDBBlocksTableRow } from '../api/validator_dashboard' | ||
|
|
||
| export type BlockStatus = VDBBlocksTableRow['status'] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export const TagColors = ['success', 'failed', 'orphaned', 'partial', 'light', 'dark'] as const | ||
| export type TagColor = typeof TagColors[number] | ||
|
|
||
| export type TagSize = 'default' | 'compact' | 'circle' |