aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 21:19:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: display view count in UI

Browse Source
This commit is contained in:
Steven 2023-06-24 16:14:17 +08:00
parent 19cdea6bca
commit 5fb9b67a53
2 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
web/src/components/ShortcutListView.tsx
View File

@ -44,15 +44,53 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
<div className="w-full flex flex-col justify-start items-start"> <div className="w-full flex flex-col justify-start items-start">
{shortcutList.map((shortcut) => { {shortcutList.map((shortcut) => {
return ( return (
<div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-4 py-3 mb-2 rounded-lg"> <div key={shortcut.id} className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg">
<div className="flex flex-col justify-start items-start mr-4"> <div className="w-full flex flex-row justify-between items-center">
<p> <p className="text-lg mr-1 shrink-0">
<span className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}> <span className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
<span className="text-gray-400">o/</span> <span className="text-gray-400">o/</span>
{shortcut.name} {shortcut.name}
</span> </span>
</p> </p>
{shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>} <div className="flex flex-row justify-end items-center space-x-2">
<Tooltip title="Copy link" variant="solid" placement="top">
<button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
<Icon.Copy className="w-5 h-auto text-gray-600" />
</button>
</Tooltip>
<Tooltip title="Go to link" variant="solid" placement="top">
<a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
<Icon.ExternalLink className="w-5 h-auto text-gray-600" />
</a>
</Tooltip>
<Dropdown
actionsClassName="!w-24"
actions={
<>
<button
disabled={!havePermission(shortcut)}
className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => setEditingShortcutId(shortcut.id)}
>
Edit
</button>
<button
disabled={!havePermission(shortcut)}
className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => {
handleDeleteShortcutButtonClick(shortcut);
}}
>
Delete
</button>
</>
}
></Dropdown>
</div>
</div>
{shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
{/* TODO(steven): display shortcut's tags later */}
{shortcut.tags.length > 0 && false && (
<div className="mt-2 flex flex-row justify-start items-start gap-2"> <div className="mt-2 flex flex-row justify-start items-start gap-2">
<Icon.Tag className="text-gray-400 w-4 h-auto" /> <Icon.Tag className="text-gray-400 w-4 h-auto" />
{shortcut.tags.map((tag) => { {shortcut.tags.map((tag) => {
@ -63,41 +101,14 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
); );
})} })}
</div> </div>
</div> )}
<div className="flex flex-row justify-end items-center space-x-2"> <div className="w-full flex mt-2">
<Tooltip title="Copy link" variant="solid" placement="top"> <Tooltip title="View count" variant="solid" placement="top">
<button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}> <div className="w-auto px-2 pr-3 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 font-mono text-sm">
<Icon.Copy className="w-5 h-auto text-gray-600" /> <Icon.Eye className="w-4 h-auto mr-1" />
</button> {shortcut.view}
</div>
</Tooltip> </Tooltip>
<Tooltip title="Go to link" variant="solid" placement="top">
<a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
<Icon.ExternalLink className="w-5 h-auto text-gray-600" />
</a>
</Tooltip>
<Dropdown
actionsClassName="!w-24"
actions={
<>
<button
disabled={!havePermission(shortcut)}
className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => setEditingShortcutId(shortcut.id)}
>
Edit
</button>
<button
disabled={!havePermission(shortcut)}
className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => {
handleDeleteShortcutButtonClick(shortcut);
}}
>
Delete
</button>
</>
}
></Dropdown>
</div> </div>
</div> </div>
); );

1
web/src/types/modules/shortcut.d.ts vendored
View File

@ -16,6 +16,7 @@ interface Shortcut {
description: string; description: string;
visibility: Visibility; visibility: Visibility;
tags: string[]; tags: string[];
view: number;
} }
interface ShortcutCreate { interface ShortcutCreate {