diff --git a/src/main/java/edu/kit/typicalc/view/main/HelpContentField.java b/src/main/java/edu/kit/typicalc/view/main/HelpContentField.java new file mode 100644 index 0000000..a6a19a2 --- /dev/null +++ b/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)); + } + +} diff --git a/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java b/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java index c49ef00..e40b55a 100644 --- a/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java +++ b/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.orderedlayout.FlexComponent.Alignment; -import com.vaadin.flow.component.orderedlayout.FlexComponent.JustifyContentMode; +import com.vaadin.flow.component.icon.Icon; +import com.vaadin.flow.component.icon.VaadinIcon; 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(), - new Paragraph(getTranslation("root.helpDrawer"))); - drawerAccContent.setAlignItems(Alignment.CENTER); - drawerAccContent.setJustifyContentMode(JustifyContentMode.CENTER); - AccordionPanel drawerAcc = new AccordionPanel("Drawer", drawerAccContent); - drawerAcc.addThemeVariants(DetailsVariant.FILLED); - - HorizontalLayout exampleDialogAccContent = - new HorizontalLayout(new Button(getTranslation("root.examplebutton")), - new Paragraph(getTranslation("root.helpExample"))); - exampleDialogAccContent.setAlignItems(Alignment.CENTER); - exampleDialogAccContent.setJustifyContentMode(JustifyContentMode.CENTER); - AccordionPanel exampleAcc = new AccordionPanel("Beispiele", exampleDialogAccContent); - exampleAcc.addThemeVariants(DetailsVariant.FILLED); - - acc.add(drawerAcc); - acc.add(exampleAcc); + acc.add(new HelpContentField("root.drawer", new DrawerToggle(), "root.helpDrawer")); + acc.add(new HelpContentField("root.example", + new Button(getTranslation("root.examplebutton")), "root.helpExample")); + acc.add(new HelpContentField("root.inputField", "root.helpInputField")); + acc.add(new HelpContentField("root.typeAssumptions", "root.helpTypeAssumptions")); + acc.add(new HelpContentField("root.firstStepButton", + new Button(new Icon(VaadinIcon.ANGLE_DOUBLE_LEFT)), "root.helpFirstStepButton")); + acc.add(new HelpContentField("root.previousStepButton", + new Button(new Icon(VaadinIcon.ANGLE_LEFT)), "root.helpPreviousStepButton")); + acc.add(new HelpContentField("root.nextStepButton", + new Button(new Icon(VaadinIcon.ANGLE_RIGHT)), "root.helpNextStepButton")); + acc.add(new HelpContentField("root.lastStepButton", + new Button(new Icon(VaadinIcon.ANGLE_DOUBLE_RIGHT)), "root.helpLastStepButton")); + acc.add(new HelpContentField("root.shareButton", + new Button(new Icon(VaadinIcon.CONNECT)), "root.helpShareButton")); acc.setWidthFull(); return acc; } diff --git a/src/main/resources/language/translation_de.properties b/src/main/resources/language/translation_de.properties index 278ebbc..be32670 100644 --- a/src/main/resources/language/translation_de.properties +++ b/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. -root.helpExample=Durch klicken des Knopfes öffnet sich der Beispiel-Dialog. \ +Außerdem kann durch Klicken des Kopieren-Knopfs der Latex-Code der Regel in die Zwischenablage kopiert werden. +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}\ diff --git a/src/main/resources/language/translation_en.properties b/src/main/resources/language/translation_en.properties index 2ff512a..60bf8ca 100644 --- a/src/main/resources/language/translation_en.properties +++ b/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/ 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}\