Move style to CSS files

This commit is contained in:
Arne Keller 2021-02-13 17:49:29 +01:00
parent 81b74bd92d
commit 5a9903e754
13 changed files with 93 additions and 43 deletions

View File

@ -0,0 +1,3 @@
#errorNotificationContent {
align-items: center;
}

View File

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

View File

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

View File

@ -0,0 +1,3 @@
#not-found {
align-items: center;
}

View File

@ -0,0 +1,11 @@
#share-dialog {
width: 80%;
}
#share-dialog-layout {
align-items: start;
width: 100%;
height: 100%;
}
.share-dialog-field {
width: 100%;
}

View File

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

View File

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

View File

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

View File

@ -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<UnificationError, String> 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();

View File

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

View File

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

View File

@ -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<Locale> languageSelect;
private final ItemLabelGenerator<Locale> 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
}
}

View File

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