diff --git a/frontend/styles/view/error-notification.css b/frontend/styles/view/error-notification.css new file mode 100644 index 0000000..3e6f949 --- /dev/null +++ b/frontend/styles/view/error-notification.css @@ -0,0 +1,3 @@ +#errorNotificationContent { + align-items: center; +} \ No newline at end of file diff --git a/frontend/styles/view/main/help-dialog.css b/frontend/styles/view/main/help-dialog.css index f476f85..aabe842 100644 --- a/frontend/styles/view/main/help-dialog.css +++ b/frontend/styles/view/main/help-dialog.css @@ -1,6 +1,11 @@ +vaadin-dialog-overlay { + width: 1000px; + height: 600px; +} + #contentLayout { - padding-left: 0px; - padding-right: 0px; + padding-left: 0; + padding-right: 0; } #headingLayout { @@ -15,3 +20,8 @@ position: absolute; right: 0; } + +.help-field { + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/frontend/styles/view/main/main-view.css b/frontend/styles/view/main/main-view.css index 60c99b7..e9465c9 100644 --- a/frontend/styles/view/main/main-view.css +++ b/frontend/styles/view/main/main-view.css @@ -1,7 +1,16 @@ #header { - height: var(--lumo-size-xl); + height: var(--lumo-size-xl); } #header h1 { - font-size: var(--lumo-font-size-l); - margin: 0; + font-size: var(--lumo-font-size-l); + margin: 0; } +#start-page { + width: 100%; + height: 100%; + align-items: center; +} +#start-page-scroller { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/frontend/styles/view/not-found.css b/frontend/styles/view/not-found.css new file mode 100644 index 0000000..bf7fdb4 --- /dev/null +++ b/frontend/styles/view/not-found.css @@ -0,0 +1,3 @@ +#not-found { + align-items: center; +} \ No newline at end of file diff --git a/frontend/styles/view/share-dialog.css b/frontend/styles/view/share-dialog.css new file mode 100644 index 0000000..29e004d --- /dev/null +++ b/frontend/styles/view/share-dialog.css @@ -0,0 +1,11 @@ +#share-dialog { + width: 80%; +} +#share-dialog-layout { + align-items: start; + width: 100%; + height: 100%; +} +.share-dialog-field { + width: 100%; +} \ No newline at end of file diff --git a/frontend/styles/view/type-inference.css b/frontend/styles/view/type-inference.css index eb58711..f249cd9 100644 --- a/frontend/styles/view/type-inference.css +++ b/frontend/styles/view/type-inference.css @@ -1,3 +1,14 @@ +#type-inference-view { + width: 100%; + height: 100%; + padding: 0 0 1em; + align-items: center; +} + +#type-inference-view::before { + margin: 0 !important; +} + #scroller { width: 100%; height: 100%; @@ -7,6 +18,8 @@ display: flex; flex-direction: column; height: 100%; + padding: 10px; + box-sizing: border-box; } tc-proof-tree { diff --git a/src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java b/src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java index 3d244bb..3b767eb 100644 --- a/src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java +++ b/src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java @@ -17,6 +17,9 @@ import edu.kit.typicalc.view.main.MainViewImpl; @JsModule("./src/mathjax-setup.js") public class StartPageView extends VerticalLayout implements ControlPanelView { + private static final String ID = "start-page"; + private static final String SCROLLER_ID = "start-page-scroller"; + private final Div content; private final ControlPanel controlPanel; MathjaxProofTree tree; @@ -24,14 +27,12 @@ public class StartPageView extends VerticalLayout implements ControlPanelView { public StartPageView() { // todo implement correctly - setId("start-page"); - setSizeFull(); + setId(ID); content = new Div(); controlPanel = new ControlPanel(this, this); Scroller scroller = new Scroller(content); - scroller.setSizeFull(); + scroller.setId(SCROLLER_ID); scroller.setScrollDirection(Scroller.ScrollDirection.BOTH); - setAlignItems(Alignment.CENTER); add(scroller, controlPanel); disableControlPanel(); createContent(); diff --git a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/ShareDialog.java b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/ShareDialog.java index d43ad5c..9222cbf 100644 --- a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/ShareDialog.java +++ b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/ShareDialog.java @@ -1,8 +1,7 @@ package edu.kit.typicalc.view.content.typeinferencecontent; -import com.vaadin.flow.component.Unit; +import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.dialog.Dialog; -import com.vaadin.flow.component.orderedlayout.FlexComponent; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.textfield.TextArea; import com.vaadin.flow.component.textfield.TextField; @@ -12,8 +11,13 @@ import com.vaadin.flow.i18n.LocaleChangeObserver; /** * Contains GUI elements to extract the URL and LaTeX code of the currently shown proof tree. */ +@CssImport("./styles/view/share-dialog.css") public class ShareDialog extends Dialog implements LocaleChangeObserver { + private static final String ID = "share-dialog"; + private static final String LAYOUT_ID = "share-dialog-layout"; + private static final String FIELD_CLASS = "share-dialog-field"; + private final TextField urlField; private final TextField packageField; private final TextArea latexArea; @@ -27,10 +31,9 @@ public class ShareDialog extends Dialog implements LocaleChangeObserver { * @param latexCode LaTeX code for users to copy into their own LaTeX document(s) */ public ShareDialog(String url, String latexPackages, String latexCode) { - setWidth(80, Unit.PERCENTAGE); + setId(ID); VerticalLayout layout = new VerticalLayout(); - layout.setAlignItems(FlexComponent.Alignment.START); - layout.setSizeFull(); + layout.setId(LAYOUT_ID); add(layout); urlField = new TextField(getTranslation("share.url.label")); @@ -38,12 +41,11 @@ public class ShareDialog extends Dialog implements LocaleChangeObserver { latexArea = new TextArea(getTranslation("share.latex.label")); urlField.setValue(url); + urlField.setClassName(FIELD_CLASS); packageField.setValue(latexPackages); + packageField.setClassName(FIELD_CLASS); latexArea.setValue(latexCode); - - urlField.setWidthFull(); - packageField.setWidthFull(); - latexArea.setWidthFull(); + latexArea.setClassName(FIELD_CLASS); layout.add(urlField, packageField, latexArea); } diff --git a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java index b44a828..b03f40e 100644 --- a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java +++ b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java @@ -40,8 +40,6 @@ public class TypeInferenceView extends VerticalLayout public TypeInferenceView(TypeInfererInterface typeInferer) { setId(ID); - setSizeFull(); - setPadding(false); addAttachListener(this); // TODO: document new translation function // TODO: is Function too limiting? @@ -49,12 +47,10 @@ public class TypeInferenceView extends VerticalLayout error -> getTranslation("root." + error.toString().toLowerCase(Locale.ENGLISH))); content = new Div(); content.setId(CONTENT_ID); - content.getStyle().set("padding", "10px"); ControlPanel controlPanel = new ControlPanel(this, this); Scroller scroller = new Scroller(content); scroller.setId(SCROLLER_ID); scroller.setScrollDirection(Scroller.ScrollDirection.BOTH); - setAlignItems(Alignment.CENTER); add(scroller, controlPanel); treeNumbers = lc.getTreeNumbers(); setContent(); diff --git a/src/main/java/edu/kit/typicalc/view/main/ErrorNotification.java b/src/main/java/edu/kit/typicalc/view/main/ErrorNotification.java index a506e29..d4a171b 100644 --- a/src/main/java/edu/kit/typicalc/view/main/ErrorNotification.java +++ b/src/main/java/edu/kit/typicalc/view/main/ErrorNotification.java @@ -1,33 +1,35 @@ package edu.kit.typicalc.view.main; import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.notification.Notification; import com.vaadin.flow.component.notification.NotificationVariant; -import com.vaadin.flow.component.orderedlayout.FlexComponent; import com.vaadin.flow.component.orderedlayout.VerticalLayout; /** * The notification being displayed on invalid input. */ +@CssImport("./styles/view/error-notification.css") public class ErrorNotification extends Notification { private static final long serialVersionUID = 239587L; private static final String NOTIFICATION_ID = "errorNotification"; + private static final String NOTIFICATION_CONTENT_ID = "errorNotificationContent"; /** * Creates a new ErrorNotification with a specific error message. - * + * * @param errorMessage the error message */ protected ErrorNotification(String errorMessage) { VerticalLayout container = new VerticalLayout(); + container.setId(NOTIFICATION_CONTENT_ID); Span errorSpan = new Span(errorMessage); Button closeButton = new Button(getTranslation("root.close"), event -> this.close()); container.add(errorSpan, closeButton); - container.setAlignItems(FlexComponent.Alignment.CENTER); addThemeVariants(NotificationVariant.LUMO_ERROR); add(container); setPosition(Position.MIDDLE); diff --git a/src/main/java/edu/kit/typicalc/view/main/HelpContentField.java b/src/main/java/edu/kit/typicalc/view/main/HelpContentField.java index a6a19a2..838c3a6 100644 --- a/src/main/java/edu/kit/typicalc/view/main/HelpContentField.java +++ b/src/main/java/edu/kit/typicalc/view/main/HelpContentField.java @@ -4,19 +4,19 @@ 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 String CLASSNAME = "help-field"; + 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; @@ -25,19 +25,18 @@ public class HelpContentField extends AccordionPanel implements LocaleChangeObse 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); + layout.setClassName(CLASSNAME); setContent(layout); } - + @Override public void localeChange(LocaleChangeEvent event) { - setSummaryText(getTranslation(summaryKey)); - content.setText(getTranslation(contentKey)); + 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 e40b55a..648a83c 100644 --- a/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java +++ b/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java @@ -33,7 +33,6 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver { private static final String LANGUAGE_SELECT_ID = "languageSelect"; private final H3 heading; - private Accordion content; private final Select languageSelect; private final ItemLabelGenerator renderer; @@ -53,14 +52,12 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver { headingLayout.add(heading, languageSelect); VerticalLayout contentLayout = new VerticalLayout(); - content = createHelpContent(); + Accordion content = createHelpContent(); contentLayout.add(content); contentLayout.setId(CONTENT_LAYOUT_ID); add(headingLayout, contentLayout); - setWidth("1000px"); // cannot set width per css - setHeight("600px"); // choose according to Accordion height } - + private Accordion createHelpContent() { Accordion acc = new Accordion(); acc.add(new HelpContentField("root.drawer", new DrawerToggle(), "root.helpDrawer")); @@ -76,9 +73,8 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver { 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", + acc.add(new HelpContentField("root.shareButton", new Button(new Icon(VaadinIcon.CONNECT)), "root.helpShareButton")); - acc.setWidthFull(); return acc; } @@ -87,5 +83,6 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver { heading.setText(getTranslation("root.operatingHelp")); languageSelect.setLabel(getTranslation("root.selectLanguage")); languageSelect.setTextRenderer(renderer); + // TODO update help texts } } diff --git a/src/main/java/edu/kit/typicalc/view/main/NotFoundView.java b/src/main/java/edu/kit/typicalc/view/main/NotFoundView.java index 5f0d825..44d462e 100644 --- a/src/main/java/edu/kit/typicalc/view/main/NotFoundView.java +++ b/src/main/java/edu/kit/typicalc/view/main/NotFoundView.java @@ -1,5 +1,6 @@ package edu.kit.typicalc.view.main; +import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.html.H1; import com.vaadin.flow.component.html.H2; import com.vaadin.flow.component.orderedlayout.VerticalLayout; @@ -11,7 +12,10 @@ import com.vaadin.flow.router.ParentLayout; * This is the view used when an unknown URL is requested by the user. */ @ParentLayout(MainViewImpl.class) +@CssImport("./styles/view/not-found.css") public class NotFoundView extends VerticalLayout implements LocaleChangeObserver { + private static final String ID = "not-found"; + private final H1 error404; private final H2 suggestion; @@ -19,10 +23,10 @@ public class NotFoundView extends VerticalLayout implements LocaleChangeObserver * Initializes a new NotFoundView with an error message. */ public NotFoundView() { + setId(ID); error404 = new H1(); suggestion = new H2(); add(error404, suggestion); // todo make beautiful - setAlignItems(Alignment.CENTER); } @Override