From a42cabd90381626d0618248f8c99b1253fd75cce Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Thu, 6 Jul 2023 12:05:18 -0500 Subject: [PATCH] Dot-menu css; add help menu; make 'a' always open audit on recordView --- src/CommandMenu.tsx | 121 +++++++++++++++++----- src/qqq/pages/records/view/RecordView.tsx | 2 +- src/qqq/styles/raycast.scss | 17 +-- 3 files changed, 107 insertions(+), 33 deletions(-) diff --git a/src/CommandMenu.tsx b/src/CommandMenu.tsx index 3513bdd..30ba989 100644 --- a/src/CommandMenu.tsx +++ b/src/CommandMenu.tsx @@ -27,9 +27,17 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; +import Dialog from "@mui/material/Dialog"; +import DialogActions from "@mui/material/DialogActions"; +import DialogContent from "@mui/material/DialogContent"; +import DialogContentText from "@mui/material/DialogContentText"; +import DialogTitle from "@mui/material/DialogTitle"; +import Grid from "@mui/material/Grid"; import Icon from "@mui/material/Icon"; +import Typography from "@mui/material/Typography"; +import {makeStyles} from "@mui/styles"; import {Command} from "cmdk"; -import React, {useContext, useEffect, useRef} from "react"; +import React, {useContext, useEffect, useRef, useState} from "react"; import {useNavigate} from "react-router-dom"; import QContext from "QContext"; import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils"; @@ -39,6 +47,21 @@ interface Props metaData?: QInstance; } +const useStyles = makeStyles((theme: any) => ({ + item: { + whiteSpace: "nowrap" + }, + keyboardKey: { + border: "1px solid gray", + borderRadius: "5px", + width: "28px", + display: "inline-block", + textAlign: "center", + marginRight: "5px", + fontWeight: "bold", + background: "#f0f0f0" + } +})); const CommandMenu = ({metaData}: Props) => { @@ -47,16 +70,27 @@ const CommandMenu = ({metaData}: Props) => const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, setTableMetaData, tableProcesses} = useContext(QContext); + const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false) + const classes = useStyles(); + function evalueKeyPress(e: KeyboardEvent) { /////////////////////////////////////////////////////////////////////////// // if a dot pressed, not from a "text" element, then toggle command menu // /////////////////////////////////////////////////////////////////////////// const type = (e.target as any).type; - if (e.key === "." && type !== "text" && type !== "textarea" && type !== "input" && type !== "search") + if (type !== "text" && type !== "textarea" && type !== "input" && type !== "search") { - e.preventDefault(); - setDotMenuOpen(!dotMenuOpen); + if (e.key === "." && !keyboardHelpOpen) + { + e.preventDefault(); + setDotMenuOpen(!dotMenuOpen); + } + else if (e.key === "?" && !dotMenuOpen) + { + e.preventDefault(); + setKeyboardHelpOpen(true); + } } } @@ -83,7 +117,7 @@ const CommandMenu = ({metaData}: Props) => { document.removeEventListener("keydown", down) } - }, [tableMetaData, dotMenuOpen]) + }, [tableMetaData, dotMenuOpen, keyboardHelpOpen]) useEffect(() => { @@ -116,11 +150,11 @@ const CommandMenu = ({metaData}: Props) => { if (nodes[i].type === QAppNodeType.APP && nodes[i].name === name) { - return (`${path} > ${nodes[i].label}`); + return (`${path}${nodes[i].label}`); } else if (nodes[i].type === QAppNodeType.APP) { - const result = getFullAppLabel(nodes[i].children, name, depth + 1, `${path} ${nodes[i].label}`); + const result = getFullAppLabel(nodes[i].children, name, depth + 1, `${path}${nodes[i].label} > `); if (result !== null) { return (result); @@ -272,24 +306,63 @@ const CommandMenu = ({metaData}: Props) => } const containerElement = useRef(null) + + function closeKeyboardHelp() + { + setKeyboardHelpOpen(false); + } + return ( - - - - - - - - - - No results found. - - - - - - - + + + { + dotMenuOpen && + + + + + + + + + No results found. + + + + + + + + } + + { + keyboardHelpOpen && + + Keyboard Shortcuts + + + Global + + .Open the Quick Navigation Menu + ?Open Keyboard Shortcuts Help + + + Record View + + nCreate a New Record + cCopy the current Record + eEdit the current Record + dDelete the current Record + aAudit the current Record + + + + + + + + } + ) } export default CommandMenu; diff --git a/src/qqq/pages/records/view/RecordView.tsx b/src/qqq/pages/records/view/RecordView.tsx index b3700eb..612f292 100644 --- a/src/qqq/pages/records/view/RecordView.tsx +++ b/src/qqq/pages/records/view/RecordView.tsx @@ -190,7 +190,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element { document.removeEventListener("keydown", down) } - }, [dotMenuOpen, showEditChildForm, showAudit]) + }, [dotMenuOpen, showEditChildForm, showAudit, metaData]) const gotoCreate = () => { diff --git a/src/qqq/styles/raycast.scss b/src/qqq/styles/raycast.scss index 41e216d..189a484 100644 --- a/src/qqq/styles/raycast.scss +++ b/src/qqq/styles/raycast.scss @@ -3,6 +3,10 @@ */ .raycast { + .MuiBox-root { + margin-bottom: 4px; + } + [cmdk-root] { max-width: 1000px; width: 650px; @@ -193,9 +197,10 @@ overflow: auto; overscroll-behavior: contain; scroll-padding-block-end: 40px; + scroll-padding-block-start: 80px; transition: 100ms ease; transition-property: height; - padding-bottom: 40px; + border-top: 1px solid var(--gray5) } [cmdk-raycast-open-trigger], @@ -269,28 +274,24 @@ } [cmdk-separator] { + display: none; height: 1px; width: 100%; background: var(--gray5); margin: 4px 0; } - *:not([hidden]) + [cmdk-group] { - margin-top: 8px; - } - [cmdk-group-heading] { user-select: none; font-size: 14px; color: var(--gray11); - padding: 0 8px; display: flex; align-items: center; position: sticky; top: 0px; - padding-bottom: 7px; + padding: 7px 8px 7px; border-bottom: var(--gray6) 1px solid; - background: white; + background: var(--gray1); z-index: 1; }