Layout code editor and option row

openradx · Jan 15, 2024 · 8681d89 · 8681d89
1 parent 9ebf518
commit 8681d89
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 26 deletions.
diff --git a/locales/de/designer.yml b/locales/de/designer.yml
@@ -28,7 +28,7 @@ OptionsEditorButton:
 OptionsEditorModal:
   codeEditorLabel: Codeeditor
   formEditorLabel: Formulareditor
-  modalTitle: Optionseditor
+  modalTitle: Optionen
 OptionsFormEditor:
   addOptionLabel: Neue Option hinzufügen
 OptionsTable:

diff --git a/locales/en/designer.yml b/locales/en/designer.yml
@@ -28,7 +28,7 @@ OptionsEditorButton:
 OptionsEditorModal:
   codeEditorLabel: Code Editor
   formEditorLabel: Form Editor
-  modalTitle: Options Editor
+  modalTitle: Options
 OptionsFormEditor:
   addOptionLabel: Add new option
 OptionsTable:

diff --git a/src/components/designer/optionsEditor/DraggableOptionRow.tsx b/src/components/designer/optionsEditor/DraggableOptionRow.tsx
@@ -40,7 +40,7 @@ export const DraggableOptionRow = ({
           <DragIcon size={20} />
         </div>
       </Table.Td>
-      <Table.Td>
+      <Table.Td style={{ verticalAlign: "top" }}>
         <Controller
           control={control}
           name={`options.${index}.label`}
@@ -54,7 +54,7 @@ export const DraggableOptionRow = ({
           )}
         />
       </Table.Td>
-      <Table.Td>
+      <Table.Td style={{ verticalAlign: "top" }}>
         <Controller
           control={control}
           name={`options.${index}.value`}

diff --git a/src/components/designer/optionsEditor/OptionsCodeEditor.module.css b/src/components/designer/optionsEditor/OptionsCodeEditor.module.css
@@ -0,0 +1,10 @@
+.optionsCodeEditor {
+  & :global(.cm-theme-light) {
+    height: calc(100% - 50px);
+    padding-top: 4px;
+  }
+  & :global(.cm-theme-dark) {
+    height: calc(100% - 50px);
+    padding-top: 4px;
+  }
+}
diff --git a/src/components/designer/optionsEditor/OptionsCodeEditor.tsx b/src/components/designer/optionsEditor/OptionsCodeEditor.tsx
@@ -9,6 +9,7 @@ import { ZodError } from "zod"
 import { MultipleChoiceFieldNode, SingleChoiceFieldNode, optionsSchema } from "~/schemas/structure"
 import { useAppDispatch } from "~/state/store"
 import { updateNode } from "~/state/templateSlice"
+import classes from "./OptionsCodeEditor.module.css"
 
 interface OptionsCodeEditorProps {
   node: SingleChoiceFieldNode | MultipleChoiceFieldNode
@@ -53,15 +54,16 @@ export const OptionsCodeEditor = ({ node }: OptionsCodeEditorProps) => {
   const linterExt = linter(jsonParseLinter())
 
   return (
-    <Stack>
+    <Stack h="100%" gap={0} className={classes.optionsCodeEditor}>
       <CodeMirror
         minHeight={minHeight}
+        height="100%"
         theme={colorScheme === "dark" ? "dark" : "light"}
         extensions={[theme, json(), linterExt]}
         value={sourceRef.current}
         onChange={handleChange}
       />
-      {error && <p style={{ color: "red" }}>{error}</p>}
+      {error && <p style={{ color: "red", height: "50px", margin: 0, padding: 4 }}>{error}</p>}
     </Stack>
   )
 }
diff --git a/src/components/designer/optionsEditor/OptionsEditorModal.module.css b/src/components/designer/optionsEditor/OptionsEditorModal.module.css
@@ -0,0 +1,11 @@
+.optionsEditorModalTitle {
+  flex-grow: 1;
+}
+
+.optionsEditorModalBody {
+  height: calc(100% - 68px);
+}
+
+.optionsEditorContent {
+  height: 90vh;
+}
diff --git a/src/components/designer/optionsEditor/OptionsEditorModal.tsx b/src/components/designer/optionsEditor/OptionsEditorModal.tsx
@@ -1,8 +1,9 @@
-import { Group, Modal, SegmentedControl, Stack } from "@mantine/core"
+import { Box, Flex, Modal, ScrollArea, SegmentedControl } from "@mantine/core"
 import { useState } from "react"
 import { useSiteTranslation } from "~/hooks/useSiteTranslation"
 import { MultipleChoiceFieldNode, SingleChoiceFieldNode } from "~/schemas/structure"
 import { OptionsCodeEditor } from "./OptionsCodeEditor"
+import classes from "./OptionsEditorModal.module.css"
 import { OptionsFormEditor } from "./OptionsFormEditor"
 
 interface OptionsEditorModalProps {
@@ -16,21 +17,36 @@ export const OptionsEditorModal = ({ opened, onClose, node }: OptionsEditorModal
   const [panel, setPanel] = useState<"formEditor" | "codeEditor">("formEditor")
 
   return (
-    <Modal size="lg" title={t("OptionsEditorModal.modalTitle")} opened={opened} onClose={onClose}>
-      <Stack gap="xs">
-        <Group justify="center">
-          <SegmentedControl
-            value={panel}
-            onChange={(value) => setPanel(value as any)}
-            data={[
-              { value: "formEditor", label: t("OptionsEditorModal.formEditorLabel") },
-              { value: "codeEditor", label: t("OptionsEditorModal.codeEditorLabel") },
-            ]}
-          />
-        </Group>
+    <Modal
+      size="lg"
+      title={
+        <Flex p="xs" pos="relative">
+          {t("OptionsEditorModal.modalTitle")}
+          <Box pos="absolute" top="50%" left="50%" style={{ transform: "translate(-50%, -50%)" }}>
+            <SegmentedControl
+              value={panel}
+              onChange={(value) => setPanel(value as any)}
+              data={[
+                { value: "formEditor", label: t("OptionsEditorModal.formEditorLabel") },
+                { value: "codeEditor", label: t("OptionsEditorModal.codeEditorLabel") },
+              ]}
+            />
+          </Box>
+        </Flex>
+      }
+      opened={opened}
+      onClose={onClose}
+      classNames={{
+        title: classes.optionsEditorModalTitle,
+        body: classes.optionsEditorModalBody,
+        content: classes.optionsEditorContent,
+      }}
+      scrollAreaComponent={panel === "formEditor" ? ScrollArea.Autosize : undefined}
+    >
+      <>
         {panel === "formEditor" && <OptionsFormEditor node={node} />}
         {panel === "codeEditor" && <OptionsCodeEditor node={node} />}
-      </Stack>
+      </>
     </Modal>
   )
 }
diff --git a/src/components/designer/optionsEditor/OptionsTable.tsx b/src/components/designer/optionsEditor/OptionsTable.tsx
@@ -42,13 +42,18 @@ export const OptionsTable = ({ control, fields, move, remove }: OptionsTableProp
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
     >
-      <Table withRowBorders={false} horizontalSpacing={4} verticalSpacing={4}>
+      <Table
+        withRowBorders={false}
+        horizontalSpacing={4}
+        verticalSpacing={4}
+        style={{ tableLayout: "fixed" }}
+      >
         <Table.Thead>
           <Table.Tr>
-            <Table.Th />
-            <Table.Th>{t("OptionsTable.labelColumnHeader")}</Table.Th>
-            <Table.Th>{t("OptionsTable.valueColumnHeader")}</Table.Th>
-            <Table.Th />
+            <Table.Th style={{ width: "7%" }} />
+            <Table.Th style={{ width: "43%" }}>{t("OptionsTable.labelColumnHeader")}</Table.Th>
+            <Table.Th style={{ width: "43%" }}>{t("OptionsTable.valueColumnHeader")}</Table.Th>
+            <Table.Th style={{ width: "7%" }} />
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>

diff --git a/src/global.css b/src/global.css
@@ -1,4 +1,4 @@
-body.gabbing,
+body.grabbing,
 body.grabbing * {
   cursor: grabbing !important;
 }