mirror of
https://gitlab.kit.edu/uskyk/typicalc.git
synced 2024-11-09 10:50:42 +00:00
added close buttons to dialog
This commit is contained in:
parent
a7e8a24d77
commit
92d0e77bb6
13
frontend/styles/view/main/example-dialog.css
Normal file
13
frontend/styles/view/main/example-dialog.css
Normal 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;
|
||||
}
|
@ -26,6 +26,12 @@
|
||||
min-width: 110px;
|
||||
}
|
||||
|
||||
#closeIcon {
|
||||
right: 0;
|
||||
position: absolute;
|
||||
bottom: 2.1em;
|
||||
}
|
||||
|
||||
.help-field {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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"));
|
||||
|
@ -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.
|
||||
*/
|
||||
|
Loading…
Reference in New Issue
Block a user