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