Merge pull request #39 from medreporter/rearrange-properties

Rearrange properties

locales/de/designer.yml

@@ -1,24 +1,36 @@
+BooleanDefaultProperty:
+  label: Default
+BorderProperty:
+  label: Begrenzung
 DisabledProperty:
   label: Deaktiviert
 EditorItem:
   id: ID
   type: Typ
 FieldIdProperty:
   label: ID
-FigureProperties:
-  figureTitle: Abbildung
+FigureProperty:
+  label: Abbildung
+FreeTextDefaultProperty:
+  label: Default
 HiddenProperty:
   label: Ausgeblendet
 InfoProperty:
   label: Info
 LabelProperty:
   label: Bezeichnung
+LinkProperty:
+  label: Link
+ListProperty:
+  label: Liste
 MarkdownEditorButton:
   title: Markdown Editor
 MarkdownEditorModal:
   modalTitle: Markdown Editor
   editorLabel: Editor
   previewLabel: Vorschau
+MaxProperty:
+  label: Maximum
 MenuPanel:
   booleanFieldLabel: Boolisch
   components: Komponenten
@@ -36,8 +48,14 @@ MenuPanel:
   structure: Struktur
   timeFieldLabel: Zeit
   statementLabel: Aussage
+MinProperty:
+  label: Minimum
+MultilineProperty:
+  label: Mehrzeilig
 NewTemplate:
   navbarTitle: Neue Vorlage
+NumberDefaultProperty:
+  label: Default
 OptionsEditorButton:
   label_one: "{{count}} Option"
   label_other: "{{count}} Optionen"
@@ -50,16 +68,24 @@ OptionsFormEditor:
 OptionsTable:
   labelColumnHeader: Bezeichnung
   valueColumnHeader: Wert
+PrecisionProperty:
+  label: Nachkommastellen
 PreviewSwitch:
   label: Vorschau
 PropertiesPanel:
   panelTitle: Eigenschaften
   deleteItemButtonLabel: Löschen
 TemplatePropertiesButton:
   title: Vorlageneigenschaften
+StartProperty:
+  label: Startwert
+StepProperty:
+  label: Schritt
 TemplatePropertiesModal:
   categoriesLabel: Kategorien
   descriptionLabel: Beschreibung
   identifierLabel: Bezeichner
   languageLabel: Sprache
   titleLabel: Title
+WithSecondsProperty:
+  label: Mit Sekunden

locales/en/designer.yml

@@ -1,24 +1,36 @@
+BooleanDefaultProperty:
+  label: Default
+BorderProperty:
+  label: Border
 DisabledProperty:
   label: Disabled
 EditorItem:
   id: ID
   type: Type
 FieldIdProperty:
   label: ID
-FigureProperties:
-  title: Figure
+FigureProperty:
+  label: Figure
+FreeTextDefaultProperty:
+  label: Default
 HiddenProperty:
   label: Hidden
 InfoProperty:
   label: Info
 LabelProperty:
   label: Label
+LinkProperty:
+  label: Link
+ListProperty:
+  label: List
 MarkdownEditorButton:
   title: Markdown Editor
 MarkdownEditorModal:
   modalTitle: Markdown Editor
   editorLabel: Editor
   previewLabel: Preview
+MaxProperty:
+  label: Maximal value
 MenuPanel:
   booleanFieldLabel: Boolean
   components: Components
@@ -36,8 +48,14 @@ MenuPanel:
   structure: Structure
   timeFieldLabel: Time
   statementLabel: Statement
+MinProperty:
+  label: Minimal value
+MultilineProperty:
+  label: Multiline
 NewTemplate:
   navbarTitle: New Template
+NumberDefaultProperty:
+  label: Default
 OptionsEditorButton:
   label_one: "{{count}} option"
   label_other: "{{count}} options"
@@ -50,11 +68,17 @@ OptionsFormEditor:
 OptionsTable:
   labelColumnHeader: Label
   valueColumnHeader: Value
+PrecisionProperty:
+  label: Precision
 PreviewSwitch:
   label: Preview
 PropertiesPanel:
   panelTitle: Properties
   deleteItemButtonLabel: Delete
+StartProperty:
+  label: Start
+StepProperty:
+  label: Step
 TemplatePropertiesButton:
   title: Template Properties
 TemplatePropertiesModal:
@@ -63,3 +87,5 @@ TemplatePropertiesModal:
   identifierLabel: Identifier
   languageLabel: Language
   titleLabel: Title
+WithSecondsProperty:
+  label: With seconds

src/components/designer/properties/BooleanDefaultProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { BooleanMetaProperty } from "./BooleanMetaProperty"
+
+export const BooleanDefaultProperty = () => {
+  const { t } = useSiteTranslation()
+  return <BooleanMetaProperty name="default" label={t("BooleanDefaultProperty.label")} />
+}

src/components/designer/properties/BooleanMetaProperty.tsx

@@ -0,0 +1,15 @@
+import { Switch } from "@mantine/core"
+import { Controller } from "react-hook-form"
+
+interface BooleanMetaPropertyProps {
+  name: string
+  label: string
+}
+export const BooleanMetaProperty = ({ name, label }: BooleanMetaPropertyProps) => (
+  <Controller
+    name={name}
+    render={({ field: { value, onChange }, fieldState: { error } }) => (
+      <Switch label={label} value={value} onChange={onChange} error={error?.message} />
+    )}
+  />
+)

src/components/designer/properties/BorderProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { BooleanMetaProperty } from "./BooleanMetaProperty"
+
+export const BorderProperty = () => {
+  const { t } = useSiteTranslation()
+  return <BooleanMetaProperty name="border" label={t("BorderProperty.label")} />
+}

src/components/designer/properties/DisabledProperty.tsx

@@ -1,27 +1,7 @@
-import { Group, Textarea } from "@mantine/core"
-import { Controller } from "react-hook-form"
 import { useSiteTranslation } from "~/hooks/useSiteTranslation"
-import { ScriptEditorButton } from "../scriptEditor/ScriptEditorButton"
+import { ScriptEditorMetaProperty } from "./ScriptEditorMetaProperty"
 
 export const DisabledProperty = () => {
   const { t } = useSiteTranslation()
-
-  return (
-    <Controller
-      name="disabled"
-      render={({ field: { value, onChange }, fieldState: { error } }) => (
-        <Textarea
-          label={
-            <Group gap="xs" align="center">
-              {t("DisabledProperty.label")}
-              <ScriptEditorButton />
-            </Group>
-          }
-          value={value}
-          onChange={onChange}
-          error={error?.message}
-        />
-      )}
-    />
-  )
+  return <ScriptEditorMetaProperty name="disabled" label={t("DisabledProperty.label")} />
 }

src/components/designer/properties/FieldIdProperty.tsx

@@ -1,21 +1,8 @@
-import { TextInput } from "@mantine/core"
-import { Controller } from "react-hook-form"
 import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { TextMetaProperty } from "./TextMetaProperty"
 
 export const FieldIdProperty = () => {
   const { t } = useSiteTranslation()
 
-  return (
-    <Controller
-      name="fieldId"
-      render={({ field: { value, onChange }, fieldState: { error } }) => (
-        <TextInput
-          label={t("FieldIdProperty.label")}
-          value={value}
-          onChange={onChange}
-          error={error?.message}
-        />
-      )}
-    />
-  )
+  return <TextMetaProperty label={t("FieldIdProperty.label")} name="id" />
 }

src/components/designer/properties/FigureProperty.tsx

@@ -0,0 +1,24 @@
+import { Group, Textarea } from "@mantine/core"
+import { Controller } from "react-hook-form"
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+
+export const FigureProperty = () => {
+  const { t } = useSiteTranslation()
+  return (
+    <Controller
+      name="figure"
+      render={({ field: { value, onChange }, fieldState: { error } }) => (
+        <Textarea
+          label={
+            <Group gap="xs" align="center">
+              {t("FigureProperty.label")}
+            </Group>
+          }
+          value={value}
+          onChange={onChange}
+          error={error?.message}
+        />
+      )}
+    />
+  )
+}

src/components/designer/properties/FreeTextDefaultProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { TextMetaProperty } from "./TextMetaProperty"
+
+export const FreeTextDefaultProperty = () => {
+  const { t } = useSiteTranslation()
+  return <TextMetaProperty name="default" label={t("FreeTextDefaultProperty.label")} />
+}

src/components/designer/properties/HiddenProperty.tsx

@@ -1,27 +1,8 @@
-import { Group, Textarea } from "@mantine/core"
-import { Controller } from "react-hook-form"
 import { useSiteTranslation } from "~/hooks/useSiteTranslation"
-import { ScriptEditorButton } from "../scriptEditor/ScriptEditorButton"
+import { ScriptEditorMetaProperty } from "./ScriptEditorMetaProperty"
 
 export const HiddenProperty = () => {
   const { t } = useSiteTranslation()
 
-  return (
-    <Controller
-      name="hidden"
-      render={({ field: { value, onChange }, fieldState: { error } }) => (
-        <Textarea
-          label={
-            <Group gap="xs" align="center">
-              {t("HiddenProperty.label")}
-              <ScriptEditorButton />
-            </Group>
-          }
-          value={value}
-          onChange={onChange}
-          error={error?.message}
-        />
-      )}
-    />
-  )
+  return <ScriptEditorMetaProperty name="hidden" label={t("HiddenProperty.label")} />
 }

src/components/designer/properties/LabelProperty.tsx

@@ -1,21 +1,8 @@
-import { TextInput } from "@mantine/core"
-import { Controller } from "react-hook-form"
 import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { TextMetaProperty } from "./TextMetaProperty"
 
 export const LabelProperty = () => {
   const { t } = useSiteTranslation()
 
-  return (
-    <Controller
-      name="label"
-      render={({ field: { value, onChange }, fieldState: { error } }) => (
-        <TextInput
-          label={t("LabelProperty.label")}
-          value={value}
-          onChange={onChange}
-          error={error?.message}
-        />
-      )}
-    />
-  )
+  return <TextMetaProperty name="label" label={t("LabelProperty.label")} />
 }

src/components/designer/properties/LinkProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { TextMetaProperty } from "./TextMetaProperty"
+
+export const LinkProperty = () => {
+  const { t } = useSiteTranslation()
+  return <TextMetaProperty name="link" label={t("LinkProperty.label")} />
+}

src/components/designer/properties/ListProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { BooleanMetaProperty } from "./BooleanMetaProperty"
+
+export const ListProperty = () => {
+  const { t } = useSiteTranslation()
+  return <BooleanMetaProperty name="list" label={t("ListProperty.label")} />
+}

src/components/designer/properties/MaxProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { NumberMetaProperty } from "./NumberMetaProperty"
+
+export const MaxProperty = () => {
+  const { t } = useSiteTranslation()
+  return <NumberMetaProperty name="max" label={t("MaxProperty.label")} />
+}

src/components/designer/properties/MinProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { NumberMetaProperty } from "./NumberMetaProperty"
+
+export const MinProperty = () => {
+  const { t } = useSiteTranslation()
+  return <NumberMetaProperty name="min" label={t("MinProperty.label")} />
+}

src/components/designer/properties/MultilineProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { BooleanMetaProperty } from "./BooleanMetaProperty"
+
+export const MultilineProperty = () => {
+  const { t } = useSiteTranslation()
+  return <BooleanMetaProperty name="multiline" label={t("MultilineProperty.label")} />
+}

src/components/designer/properties/NumberDefaultProperty.tsx

@@ -0,0 +1,7 @@
+import { useSiteTranslation } from "~/hooks/useSiteTranslation"
+import { NumberMetaProperty } from "./NumberMetaProperty"
+
+export const NumberDefaultProperty = () => {
+  const { t } = useSiteTranslation()
+  return <NumberMetaProperty name="default" label={t("NumberDefaultProperty.label")} />
+}

src/components/designer/properties/NumberMetaProperty.tsx

@@ -0,0 +1,16 @@
+import { NumberInput } from "@mantine/core"
+import { Controller } from "react-hook-form"
+
+interface NumberMetaPropertyProps {
+  name: string
+  label: string
+}
+
+export const NumberMetaProperty = ({ name, label }: NumberMetaPropertyProps) => (
+  <Controller
+    name={name}
+    render={({ field: { value, onChange }, fieldState: { error } }) => (
+      <NumberInput label={label} value={value} onChange={onChange} error={error?.message} />
+    )}
+  />
+)