added close buttons to dialog

This commit is contained in:
uogau 2021-03-05 13:26:22 +01:00
parent a7e8a24d77
commit 92d0e77bb6
8 changed files with 111 additions and 11 deletions

View File

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

View File

@ -26,6 +26,12 @@
min-width: 110px;
}
#closeIcon {
right: 0;
position: absolute;
bottom: 2.1em;
}
.help-field {
justify-content: center;
align-items: center;

View File

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

View File

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

View File

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

View File

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

View File

@ -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<Locale> 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"));

View File

@ -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.
*/