- {section.list.map(l => (
+ {section.list.map((l, i) => (
- {l.keys.map((k, i) => (
- <>
-
- {k}
-
- {i !== l.keys.length - 1 ? "+" : ""}
- >
- ))}
- {l.alt && l.alt.map((alt, i) => (
- <>
- or
-
- {alt}
-
- {i !== l.alt.length - 1 ? "+" : ""}
- >
- ))}
+ {l.keys}
{l.description}
diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/constants/keyList.tsx b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/constants/keyList.tsx
new file mode 100644
index 000000000..4aebbea1c
--- /dev/null
+++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/constants/keyList.tsx
@@ -0,0 +1,62 @@
+import React from "preact/compat";
+import { isMacOs } from "../../../../utils/detect-device";
+import { VisibilityIcon } from "../../Icons";
+import GraphTips from "../../../Chart/GraphTips/GraphTips";
+
+const ctrlMeta = {isMacOs() ? "Cmd" : "Ctrl"}
;
+
+const keyList = [
+ {
+ title: "Query",
+ list: [
+ {
+ keys: Enter
,
+ description: "Run"
+ },
+ {
+ keys: <>Shift
+ Enter
>,
+ description: "Multi-line queries"
+ },
+ {
+ keys: <>{ctrlMeta} + Arrow Up
>,
+ description: "Previous command from the Query history"
+ },
+ {
+ keys: <>{ctrlMeta} + Arrow Down
>,
+ description: "Next command from the Query history"
+ },
+ {
+ keys: <>{ctrlMeta} + click
by >,
+ description: "Toggle multiple queries"
+ }
+ ]
+ },
+ {
+ title: "Graph",
+ readMore: ,
+ list: [
+ {
+ keys: <>{ctrlMeta} + scroll Up
or +
>,
+ description: "Zoom in"
+ },
+ {
+ keys: <>{ctrlMeta} + scroll Down
or -
>,
+ description: "Zoom out"
+ },
+ {
+ keys: <>{ctrlMeta} + drag
>,
+ description: "Move the graph left/right"
+ },
+ {
+ keys: <>click
>,
+ description: "Select the series in the legend"
+ },
+ {
+ keys: <>{ctrlMeta} + click
>,
+ description: "Toggle multiple series in the legend"
+ }
+ ]
+ },
+];
+
+export default keyList;
diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss
index c86947ce0..2d1c32a67 100644
--- a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss
+++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss
@@ -8,13 +8,20 @@
}
&-section {
- margin-bottom: $padding-medium;
+ position: relative;
+ margin-bottom: $padding-global;
+ padding-bottom: $padding-global;
+ border-bottom: $border-divider;
&__title {
font-weight: bold;
- padding: $padding-small 0;
margin-bottom: $padding-global;
- border-bottom: $border-divider;
+ }
+
+ &__read-more {
+ position: absolute;
+ top: -8px;
+ right: 0;
}
&-list {
@@ -40,6 +47,7 @@
align-items: center;
gap: 4px;
+ svg,
code {
display: inline-block;
padding: 2px $padding-small 0;
@@ -52,6 +60,11 @@
border: $border-divider;
border-radius: 4px;
}
+
+ svg {
+ width: 24px;
+ padding: 4px;
+ }
}
&__description {