DrawerContent und RuleField erweitert

frontend/styles/view/main/drawer-content.css

@@ -0,0 +1,11 @@
+#ruleContainer {
+	overflow: auto;
+	margin: 0;
+	height: 100%;
+	max-width: 256px;
+	padding: 0.5em 0.5em;
+}
+
+#drawerContent {
+	padding: 0.5em 0;
+}

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

@@ -1,10 +1,41 @@
 package edu.kit.typicalc.view.main;
 
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.html.H3;
+import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.i18n.LocaleChangeEvent;
+import com.vaadin.flow.i18n.LocaleChangeObserver;
 
-public class DrawerContent extends VerticalLayout {
+@CssImport("./styles/view/main/drawer-content.css")
+public class DrawerContent extends VerticalLayout implements LocaleChangeObserver {
 
+    private static final long serialVersionUID = -5751275682270653335L;
+    
+    private static final String RULE_CONTAINER_ID = "ruleContainer";
+    private static final String DRAWER_CONTENT_ID = "drawerContent";
+
+    private final H3 heading;
+    private final VerticalLayout ruleContainer;
+    
     public DrawerContent() {
-        //TODO implement
+        heading = new H3(getTranslation("root.inferenceRules"));
+        ruleContainer = new VerticalLayout();
+        ruleContainer.setId(RULE_CONTAINER_ID);
+        initRuleContainer();
+        add(heading, ruleContainer);
+        setWidthFull();
+        setHeightFull();
+        setAlignItems(FlexComponent.Alignment.CENTER);
+        setId(DRAWER_CONTENT_ID);
+    }
+    
+    private void initRuleContainer() {
+	ruleContainer.add(new InferenceRuleField(getTranslation("abs-rule"), "root.absRule"));
+    }
+
+    @Override
+    public void localeChange(LocaleChangeEvent event) {
+	heading.setText(getTranslation("root.inferenceRules"));
     }
 }

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

@@ -11,9 +11,12 @@ import java.util.List;
 import java.util.function.Consumer;
 
 public class ExampleDialog extends Dialog implements LocaleChangeObserver {
+    
+    private static final long serialVersionUID = 8718432784530464215L;
+    
     private static final List<String> EXAMPLES =
             List.of("λx.x", "λx.λy.y x", "λx.λy.y (x x)", "let f = λx. g y y in f 3", "(λx.x x) (λx.x x)");
-    private Paragraph instruction;
+    private final Paragraph instruction;
 
     public ExampleDialog(Consumer<String> callback) {
         VerticalLayout layout = new VerticalLayout();

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

@@ -4,27 +4,39 @@ import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.H5;
+import com.vaadin.flow.component.icon.Icon;
+import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.i18n.LocaleChangeEvent;
 import com.vaadin.flow.i18n.LocaleChangeObserver;
 
 @JsModule("./src/copy-to-clipboard.js")
 public class InferenceRuleField extends Div implements LocaleChangeObserver {
+    //TODO add css!
+    
+    private static final long serialVersionUID = -8551851183297707985L;
+    
+    private static final String INFERENCE_RULE_FIELD_ID = "inferenceRuleField";
     
-    private final String latex;
     private final String nameKey;
     private final Button copyButton;
+    private final H5 ruleName;
+    private final MathjaxDisplay rule;
     
     public InferenceRuleField(final String latex, final String nameKey) {
-        this.latex = latex;
         this.nameKey = nameKey;
-        this.copyButton = new Button(getTranslation("root.copyLatex"), 
-                event -> UI.getCurrent().getPage().executeJs("window.copyToClipboard($0)", latex));
+        this.ruleName = new H5(getTranslation(nameKey));
+        this.copyButton = new Button(getTranslation("root.copyLatex"), new Icon(VaadinIcon.CLIPBOARD));
+        this.rule = new MathjaxDisplay(latex); //TODO scale, when method implemented
+        copyButton.addClickListener(event -> UI.getCurrent().getPage().executeJs("window.copyToClipboard($0)", latex));
+        add(ruleName, rule, copyButton);
+        setId(INFERENCE_RULE_FIELD_ID);
     }
 
     @Override
     public void localeChange(LocaleChangeEvent event) {
         copyButton.setText(getTranslation("root.copyLatex"));
-        //TODO use nameKey to change name of rule, when attribute is created
+        ruleName.setText(getTranslation(nameKey));
     }
 
 }

src/main/resources/language/translation_de.properties

@@ -7,6 +7,8 @@ root.selectExample=Beispiel auswählen:
 root.typeInfer=Typisieren
 root.operatingHelp=Bedienhilfen
 root.inputSyntax=Eingabe Syntax
+root.inferenceRules=Ableitungsregeln
+root.absRule=Abs-Regel
 
 abs-rule=\
 \\begin{prooftree}\