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

chore: update workspace selector

Browse Source
This commit is contained in:
Steven 2022-09-17 11:23:49 +08:00
parent c34c7a7fd4
commit de83467c45
2 changed files with 57 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,17 @@
import { Link, useNavigate } from "react-router-dom";
import { Link, useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "../store";
import { userService } from "../services";
import Icon from "./Icon";
import Dropdown from "./common/Dropdown";
import Only from "./common/OnlyWhen";
import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
const Header: React.FC = () => {
const params = useParams();
const navigate = useNavigate();
const { user } = useAppSelector((state) => state.user);
const { workspaceList } = useAppSelector((state) => state.workspace);
const activedWorkspace = workspaceList.find((workspace) => workspace.name === params.workspaceName ?? "");
const handleSignOutButtonClick = async () => {
await userService.doSignOut();
@ -16,9 +21,50 @@ const Header: React.FC = () => {
return (
<div className="w-full bg-amber-50">
<div className="w-full max-w-4xl mx-auto px-3 py-4 flex flex-row justify-between items-center">
<Link to={"/"} className="text-xl font-mono font-medium cursor-pointer">
Corgi
</Link>
<div className="flex flex-row justify-start items-center">
<Link to={"/"} className="text-base font-mono font-medium cursor-pointer">
Corgi
</Link>
<Only when={workspaceList.length > 0 && activedWorkspace !== undefined}>
<>
<span className="font-mono mx-2 text-gray-200">/</span>
<Dropdown
trigger={
<button className="flex flex-row justify-end items-center cursor-pointer">
<span className="font-mono">{activedWorkspace?.name}</span>
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
</button>
}
actions={
<>
{workspaceList.map((workspace) => {
return (
<Link
key={workspace.id}
to={`/${workspace.name}`}
className="w-full px-3 leading-10 flex flex-row justify-between items-center text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
>
<span className="truncate">{workspace.name}</span>
<Only when={workspace.name === activedWorkspace?.name}>
<Icon.Check className="w-4 h-auto ml-1 shrink-0" />
</Only>
</Link>
);
})}
<hr className="w-full border-t my-1 border-t-gray-100" />
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
onClick={() => showCreateWorkspaceDialog()}
>
<Icon.Plus className="w-4 h-auto mr-1" /> Create Workspace
</button>
</>
}
actionsClassName="!w-48 !-left-4"
></Dropdown>
</>
</Only>
</div>
<div className="relative">
{user ? (
<Dropdown
@ -32,19 +78,19 @@ const Header: React.FC = () => {
<>
<Link
to={`/user/${user?.id}`}
className="w-full px-3 leading-8 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
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"
>
My information
<Icon.User className="w-4 h-auto mr-1" /> My Account
</Link>
<button
className="w-full px-3 leading-8 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
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()}
>
Sign out
<Icon.LogOut className="w-4 h-auto mr-1" /> Sign out
</button>
</>
}
actionsClassName="!w-36"
actionsClassName="!w-40"
></Dropdown>
) : (
<span className="cursor-pointer" onClick={() => navigate("/user/auth")}>

10
web/src/pages/WorkspaceDetail.tsx
View File

@ -33,22 +33,16 @@ const WorkspaceDetail: React.FC = () => {
...state,
workspace,
});
loadingState.setLoading();
Promise.all([shortcutService.fetchWorkspaceShortcuts(workspace.id)]).finally(() => {
loadingState.setFinish();
});
}, []);
}, [params.workspaceName]);
return (
<div className="w-full h-full flex flex-col justify-start items-start">
<Header />
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-start items-center mb-4">
<Link to={"/"} className="font-mono text-gray-600 cursor-pointer hover:underline">
Home
</Link>
<span className="font-mono text-gray-200 mx-4">/</span>
<span className="font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
</div>
<div className="w-full flex flex-row justify-between items-center mb-4">
<span className="font-mono text-gray-400">Shortcut List</span>
<button