akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Update articles page UI (#13049)

Browse Source
This commit is contained in:
Sivin Varghese
2026-01-07 10:54:24 +05:30
committed by GitHub
parent d6d7aba465
commit b7be546934
11 changed files with 118 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+31 -18
View File
@@ -93,13 +93,15 @@ const statusText = computed(() => {
const categoryName = computed(() => {
if (props.category?.slug) {
return `${props.category.icon} ${props.category.name}`;
return props.category.name;
}
return t(
'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
);
});
const categoryIcon = computed(() => props.category?.icon || '');
const authorName = computed(() => {
return props.author?.name || props.author?.availableName || '';
});
@@ -123,17 +125,17 @@ const handleClick = id => {
</script>
<template>
<CardLayout>
<CardLayout class="[&>div]:!pt-3 group/articleCard hover:bg-n-alpha-1">
<div class="flex justify-between w-full gap-1">
<span
class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
class="text-sm cursor-pointer py-1.5 font-medium underline-offset-2 group-hover/articleCard:text-n-blue-11 text-n-slate-12 line-clamp-1"
@click="handleClick(id)"
>
{{ title }}
</span>
<div class="flex items-center gap-2">
<span
class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
class="text-xs font-440 outline outline-1 outline-n-container inline-flex items-center px-2 h-6 rounded-md bg-n-button-color"
:class="statusTextColor"
>
{{ statusText }}
@@ -144,41 +146,52 @@ const handleClick = id => {
>
<Button
icon="i-lucide-ellipsis-vertical"
color="slate"
slate
:variant="!showActionsDropdown ? 'ghost' : 'faded'"
size="xs"
class="rounded-md group-hover:bg-n-alpha-2"
class="rounded-md group-hover:bg-n-alpha-2 [&>span]:size-3.5"
@click="toggleDropdown()"
/>
<DropdownMenu
v-if="showActionsDropdown"
:menu-items="articleMenuItems"
class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
class="mt-1 ltr:right-0 rtl:left-0 top-full"
@action="handleArticleAction($event)"
/>
</div>
</div>
</div>
<div class="flex items-center justify-between w-full gap-4">
<div class="flex items-center gap-4">
<div class="flex items-center gap-1">
<div class="flex items-center justify-between w-full gap-4 min-w-0">
<div class="flex items-center gap-3 min-w-0 overflow-hidden">
<div class="flex items-center gap-1.5 min-w-0 shrink">
<Avatar
:name="authorName"
:src="authorThumbnailSrc"
:size="16"
rounded-full
class="shrink-0"
/>
<span class="text-sm truncate text-n-slate-11">
<span class="text-sm font-420 truncate text-n-slate-11">
{{ authorName || '-' }}
</span>
</div>
<span class="block text-sm whitespace-nowrap text-n-slate-11">
{{ categoryName }}
</span>
<div class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
<div
class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
v-if="category"
class="flex items-center gap-1.5 text-n-slate-11 min-w-0 shrink"
>
<Icon icon="i-lucide-eye" class="size-4" />
<span class="text-sm">
<span v-if="categoryIcon" class="text-sm shrink-0">
{{ categoryIcon }}
</span>
<Icon v-else icon="i-lucide-shapes" class="size-4 shrink-0" />
<span class="text-sm font-420 truncate">
{{ categoryName }}
</span>
</div>
<div v-if="category" class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
<div class="flex items-center gap-1.5 text-n-slate-11 shrink-0">
<Icon icon="i-lucide-trending-up" class="size-4" />
<span class="text-sm font-420 whitespace-nowrap">
{{
t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
count: views,
@@ -187,7 +200,7 @@ const handleClick = id => {
</span>
</div>
</div>
<span class="text-sm text-n-slate-11 line-clamp-1">
<span class="text-sm text-n-slate-11 truncate">
{{ lastUpdatedAt }}
</span>
</div>