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

chore: add icons

Browse Source
This commit is contained in:
Steven 2023-06-23 21:16:15 +08:00
parent 9b303da4eb
commit c2c9b46705
6 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/package.json
View File

@ -15,7 +15,7 @@
"copy-to-clipboard": "^3.3.2", "copy-to-clipboard": "^3.3.2",
"dayjs": "^1.11.3", "dayjs": "^1.11.3",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"lucide-react": "^0.115.0", "lucide-react": "^0.252.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0", "react-hot-toast": "^2.4.0",

8
web/pnpm-lock.yaml generated
View File

@ -30,8 +30,8 @@ dependencies:
specifier: ^4.17.21 specifier: ^4.17.21
version: 4.17.21 version: 4.17.21
lucide-react: lucide-react:
specifier: ^0.115.0 specifier: ^0.252.0
version: 0.115.0(react@18.2.0) version: 0.252.0(react@18.2.0)
react: react:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0 version: 18.2.0
@ -2190,8 +2190,8 @@ packages:
yallist: 4.0.0 yallist: 4.0.0
dev: true dev: true
/lucide-react@0.115.0(react@18.2.0): /lucide-react@0.252.0(react@18.2.0):
resolution: {integrity: sha512-VGL7jBKN6pEXi6peXoyn9t9O7olvinaAonnoe+iFi/F2q7/yQzAFM5KR1OY15u9PlrB3scI9HvcTFoOrIjUaVQ==} resolution: {integrity: sha512-98hUdm23F3YlC3UN4mzv1FAsWr81YYdxF31cYhm19c51FwOph4dn5B4NjKp45UXBiR1Xx+cKrdmSIZX0ldS8zw==}
peerDependencies: peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0 react: ^16.5.1 || ^17.0.0 || ^18.0.0
dependencies: dependencies:

71
web/src/components/Header.tsx
View File

@ -12,45 +12,44 @@ const Header: React.FC = () => {
}; };
return ( return (
<> <div className="w-full bg-amber-50">
<div className="w-full bg-amber-50"> <div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
<div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center"> <div className="flex flex-row justify-start items-center shrink mr-2">
<div className="flex flex-row justify-start items-center shrink mr-2"> <Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center">
<Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center"> <img src="/logo.png" className="w-8 h-auto mr-2" alt="" />
<img src="/logo.png" className="w-8 h-auto mr-2" alt="" /> Shortify
Shortify </Link>
</Link> </div>
</div> <div className="relative flex-shrink-0">
<div className="relative flex-shrink-0"> <Dropdown
<Dropdown trigger={
trigger={ <button className="flex flex-row justify-end items-center cursor-pointer">
<button className="flex flex-row justify-end items-center cursor-pointer"> <Icon.User className="w-5 h-auto mr-1" />
<span>{user.nickname}</span> <span>{user.nickname}</span>
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" /> <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
</button>
}
actions={
<>
<Link
to="/account"
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
>
<Icon.User className="w-4 h-auto mr-2" /> My Account
</Link>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
onClick={() => handleSignOutButtonClick()}
>
<Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
</button> </button>
} </>
actions={ }
<> actionsClassName="!w-40"
<Link ></Dropdown>
to="/account"
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
>
<Icon.User className="w-4 h-auto mr-2" /> My Account
</Link>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
onClick={() => handleSignOutButtonClick()}
>
<Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
</button>
</>
}
actionsClassName="!w-40"
></Dropdown>
</div>
</div> </div>
</div> </div>
</> </div>
); );
}; };

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

@ -67,28 +67,28 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
<div className="flex flex-row justify-end items-center space-x-2"> <div className="flex flex-row justify-end items-center space-x-2">
<Tooltip title="Copy link" variant="solid" placement="top"> <Tooltip title="Copy link" variant="solid" placement="top">
<button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}> <button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
<Icon.Copy className="w-4 h-auto" /> <Icon.Copy className="w-5 h-auto text-gray-600" />
</button> </button>
</Tooltip> </Tooltip>
<Tooltip title="Go to link" variant="solid" placement="top"> <Tooltip title="Go to link" variant="solid" placement="top">
<a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}> <a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
<Icon.ExternalLink className="w-4 h-auto" /> <Icon.ExternalLink className="w-5 h-auto text-gray-600" />
</a> </a>
</Tooltip> </Tooltip>
<Dropdown <Dropdown
actionsClassName="!w-20" actionsClassName="!w-24"
actions={ actions={
<> <>
<button <button
disabled={!havePermission(shortcut)} disabled={!havePermission(shortcut)}
className="w-full px-2 text-left leading-8 text-sm cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" 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)} onClick={() => setEditingShortcutId(shortcut.id)}
> >
Edit Edit
</button> </button>
<button <button
disabled={!havePermission(shortcut)} disabled={!havePermission(shortcut)}
className="w-full px-2 text-left leading-8 text-sm cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" 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={() => { onClick={() => {
handleDeleteShortcutButtonClick(shortcut); handleDeleteShortcutButtonClick(shortcut);
}} }}

2
web/src/components/common/Dropdown.tsx
View File

@ -38,7 +38,7 @@ const Dropdown: React.FC<Props> = (props: Props) => {
trigger trigger
) : ( ) : (
<button className="flex flex-row justify-center items-center rounded text-gray-600 cursor-pointer hover:opacity-80"> <button className="flex flex-row justify-center items-center rounded text-gray-600 cursor-pointer hover:opacity-80">
<Icon.MoreVertical className="w-4 h-auto" /> <Icon.MoreVertical className="w-5 h-auto" />
</button> </button>
)} )}
<div <div

1
web/src/pages/Home.tsx
View File

@ -49,6 +49,7 @@ const Home: React.FC = () => {
className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100" className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
onClick={() => setShowCreateShortcutDialog(true)} onClick={() => setShowCreateShortcutDialog(true)}
> >
<Icon.Link className="w-4 h-auto text-gray-500 mr-1" />
Shortcut Shortcut
</button> </button>
</> </>