German version of help content

This commit is contained in:
Moritz Dieing 2021-02-13 13:31:53 +01:00
parent 4e7d124720
commit 89eca4f33d
4 changed files with 104 additions and 27 deletions

View File

@ -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));
}
}

View File

@ -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;
}

View File

@ -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}\

View File

@ -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}\