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: update compact mode switch

Browse Source
This commit is contained in:
Steven 2023-08-21 00:15:32 +08:00
parent 8f028e4054
commit 0ec06423e5
1 changed files with 10 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/components/ViewSetting.tsx
View File

@ -1,5 +1,4 @@
import { Button, Divider, Option, Select } from "@mui/joy"; import { Divider, Option, Select, Switch } from "@mui/joy";
import { toast } from "react-hot-toast";
import useViewStore from "../stores/v1/view"; import useViewStore from "../stores/v1/view";
import Icon from "./Icon"; import Icon from "./Icon";
import Dropdown from "./common/Dropdown"; import Dropdown from "./common/Dropdown";
@ -10,11 +9,6 @@ const ViewSetting = () => {
const { field, direction } = order; const { field, direction } = order;
const displayStyle = viewStore.displayStyle || "full"; const displayStyle = viewStore.displayStyle || "full";
const handleReset = () => {
viewStore.setOrder({ field: "name", direction: "asc" });
toast.success("Order reset");
};
return ( return (
<Dropdown <Dropdown
trigger={ trigger={
@ -24,13 +18,16 @@ const ViewSetting = () => {
} }
actionsClassName="!mt-3 !-right-2" actionsClassName="!mt-3 !-right-2"
actions={ actions={
<div className="w-52 p-2 pt-0 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}> <div className="w-52 p-2 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
<div className="w-full flex flex-row justify-between items-center mt-1"> <div className="w-full flex flex-row justify-between items-center">
<span className="text-sm font-medium">View order</span> <span className="text-sm shrink-0 mr-2">Compact mode</span>
<Button size="sm" variant="plain" color="neutral" onClick={handleReset}> <Switch
<Icon.RefreshCw className="w-4 h-auto text-gray-500" /> size="sm"
</Button> checked={displayStyle === "compact"}
onChange={(event) => viewStore.setDisplayStyle(event.target.checked ? "compact" : "full")}
/>
</div> </div>
<Divider className="!my-1" />
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">
<span className="text-sm shrink-0 mr-2">Order by</span> <span className="text-sm shrink-0 mr-2">Order by</span>
<Select size="sm" value={field} onChange={(_, value) => viewStore.setOrder({ field: value as any })}> <Select size="sm" value={field} onChange={(_, value) => viewStore.setOrder({ field: value as any })}>
@ -47,14 +44,6 @@ const ViewSetting = () => {
<Option value={"desc"}>DESC</Option> <Option value={"desc"}>DESC</Option>
</Select> </Select>
</div> </div>
<Divider />
<div className="w-full flex flex-row justify-between items-center">
<span className="text-sm shrink-0 mr-2">Display</span>
<Select size="sm" value={displayStyle} onChange={(_, value) => viewStore.setDisplayStyle(value as any)}>
<Option value={"full"}>Full</Option>
<Option value={"compact"}>Compact</Option>
</Select>
</div>
</div> </div>
} }
></Dropdown> ></Dropdown>