various styling fixes

webapp/views/components/LetterOptions.js

@@ -1,61 +1,98 @@
 import { h } from 'preact';
+import Collapsible from 'react-collapsible';
 import Input from './Input';
 import TextAreaInput from './TextAreaInput';
+import Select from './Select';
+
+const EXAMPLE_ADDRESS="Max Mustermann\nMusterstr. 73\n12345 Musterstadt";
 
 export default function(props) {
+    const templateTypeOptions = [
+        {
+            value: 'brief-fam',
+            name: "Familie"
+        },
+        {
+            value: 'brief-valerie',
+            name: "Valerie"
+        },
+        {
+            value: 'brief-rain',
+            name: "Rain Baumeister"
+        },
+        {
+            value: 'brief-thomas',
+            name: "Thomas"
+        }
+    ];
+
     return (
         <div>
+            <Select
+                name="template"
+                text="Vorlage"
+                onchange={props.onChange}
+                value={props.template}
+                options={templateTypeOptions}
+            />
+
             <TextAreaInput
                 name="address"
                 text="Adresse"
+                placeholder={EXAMPLE_ADDRESS}
                 onchange={props.onChange}
                 value={props.address}
             />
             <Input
                 name="subject"
                 text="Betreff"
+                placeholder="Betreffzeile"
                 onchange={props.onChange}
                 value={props.subject}
             />
-            <Input
-                name="yourRef"
-                text="Ihr Zeichen"
-                onchange={props.onChange}
-                value={props.yourRef}
-            />
-            <Input
-                name="yourMail"
-                text="Ihr Schreiben vom"
-                onchange={props.onChange}
-                value={props.yourMail}
-            />
-            <Input
-                name="customer"
-                text="Kundernummer"
-                onchange={props.onChange}
-                value={props.customer}
-            />
-            <Input
-                name="invoice"
-                text="Rechnung"
-                onchange={props.onChange}
-                value={props.invoice}
-            />
-            <Input
-                name="yourMail"
-                text="Ihr Schreiben vom"
-                onchange={props.onChange}
-                value={props.yourMail}
-            />
+            <Collapsible trigger="Bezugszeichenzeile">
+                <Input
+                    name="yourRef"
+                    text="Ihr Zeichen"
+                    onchange={props.onChange}
+                    value={props.yourRef}
+                />
+                <Input
+                    name="yourMail"
+                    text="Ihr Schreiben vom"
+                    onchange={props.onChange}
+                    value={props.yourMail}
+                />
+                <Input
+                    name="customer"
+                    text="Kundernummer"
+                    onchange={props.onChange}
+                    value={props.customer}
+                />
+                <Input
+                    name="invoice"
+                    text="Rechnung"
+                    onchange={props.onChange}
+                    value={props.invoice}
+                />
+                <Input
+                    name="yourMail"
+                    text="Ihr Schreiben vom"
+                    onchange={props.onChange}
+                    value={props.yourMail}
+                />
+            </Collapsible>
             <Input
                 name="date"
                 text="Datum"
+                placeholder="Heute"
                 onchange={props.onChange}
                 value={props.date}
             />
             <Input
                 name="opening"
                 text="Anrede"
+                placeholder="Sehr geehrte Damen und Herren"
                 onchange={props.onChange}
                 value={props.opening}
             />
@@ -63,11 +100,13 @@ export default function(props) {
                 name="body"
                 text="Brieftext"
                 onchange={props.onChange}
+                placeholder="Inhalt des Briefes"
                 value={props.body}
             />
             <Input
                 name="closing"
                 text="Grußformel"
+                placeholder="Mit freundlichen Grüßen"
                 onchange={props.onChange}
                 value={props.closing}
             />