scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 20:18:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Update button component (#10362)

Browse Source
This commit is contained in:
Sivin Varghese
2024-10-29 14:00:24 +05:30
committed by GitHub
parent f73798a1aa
commit 0689f59a05
34 changed files with 477 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
View File

@@ -1,6 +1,5 @@
<script setup>
import { computed, ref } from 'vue';
import { OnClickOutside } from '@vueuse/components';
import { useI18n } from 'vue-i18n';
import { dynamicTime } from 'shared/helpers/timeHelper';
import {
@@ -9,11 +8,11 @@ import {
ARTICLE_STATUSES,
} from 'dashboard/helper/portalHelper';
import Icon from 'dashboard/components-next/icon/Icon.vue';
import CardLayout from 'dashboard/components-next/CardLayout.vue';
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
const props = defineProps({
id: {
@@ -72,11 +71,11 @@ const articleMenuItems = computed(() => {
const statusTextColor = computed(() => {
switch (props.status) {
case 'archived':
return '!text-n-slate-12';
return 'text-n-slate-12';
case 'draft':
return '!text-n-amber-11';
return 'text-n-amber-11';
default:
return '!text-n-teal-11';
return 'text-n-teal-11';
}
});
@@ -127,19 +126,28 @@ const handleClick = id => {
<template #header>
<div class="flex justify-between gap-1">
<span
class="text-base cursor-pointer hover:underline text-n-slate-12 line-clamp-1"
class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
@click="handleClick(id)"
>
{{ title }}
</span>
<div class="relative group" @click.stop>
<OnClickOutside @trigger="isOpen = false">
<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="statusTextColor"
>
{{ statusText }}
</span>
<div
v-on-clickaway="() => (isOpen = false)"
class="relative flex items-center group"
@click.stop
>
<Button
variant="ghost"
size="sm"
class="text-xs font-medium bg-n-alpha-2 hover:bg-n-alpha-1 !h-6 rounded-md border-0 !px-2 !py-0.5"
:label="statusText"
:class="statusTextColor"
icon="i-lucide-ellipsis-vertical"
color="slate"
size="xs"
class="group-hover:bg-n-solid-2 !p-0.5 rounded-md"
@click="isOpen = !isOpen"
/>
<DropdownMenu
@@ -148,7 +156,7 @@ const handleClick = id => {
class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
@action="handleArticleAction($event)"
/>
</OnClickOutside>
</div>
</div>
</div>
</template>
@@ -171,7 +179,7 @@ const handleClick = id => {
<div
class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
>
<FluentIcon icon="eye-show" size="18" />
<Icon icon="i-lucide-eye" class="size-4" />
<span class="text-sm">
{{
t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {