From 92d0e77bb6b76f8acf3d6f132b1a3aaedc2a42d9 Mon Sep 17 00:00:00 2001 From: uogau Date: Fri, 5 Mar 2021 13:26:22 +0100 Subject: [PATCH] added close buttons to dialog --- frontend/styles/view/main/example-dialog.css | 13 ++++++++++ frontend/styles/view/main/help-dialog.css | 6 +++++ .../view/main/type-assumptions-area.css | 14 ++++++++++ frontend/styles/view/share-dialog.css | 14 ++++++++++ .../typeinferencecontent/ShareDialog.java | 26 +++++++++++++++---- .../kit/typicalc/view/main/ExampleDialog.java | 22 +++++++++++++--- .../kit/typicalc/view/main/HelpDialog.java | 9 ++++++- .../view/main/TypeAssumptionsArea.java | 18 +++++++++++-- 8 files changed, 111 insertions(+), 11 deletions(-) create mode 100644 frontend/styles/view/main/example-dialog.css diff --git a/frontend/styles/view/main/example-dialog.css b/frontend/styles/view/main/example-dialog.css new file mode 100644 index 0000000..234a86f --- /dev/null +++ b/frontend/styles/view/main/example-dialog.css @@ -0,0 +1,13 @@ +#headingLayout { + width: 100%; + display: flex; + position: relative; + align-items: center; + justify-content: center; +} + +#closeIcon { + right: 0; + position: absolute; + bottom: 2.1em; +} \ 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 1129295..bcfc501 100644 --- a/frontend/styles/view/main/help-dialog.css +++ b/frontend/styles/view/main/help-dialog.css @@ -26,6 +26,12 @@ min-width: 110px; } +#closeIcon { + right: 0; + position: absolute; + bottom: 2.1em; +} + .help-field { justify-content: center; align-items: center; diff --git a/frontend/styles/view/main/type-assumptions-area.css b/frontend/styles/view/main/type-assumptions-area.css index f78e02b..e603e17 100644 --- a/frontend/styles/view/main/type-assumptions-area.css +++ b/frontend/styles/view/main/type-assumptions-area.css @@ -5,6 +5,20 @@ padding: 0; } +#headingLayout { + width: 100%; + display: flex; + position: relative; + align-items: center; + justify-content: center; +} + +#closeIcon { + right: 0; + position: absolute; + bottom: 2.1em; +} + #assButtons { display: flex; justify-content: center; diff --git a/frontend/styles/view/share-dialog.css b/frontend/styles/view/share-dialog.css index 6812a99..f306841 100644 --- a/frontend/styles/view/share-dialog.css +++ b/frontend/styles/view/share-dialog.css @@ -9,3 +9,17 @@ .share-dialog-field { width: 100%; } + +#headingLayout { + width: 100%; + display: flex; + position: relative; + align-items: center; + justify-content: center; +} + +#closeIcon { + right: 0; + position: absolute; + bottom: 2.1em; +} 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 6805212..dc835c7 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 @@ -3,6 +3,9 @@ package edu.kit.typicalc.view.content.typeinferencecontent; import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.dialog.Dialog; import com.vaadin.flow.component.html.H3; +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.textfield.TextArea; import com.vaadin.flow.component.textfield.TextField; @@ -15,9 +18,11 @@ import com.vaadin.flow.i18n.LocaleChangeObserver; @CssImport("./styles/view/share-dialog.css") public class ShareDialog extends Dialog implements LocaleChangeObserver { + private static final String HEADING_LAYOUT_ID = "headingLayout"; private static final String SHARE_DIALOG_ID = "shareDialog"; private static final String LAYOUT_ID = "share-dialog-layout"; private static final String FIELD_CLASS = "share-dialog-field"; + private static final String CLOSE_ICON_ID = "closeIcon"; private final TextField urlField; private final TextField packageField; @@ -34,12 +39,21 @@ 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) { - VerticalLayout layout = new VerticalLayout(); - layout.setId(LAYOUT_ID); - add(layout); - setId(SHARE_DIALOG_ID); + HorizontalLayout headingLayout = new HorizontalLayout(); + headingLayout.setId(HEADING_LAYOUT_ID); heading = new H3(); + Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL); + closeIcon.addClickListener(event -> this.close()); + closeIcon.setId(CLOSE_ICON_ID); + + headingLayout.add(heading); + headingLayout.add(closeIcon); + + VerticalLayout layout = new VerticalLayout(); + layout.setId(LAYOUT_ID); + setId(SHARE_DIALOG_ID); + urlField = new TextField(); packageField = new TextField(); latexArea = new TextArea(); @@ -51,7 +65,9 @@ public class ShareDialog extends Dialog implements LocaleChangeObserver { latexArea.setValue(latexCode); latexArea.setClassName(FIELD_CLASS); - layout.add(heading, urlField, packageField, latexArea); + layout.add(urlField, packageField, latexArea); + + add(headingLayout, layout); } diff --git a/src/main/java/edu/kit/typicalc/view/main/ExampleDialog.java b/src/main/java/edu/kit/typicalc/view/main/ExampleDialog.java index d53b970..023213a 100644 --- a/src/main/java/edu/kit/typicalc/view/main/ExampleDialog.java +++ b/src/main/java/edu/kit/typicalc/view/main/ExampleDialog.java @@ -1,8 +1,12 @@ 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.dialog.Dialog; import com.vaadin.flow.component.html.H3; +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.i18n.LocaleChangeEvent; import com.vaadin.flow.i18n.LocaleChangeObserver; @@ -13,11 +17,14 @@ import java.util.function.Consumer; * Contains all predefined examples as buttons. * Clicking on a button inserts the example string into the input field. */ +@CssImport("./styles/view/main/example-dialog.css") public class ExampleDialog extends Dialog implements LocaleChangeObserver { private static final long serialVersionUID = 8718432784530464215L; + private static final String HEADING_LAYOUT_ID = "headingLayout"; private static final String EXAMPLE_DIALOG_ID = "exampleDialog"; + private static final String CLOSE_ICON_ID = "closeIcon"; private final H3 instruction; @@ -27,10 +34,19 @@ public class ExampleDialog extends Dialog implements LocaleChangeObserver { * @param callback function to handle the selected lambda term */ protected ExampleDialog(Consumer callback) { + instruction = new H3(); + HorizontalLayout headingLayout = new HorizontalLayout(); + headingLayout.setId(HEADING_LAYOUT_ID); + + Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL); + closeIcon.addClickListener(event -> this.close()); + closeIcon.setId(CLOSE_ICON_ID); + + headingLayout.add(instruction); + headingLayout.add(closeIcon); + String[] examples = getTranslation("root.exampleTerms").split(","); VerticalLayout layout = new VerticalLayout(); - instruction = new H3(); - layout.add(instruction); for (String term : examples) { Button button = new Button(term); button.addClickListener(click -> { @@ -40,7 +56,7 @@ public class ExampleDialog extends Dialog implements LocaleChangeObserver { button.setId(term); // needed for integration test layout.add(button); } - add(layout); + add(headingLayout, layout); setId(EXAMPLE_DIALOG_ID); } 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 e66481a..e5cea60 100644 --- a/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java +++ b/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java @@ -34,6 +34,7 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver { private static final String LANGUAGE_SELECT_ID = "languageSelect"; private static final String ACCORDION_ID = "accordion"; private static final String TYPE_BUTTON_COPY_ID = "typeButtonCopy"; + private static final String CLOSE_ICON_ID = "closeIcon"; private final H3 heading; private final Select languageSelect; @@ -48,12 +49,18 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver { renderer = item -> getTranslation("root." + item.getDisplayLanguage(Locale.ENGLISH).toLowerCase()); heading = new H3(); headingLayout.setId(HEADING_LAYOUT_ID); + languageSelect = new Select<>(Locale.GERMAN, Locale.ENGLISH); languageSelect.setTextRenderer(renderer); languageSelect.setValue(UI.getCurrent().getLocale()); languageSelect.addValueChangeListener(event -> UI.getCurrent().getSession().setLocale(event.getValue())); languageSelect.setId(LANGUAGE_SELECT_ID); - headingLayout.add(heading, languageSelect); + + Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL); + closeIcon.addClickListener(event -> this.close()); + closeIcon.setId(CLOSE_ICON_ID); + + headingLayout.add(heading, languageSelect, closeIcon); VerticalLayout contentLayout = new VerticalLayout(); typeButtonCopy = new Button(getTranslation("root.typeInfer")); diff --git a/src/main/java/edu/kit/typicalc/view/main/TypeAssumptionsArea.java b/src/main/java/edu/kit/typicalc/view/main/TypeAssumptionsArea.java index 79f6bb6..95ca760 100644 --- a/src/main/java/edu/kit/typicalc/view/main/TypeAssumptionsArea.java +++ b/src/main/java/edu/kit/typicalc/view/main/TypeAssumptionsArea.java @@ -32,9 +32,11 @@ public class TypeAssumptionsArea extends Dialog implements LocaleChangeObserver /* * IDs for the imported .css-file */ + private static final String HEADING_LAYOUT_ID = "headingLayout"; private static final String ASS_LAYOUT_ID = "assLayout"; private static final String ASS_BUTTONS_ID = "assButtons"; private static final String ASS_CONTAINER_ID = "assContainer"; + private static final String CLOSE_ICON_ID = "closeIcon"; private final H3 heading; private final VerticalLayout assumptionContainer; @@ -71,8 +73,9 @@ public class TypeAssumptionsArea extends Dialog implements LocaleChangeObserver assumptionContainer.setId(ASS_CONTAINER_ID); initializeWithAssumptions(types); - layout.add(heading, buttons, assumptionContainer); - add(layout); + layout.add(buttons, assumptionContainer); + HorizontalLayout headingLayout = makeHeader(); + add(headingLayout, layout); // attach and trigger javascript event listener after reopening the dialog addOpenedChangeListener(e -> { if (e.isOpened()) { @@ -82,6 +85,17 @@ public class TypeAssumptionsArea extends Dialog implements LocaleChangeObserver ); } + private HorizontalLayout makeHeader() { + HorizontalLayout headingLayout = new HorizontalLayout(); + headingLayout.setId(HEADING_LAYOUT_ID); + + Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL); + closeIcon.addClickListener(event -> this.close()); + closeIcon.setId(CLOSE_ICON_ID); + headingLayout.add(heading); + headingLayout.add(closeIcon); + return headingLayout; + } /** * Creates a new empty TypeAssumptionsArea. */