fix: show hearticon instead of Like By & row item value
This commit is contained in:
parent
748beedcea
commit
2c2a49acd7
18
frontend/src/components/Icons/HeartIcon.vue
Normal file
18
frontend/src/components/Icons/HeartIcon.vue
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="fillCurrent"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-heart"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
@ -11,7 +11,22 @@
|
|||||||
}"
|
}"
|
||||||
row-key="name"
|
row-key="name"
|
||||||
>
|
>
|
||||||
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')" />
|
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
|
||||||
|
<ListHeaderItem
|
||||||
|
v-for="column in columns"
|
||||||
|
:key="column.key"
|
||||||
|
:item="column"
|
||||||
|
@columnWidthUpdated="emit('columnWidthUpdated', column)"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
v-if="column.key == '_liked_by'"
|
||||||
|
variant="ghosted"
|
||||||
|
class="!h-4 fill-white"
|
||||||
|
>
|
||||||
|
<HeartIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</ListHeaderItem>
|
||||||
|
</ListHeader>
|
||||||
<ListRows id="list-rows">
|
<ListRows id="list-rows">
|
||||||
<ListRow
|
<ListRow
|
||||||
class="mx-5"
|
class="mx-5"
|
||||||
@ -85,6 +100,15 @@
|
|||||||
<div>{{ item.timeAgo }}</div>
|
<div>{{ item.timeAgo }}</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else-if="column.key === '_liked_by'">
|
||||||
|
<Button
|
||||||
|
v-if="column.key == '_liked_by'"
|
||||||
|
variant="ghosted"
|
||||||
|
class="fill-white"
|
||||||
|
>
|
||||||
|
<HeartIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else-if="column.key === 'sla_status'"
|
v-else-if="column.key === 'sla_status'"
|
||||||
class="truncate text-base"
|
class="truncate text-base"
|
||||||
@ -123,7 +147,9 @@
|
|||||||
</ListRows>
|
</ListRows>
|
||||||
<ListSelectBanner>
|
<ListSelectBanner>
|
||||||
<template #actions="{ selections, unselectAll }">
|
<template #actions="{ selections, unselectAll }">
|
||||||
<Dropdown :options="listBulkActionsRef.bulkActions(selections, unselectAll)">
|
<Dropdown
|
||||||
|
:options="listBulkActionsRef.bulkActions(selections, unselectAll)"
|
||||||
|
>
|
||||||
<Button icon="more-horizontal" variant="ghost" />
|
<Button icon="more-horizontal" variant="ghost" />
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</template>
|
</template>
|
||||||
@ -143,6 +169,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import HeartIcon from '@/components/Icons/HeartIcon.vue'
|
||||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||||
import MultipleAvatar from '@/components/MultipleAvatar.vue'
|
import MultipleAvatar from '@/components/MultipleAvatar.vue'
|
||||||
@ -151,6 +178,7 @@ import {
|
|||||||
Avatar,
|
Avatar,
|
||||||
ListView,
|
ListView,
|
||||||
ListHeader,
|
ListHeader,
|
||||||
|
ListHeaderItem,
|
||||||
ListRows,
|
ListRows,
|
||||||
ListRow,
|
ListRow,
|
||||||
ListSelectBanner,
|
ListSelectBanner,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user