MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-04 22:06:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

add tooltip

Browse Source
This commit is contained in:
pa
2026-02-28 00:29:26 +09:00
committed by Natsumi
parent e438968bc1
commit e0f7b733af
1 changed files with 76 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/GameLog/columns.jsx
+76 -68
View File
@@ -1,11 +1,7 @@
import Location from '../../components/Location.vue'; import Location from '../../components/Location.vue';
import { Badge } from '../../components/ui/badge'; import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button'; import { Button } from '../../components/ui/button';
import { import { TooltipWrapper } from '../../components/ui/tooltip';
Tooltip,
TooltipContent,
TooltipTrigger
} from '../../components/ui/tooltip';
import { ArrowUpDown, FileText, Trash2, X } from 'lucide-vue-next'; import { ArrowUpDown, FileText, Trash2, X } from 'lucide-vue-next';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
@@ -64,14 +60,9 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
const longText = formatDateFilter(createdAt, 'long'); const longText = formatDateFilter(createdAt, 'long');
return ( return (
<Tooltip> <TooltipWrapper content={longText} side="right">
<TooltipTrigger asChild> <span>{shortText}</span>
<span>{shortText}</span> </TooltipWrapper>
</TooltipTrigger>
<TooltipContent side="right">
<span>{longText}</span>
</TooltipContent>
</Tooltip>
); );
} }
}, },
@@ -160,17 +151,24 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
if (original.type === 'Event') { if (original.type === 'Event') {
return ( return (
<span class="block w-full min-w-0 truncate"> <TooltipWrapper content={original.data} side="bottom">
{original.data} <span class="block w-full min-w-0 truncate">
</span> {original.data}
</span>
</TooltipWrapper>
); );
} }
if (original.type === 'External') { if (original.type === 'External') {
return ( return (
<span class="block w-full min-w-0 truncate"> <TooltipWrapper
{original.message} content={original.message}
</span> side="bottom"
>
<span class="block w-full min-w-0 truncate">
{original.message}
</span>
</TooltipWrapper>
); );
} }
@@ -179,24 +177,31 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
original.videoId !== 'LSMedia' && original.videoId !== 'LSMedia' &&
original.videoId !== 'PopcornPalace'; original.videoId !== 'PopcornPalace';
const label = original.videoName || original.videoUrl; const label = original.videoName || original.videoUrl;
const tooltipText = original.videoId
? `${original.videoId}: ${label}`
: label;
return ( return (
<span class="block w-full min-w-0 truncate cursor-pointer"> <TooltipWrapper content={tooltipText} side="bottom">
{original.videoId ? ( <span class="block w-full min-w-0 truncate cursor-pointer">
<span class="mr-1.5">{original.videoId}:</span> {original.videoId ? (
) : null} <span class="mr-1.5">
{showLink ? ( {original.videoId}:
<span </span>
class="cursor-pointer" ) : null}
onClick={() => {showLink ? (
openExternalLink(original.videoUrl) <span
} class="cursor-pointer"
> onClick={() =>
{label} openExternalLink(original.videoUrl)
</span> }
) : ( >
<span>{original.videoName}</span> {label}
)} </span>
</span> ) : (
<span>{original.videoName}</span>
)}
</span>
</TooltipWrapper>
); );
} }
@@ -205,16 +210,21 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
original.type === 'StringLoad' original.type === 'StringLoad'
) { ) {
return ( return (
<span class="block w-full min-w-0 truncate cursor-pointer"> <TooltipWrapper
<span content={original.resourceUrl}
class="cursor-pointer" side="bottom"
onClick={() => >
openExternalLink(original.resourceUrl) <span class="block w-full min-w-0 truncate cursor-pointer">
} <span
> class="cursor-pointer"
{original.resourceUrl} onClick={() =>
openExternalLink(original.resourceUrl)
}
>
{original.resourceUrl}
</span>
</span> </span>
</span> </TooltipWrapper>
); );
} }
@@ -227,9 +237,11 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
} }
return ( return (
<span class="block w-full min-w-0 truncate"> <TooltipWrapper content={original.data} side="bottom">
{original.data} <span class="block w-full min-w-0 truncate">
</span> {original.data}
</span>
</TooltipWrapper>
); );
} }
}, },
@@ -272,26 +284,22 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
</button> </button>
) : null} ) : null}
{canShowPrevious ? ( {canShowPrevious ? (
<Tooltip> <TooltipWrapper
<TooltipTrigger asChild> content={t('dialog.previous_instances.info')}
<button side="top"
type="button" >
class="inline-flex h-6 items-center justify-center text-muted-foreground hover:text-foreground" <button
onClick={() => type="button"
showPreviousInstancesInfoDialog( class="inline-flex h-6 items-center justify-center text-muted-foreground hover:text-foreground"
original.location onClick={() =>
) showPreviousInstancesInfoDialog(
} original.location
> )
<FileText class="h-4 w-4" /> }
</button> >
</TooltipTrigger> <FileText class="h-4 w-4" />
<TooltipContent side="top"> </button>
<span> </TooltipWrapper>
{t('dialog.previous_instances.info')}
</span>
</TooltipContent>
</Tooltip>
) : null} ) : null}
</div> </div>
); );