From 6509d424783f8d95d6db58a776b5c70a30da7fa7 Mon Sep 17 00:00:00 2001 From: 1ilit Date: Tue, 19 Sep 2023 15:51:44 +0300 Subject: [PATCH] Add shortcuts page --- src/App.js | 2 + src/assets/logo_dark_46.png | Bin 0 -> 6833 bytes src/components/control_panel.jsx | 8 +- src/index.css | 5 + src/pages/landing_page.jsx | 4 +- src/pages/shortcuts.jsx | 185 +++++++++++++++++++++++++++++++ tailwind.config.js | 10 +- 7 files changed, 209 insertions(+), 5 deletions(-) create mode 100644 src/assets/logo_dark_46.png create mode 100644 src/pages/shortcuts.jsx diff --git a/src/App.js b/src/App.js index 1a7052f..9c9f2fe 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Editor from "./pages/editor"; import LandingPage from "./pages/landing_page"; import Survey from "./pages/survey"; +import Shortcuts from "./pages/shortcuts"; function App() { return ( @@ -11,6 +12,7 @@ function App() { } /> } /> } /> + }/> diff --git a/src/assets/logo_dark_46.png b/src/assets/logo_dark_46.png new file mode 100644 index 0000000000000000000000000000000000000000..06e2b5cc476e1c5065fd5abf45055a4f7bbeaca1 GIT binary patch literal 6833 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 literal 0 HcmV?d00001 diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx index 3471a20..7af207a 100644 --- a/src/components/control_panel.jsx +++ b/src/components/control_panel.jsx @@ -966,7 +966,8 @@ export default function ControlPanel(props) { }, Help: { Shortcuts: { - function: () => {}, + function: () => window.open("/shortcuts", "_blank"), + shortcut: "Ctrl+H", }, "Ask us on discord": { function: () => {}, @@ -1003,6 +1004,9 @@ export default function ControlPanel(props) { }); useHotkeys("ctrl+alt+c, meta+alt+c", copyAsImage, { preventDefault: true }); useHotkeys("ctrl+r, meta+r", resetView, { preventDefault: true }); + useHotkeys("ctrl+h, meta+h", () => window.open("/shortcuts", "_blank"), { + preventDefault: true, + }); useHotkeys("ctrl+alt+w, meta+alt+w", fitWindow, { preventDefault: true }); return ( @@ -1200,7 +1204,7 @@ export default function ControlPanel(props) { function toolbar() { return ( -
+
{layoutDropdown()} diff --git a/src/index.css b/src/index.css index dd5ae4c..e3fc53b 100644 --- a/src/index.css +++ b/src/index.css @@ -53,6 +53,11 @@ background-color: var(--semi-color-bg-3); } +.card-theme{ + color: var(--semi-color-text-1); + background-color: rgba(var(--semi-grey-1), 1); +} + .toolbar-theme { background-color: rgba(var(--semi-grey-1), 1); } diff --git a/src/pages/landing_page.jsx b/src/pages/landing_page.jsx index 7e8fd4a..cd9e130 100644 --- a/src/pages/landing_page.jsx +++ b/src/pages/landing_page.jsx @@ -21,8 +21,8 @@ export default function LandingPage() {
)}
-
-
+
+
logo diff --git a/src/pages/shortcuts.jsx b/src/pages/shortcuts.jsx new file mode 100644 index 0000000..1590693 --- /dev/null +++ b/src/pages/shortcuts.jsx @@ -0,0 +1,185 @@ +import React, { useEffect, useState } from "react"; +import logo_light from "../assets/logo_light_46.png"; +import logo_dark from "../assets/logo_dark_46.png"; +import { AutoComplete, Button } from "@douyinfe/semi-ui"; +import { IconSearch, IconSun, IconMoon } from "@douyinfe/semi-icons"; + +const shortcuts = [ + { shortcut: "CTRL+C", title: "Copy selected element", description: "" }, + { shortcut: "CTRL+V", title: "Paste selected element", description: "" }, + { shortcut: "CTRL+X", title: "Cut selected element", description: "" }, + { shortcut: "CTRL+D", title: "Duplicate selected element", description: "" }, + { shortcut: "DEL", title: "Delete selected element", description: "" }, + { shortcut: "CTRL+E", title: "Edit selected element", description: "" }, + { + shortcut: "CTRL+I", + title: "Import a diagram", + description: "Import a diagram by uploadng a valid json or dbb file.", + }, + { shortcut: "CTRL+Z", title: "Undo" }, + { shortcut: "CTRL+Y", title: "Redo" }, + { + shortcut: "CTRL+SHIFT+M", + title: "Enable/disable strict mode", + description: + "Disabling strict mode entails that the diagram will not undergo error or inconsistency checks.", + }, + { + shortcut: "CTRL+SHIFT+F", + title: "Enable/disable field summaries", + description: + "Disabling field summaries will prevent the display of details for each field in the table when hovered over.", + }, + { shortcut: "CTRL+SHIFT+G", title: "Show/hide grid" }, + { + shortcut: "CTRL+ALT+C", + title: "Copy as image", + description: "Save the canvas as an image to the clipboard.", + }, + { + shortcut: "CTRL+R", + title: "Reset view", + description: "Resetting view will set diagram pan to (0, 0).", + }, + { shortcut: "CTRL+UP / Wheel up", title: "Zoom in" }, + { shortcut: "CTRL+DOWN / Wheel down", title: "Zoom out" }, + { shortcut: "CTRL+H", title: "Open shortcuts" }, +]; + +export default function Shortcuts() { + const [theme, setTheme] = useState(""); + const [value, setValue] = useState(""); + const [filteredResult, setFilteredResult] = useState( + shortcuts.map((t) => { + return t.shortcut; + }) + ); + + const handleStringSearch = (value) => { + setFilteredResult( + shortcuts + .filter( + (i) => + i.shortcut.toLowerCase().includes(value.toLowerCase()) || + i.title.toLowerCase().includes(value.toLowerCase()) + ) + .map((i) => i.shortcut) + ); + }; + + useEffect(() => { + const t = localStorage.getItem("theme"); + setTheme(t); + if (t === "dark") { + const body = document.body; + if (body.hasAttribute("theme-mode")) { + body.setAttribute("theme-mode", "dark"); + } + } else { + const body = document.body; + if (body.hasAttribute("theme-mode")) { + body.setAttribute("theme-mode", "light"); + } + } + document.title = "Shortcuts - drawDB"; + document.body.setAttribute("class", "theme"); + }, [setTheme]); + + const changeTheme = () => { + const body = document.body; + const t = body.getAttribute("theme-mode"); + if (t === "dark") { + if (body.hasAttribute("theme-mode")) { + body.setAttribute("theme-mode", "light"); + setTheme("light"); + } + } else { + if (body.hasAttribute("theme-mode")) { + body.setAttribute("theme-mode", "dark"); + setTheme("dark"); + } + } + }; + + return ( + <> +
+
+ logo +
+ Keyboard shortcuts +
+
+
+ +
+ } + placeholder="Search..." + data={filteredResult} + value={value} + onSearch={(v) => handleStringSearch(v)} + emptyContent={ +
No shortcuts found
+ } + onChange={(v) => setValue(v)} + onSelect={(v) => {}} + > +
+
+
+
+
+ } + placeholder="Search..." + className="w-[80%]" + data={filteredResult} + value={value} + onSearch={(v) => handleStringSearch(v)} + emptyContent={ +
No shortcuts found
+ } + onChange={(v) => setValue(v)} + onSelect={(v) => {}} + > +
+
+ {shortcuts.map((s, i) => ( +
+
+
{s.shortcut}
+
{s.title}
+
+ {s.description && ( + <> +
+
{s.description}
+ + )} +
+ ))} +
+ + ); +} diff --git a/tailwind.config.js b/tailwind.config.js index c0958ec..cc7f1e1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,7 +4,15 @@ module.exports = { "./src/**/*.{js,jsx,ts,tsx}", ], theme: { - extend: {}, + screens: { + '3xl': {'max': '2047px'}, + '2xl': {'max': '1535px'}, + 'xl': {'max': '1279px'}, + 'lg': {'max': '1023px'}, + 'md': {'max': '767px'}, + 'sm': {'max': '639px'} + }, + extend: {} }, plugins: [], }