titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tags to indicate if a setting is on or off

Browse Source
This commit is contained in:
1ilit 2024-04-11 11:11:02 +03:00
parent 2f7702a593
commit 0913ee8108
1 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/EditorHeader/ControlPanel.jsx
View File

@ -20,6 +20,7 @@ import {
Spin, Spin,
Toast, Toast,
Popconfirm, Popconfirm,
Tag,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import { toPng, toJpeg, toSvg } from "html-to-image"; import { toPng, toJpeg, toSvg } from "html-to-image";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
@ -992,18 +993,22 @@ export default function ControlPanel({
}, },
View: { View: {
Header: { Header: {
state: layout.header ? "on" : "off",
function: () => function: () =>
setLayout((prev) => ({ ...prev, header: !prev.header })), setLayout((prev) => ({ ...prev, header: !prev.header })),
}, },
Sidebar: { Sidebar: {
state: layout.sidebar ? "on" : "off",
function: () => function: () =>
setLayout((prev) => ({ ...prev, sidebar: !prev.sidebar })), setLayout((prev) => ({ ...prev, sidebar: !prev.sidebar })),
}, },
Issues: { Issues: {
state: layout.issues ? "on" : "off",
function: () => function: () =>
setLayout((prev) => ({ ...prev, issues: !prev.issues })), setLayout((prev) => ({ ...prev, issues: !prev.issues })),
}, },
"Strict mode": { "Strict mode": {
state: settings.strictMode ? "off" : "on",
function: viewStrictMode, function: viewStrictMode,
shortcut: "Ctrl+Shift+M", shortcut: "Ctrl+Shift+M",
}, },
@ -1018,7 +1023,8 @@ export default function ControlPanel({
enterFullscreen(); enterFullscreen();
}, },
}, },
"Field summary": { "Field details": {
state: layout.showFieldSummary ? "on" : "off",
function: viewFieldSummary, function: viewFieldSummary,
shortcut: "Ctrl+Shift+F", shortcut: "Ctrl+Shift+F",
}, },
@ -1027,10 +1033,12 @@ export default function ControlPanel({
shortcut: "Ctrl+R", shortcut: "Ctrl+R",
}, },
"Show grid": { "Show grid": {
state: settings.showGrid ? "on" : "off",
function: viewGrid, function: viewGrid,
shortcut: "Ctrl+Shift+G", shortcut: "Ctrl+Shift+G",
}, },
"Show cardinality": { "Show cardinality": {
state: settings.showCardinality ? "on" : "off",
function: () => function: () =>
setSettings((prev) => ({ setSettings((prev) => ({
...prev, ...prev,
@ -1079,6 +1087,7 @@ export default function ControlPanel({
function: () => setSidesheet(SIDESHEET.TIMELINE), function: () => setSidesheet(SIDESHEET.TIMELINE),
}, },
Autosave: { Autosave: {
state: settings.autosave ? "on" : "off",
function: () => function: () =>
setSettings((prev) => { setSettings((prev) => {
Toast.success(`Autosave is ${settings.autosave ? "off" : "on"}`); Toast.success(`Autosave is ${settings.autosave ? "off" : "on"}`);
@ -1086,6 +1095,7 @@ export default function ControlPanel({
}), }),
}, },
Panning: { Panning: {
state: settings.panning ? "on" : "off",
function: () => function: () =>
setSettings((prev) => { setSettings((prev) => {
Toast.success(`Panning is ${settings.panning ? "off" : "on"}`); Toast.success(`Panning is ${settings.panning ? "off" : "on"}`);
@ -1401,7 +1411,7 @@ export default function ControlPanel({
<Dropdown <Dropdown
key={category} key={category}
position="bottomLeft" position="bottomLeft"
style={{ width: "220px" }} style={{ width: "240px" }}
render={ render={
<Dropdown.Menu> <Dropdown.Menu>
{Object.keys(menu[category]).map((item, index) => { {Object.keys(menu[category]).map((item, index) => {
@ -1465,16 +1475,21 @@ export default function ControlPanel({
} }
} }
> >
{menu[category][item].shortcut ? ( <div className="w-full flex items-center justify-between">
<> <div>{item}</div>
<div>{item}</div> <div className="flex items-center gap-1">
<div className="text-gray-400"> {menu[category][item].shortcut && (
{menu[category][item].shortcut} <div className="text-gray-400">
</div> {menu[category][item].shortcut}
</> </div>
) : ( )}
item {menu[category][item].state && (
)} <Tag color="blue">
{menu[category][item].state}
</Tag>
)}
</div>
</div>
</Dropdown.Item> </Dropdown.Item>
); );
})} })}