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 &&
+ }
+
+ {
+ keyboardHelpOpen &&
+
+ }
+
)
}
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;
}