German version of help content

src/main/java/edu/kit/typicalc/view/main/HelpContentField.java

@@ -0,0 +1,43 @@
+package edu.kit.typicalc.view.main;
+
+import com.vaadin.flow.component.accordion.AccordionPanel;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.details.DetailsVariant;
+import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.orderedlayout.FlexComponent;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.i18n.LocaleChangeEvent;
+import com.vaadin.flow.i18n.LocaleChangeObserver;
+
+public class HelpContentField extends AccordionPanel implements LocaleChangeObserver {
+    
+    private static final long serialVersionUID = -2793005857762897734L;
+        
+    private final String summaryKey;
+    private final String contentKey;
+    private final Paragraph content;
+    
+    protected HelpContentField(String summaryKey, String contentKey) {
+        this.summaryKey = summaryKey;
+        this.contentKey = contentKey;
+        this.content = new Paragraph(getTranslation(contentKey));
+        setSummaryText(getTranslation(summaryKey));
+        setContent(content);
+        addThemeVariants(DetailsVariant.FILLED);
+    }
+    
+    protected HelpContentField(String summaryKey, Button button, String contentKey) {
+        this(summaryKey, contentKey);
+        HorizontalLayout layout = new HorizontalLayout(button, content);
+        layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
+        layout.setAlignItems(FlexComponent.Alignment.CENTER);
+        setContent(layout);
+    }
+    
+    @Override
+    public void localeChange(LocaleChangeEvent event) {
+       setSummaryText(getTranslation(summaryKey));
+       content.setText(getTranslation(contentKey));
+    }
+
+}

src/main/java/edu/kit/typicalc/view/main/HelpDialog.java

@@ -3,16 +3,13 @@ package edu.kit.typicalc.view.main;
 import com.vaadin.flow.component.ItemLabelGenerator;
 import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.accordion.Accordion;
-import com.vaadin.flow.component.accordion.AccordionPanel;
 import com.vaadin.flow.component.applayout.DrawerToggle;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.dependency.CssImport;
-import com.vaadin.flow.component.details.DetailsVariant;
 import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.html.H3;
-import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.icon.Icon;
-import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
+import com.vaadin.flow.component.icon.VaadinIcon;
-import com.vaadin.flow.component.orderedlayout.FlexComponent.JustifyContentMode;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.select.Select;
@@ -61,29 +58,26 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver {
         contentLayout.setId(CONTENT_LAYOUT_ID);
         add(headingLayout, contentLayout);
         setWidth("1000px"); // cannot set width per css
-        setHeight("400px"); // choose according to Accordion height
+        setHeight("600px"); // choose according to Accordion height
     }
     
     private Accordion createHelpContent() {
-        // nur beispielhaft als Vorschlag, wie Hilfe-Dialog aussehen könnte
         Accordion acc = new Accordion();
-        HorizontalLayout drawerAccContent = new HorizontalLayout(new DrawerToggle(), 
+        acc.add(new HelpContentField("root.drawer", new DrawerToggle(), "root.helpDrawer"));
-                new Paragraph(getTranslation("root.helpDrawer")));
+        acc.add(new HelpContentField("root.example",
-        drawerAccContent.setAlignItems(Alignment.CENTER);
+                new Button(getTranslation("root.examplebutton")), "root.helpExample"));
-        drawerAccContent.setJustifyContentMode(JustifyContentMode.CENTER);
+        acc.add(new HelpContentField("root.inputField", "root.helpInputField"));
-        AccordionPanel drawerAcc = new AccordionPanel("Drawer", drawerAccContent);
+        acc.add(new HelpContentField("root.typeAssumptions", "root.helpTypeAssumptions"));
-        drawerAcc.addThemeVariants(DetailsVariant.FILLED);
+        acc.add(new HelpContentField("root.firstStepButton",
-        
+                new Button(new Icon(VaadinIcon.ANGLE_DOUBLE_LEFT)), "root.helpFirstStepButton"));
-        HorizontalLayout exampleDialogAccContent = 
+        acc.add(new HelpContentField("root.previousStepButton",
-                new HorizontalLayout(new Button(getTranslation("root.examplebutton")),
+                new Button(new Icon(VaadinIcon.ANGLE_LEFT)), "root.helpPreviousStepButton"));
-                new Paragraph(getTranslation("root.helpExample")));
+        acc.add(new HelpContentField("root.nextStepButton",
-        exampleDialogAccContent.setAlignItems(Alignment.CENTER);
+                new Button(new Icon(VaadinIcon.ANGLE_RIGHT)), "root.helpNextStepButton"));
-        exampleDialogAccContent.setJustifyContentMode(JustifyContentMode.CENTER);
+        acc.add(new HelpContentField("root.lastStepButton",
-        AccordionPanel exampleAcc = new AccordionPanel("Beispiele", exampleDialogAccContent);
+                new Button(new Icon(VaadinIcon.ANGLE_DOUBLE_RIGHT)), "root.helpLastStepButton"));
-        exampleAcc.addThemeVariants(DetailsVariant.FILLED);
+        acc.add(new HelpContentField("root.shareButton", 
-        
+                new Button(new Icon(VaadinIcon.CONNECT)), "root.helpShareButton"));
-        acc.add(drawerAcc);
-        acc.add(exampleAcc);
         acc.setWidthFull();
         return acc;
     }

src/main/resources/language/translation_de.properties

@@ -23,12 +23,44 @@ root.addAssumption=Typannahme hinzufügen
 root.deleteAll=Alle löschen
 root.variable=Variable
 root.type=Typ
-root.helpDrawer=Durch Klicken des Knopfes öffnet sich der Drawer. \
+root.drawer=Drawer
+root.example=Beispiele
+root.inputField=Eingabefeld
+root.firstStepButton=Erster-Schritt Knopf
+root.previousStepButton=Vorheriger-Schritt Knopf
+root.nextStepButton=Nächster-Schritt Knopf
+root.lastStepButton=Letzter-Schritt Knopf
+root.shareButton=Teilen Knopf
+root.helpDrawer=Durch Klicken des Knopfs öffnet sich der Drawer. \
 Im Drawer ist eine Auflistung aller Typregeln zu finden. \
-Außerdem kann durch klicken des Kopieren-Knopfs der Latex-Code der Regel in die Zwischenablage kopiert werden.
+Außerdem kann durch Klicken des Kopieren-Knopfs der Latex-Code der Regel in die Zwischenablage kopiert werden.
-root.helpExample=Durch klicken des Knopfes öffnet sich der Beispiel-Dialog. \
+root.helpExample=Durch Klicken des Knopfs öffnet sich der Beispiel-Dialog. \
 Nach Anklicken wird der jeweilige Beispielterm in das Eingabefeld eingefügt. \
 Der Term kann nun nach belieben angepasst oder direkt typisiert werden.
+root.helpInputField=In das Eingabefeld können Lambda-Terme mit einer Länge von bis zu 1000 Zeichen eingegeben werden. \
+Das \u03BB-Zeichen kann dabei entweder durch Klicken des \u03BB-Knopfs oder durch Eingabe eines Backslashs an der \
+aktuellen Cursorposition eingefügt werden. Durch Klicken des Info-Symbols wird die korrekte Syntax eines Terms \
+angezeigt.
+root.helpTypeAssumptions=Durch Klicken des Typannahmen-Knopfs öffnet sich ein Dialog zur Eingabe von Typannahmen. \
+Durch Klicken des Info-Symbols wird die korrekte Syntax des Typs einer Typannahme angezeigt. Sofern eine Variable in \
+mehreren Typannahmen vorkommt, wird die ausschließlich die oberste Typannahme berücksichtigt.
+root.helpFirstStepButton=Je nach Stand der Algorithmusausführung ändert sich die Funtion des Knopfs. \
+Wenn aktuell der Baum aufgebaut wird, springt die Anzeige nach Klicken des Knopfs zurück zum ersten Schritt des \
+Typherleitungsbaums. Wenn bereits die Unifikation druchgeführt wird, sprigt die Anzeige nach Klicken des Knopfs \
+in den letzten Schritt des Baums. Der Knopf lässt sich außerdem durch die Tastenkombination "STRG + Linke Pfeiltaste" \
+ansprechen.
+root.helpPreviousStepButton=Durch Klicken des Vorheriger-Schritt Knopfs wird der vorherige Schritt des Algorithmus \
+angezeigt. Der Knopf lässt sich außerdem auf der Tastatur durch die Taste  "Line Pfeiltaste" ansprechen.
+root.helpNextStepButton=Durch Klicken des Nächster-Schritt Knopfs wird der nächste Schritt des Algorithmus angezeigt. \
+Der Knopf lässt sich außerdem durch auf der Tastatur durch die Taste "Rechte Pfeiltaste" ansprechen.
+root.helpLastStepButton=Je nach Stand der Algorithmusausführung ändert sich die Funtion des Knopfs. \
+Wenn aktuell der Baum aufgebaut wird, springt die Anzeige nach Klicken des Knopfs vor zum letzten Schritt des \
+Typherleitungsbaums. Wenn bereits die Unifikation druchgeführt wird, sprigt die Anzeige nach Klicken des Knopfs \
+vor zur Anzeige des finalen Typs. Der Knopf lässt sich außerdem durch die Tastenkombination \
+"STRG + Rechte Pfeiltaste" ansprechen.
+root.helpShareButton=Durch Klicken des Teilen Knopfs öffnet sich ein Fenster, in dem der LaTeX-Code des finalen \
+Typherleitungsbaums des eingegebenen Terms und die zum einbinden nötigen Pakete angezeigt werden. Zusätzlich dazu \
+wird ein Permalink zur aktuellen Seite, der sowohl den Term als auch die Typannahmen kodiert, angezeigt.
 
 root.absLetLatex=\
 \\begin{prooftree}\

src/main/resources/language/translation_en.properties

@@ -25,6 +25,14 @@ root.variable=Variable
 root.type=Type
 root.title404=404 - Not Found
 root.message404="Try /infer/<term> or type your favourite term into the input field
+root.drawer=Drawer
+root.example=Examples
+root.inputField=Input Field
+root.firstStepButton=First Step Button
+root.previousStepButton=Previous Step Button
+root.nextStepButton=Next Step Button
+root.lastStepButton=Last Step Button
+
 
 root.absLetLatex=\
 \\begin{prooftree}\