mirror of
https://gitlab.kit.edu/uskyk/typicalc.git
synced 2024-11-09 19:00:48 +00:00
Move style to CSS files
This commit is contained in:
parent
81b74bd92d
commit
5a9903e754
3
frontend/styles/view/error-notification.css
Normal file
3
frontend/styles/view/error-notification.css
Normal file
@ -0,0 +1,3 @@
|
||||
#errorNotificationContent {
|
||||
align-items: center;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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%;
|
||||
}
|
3
frontend/styles/view/not-found.css
Normal file
3
frontend/styles/view/not-found.css
Normal file
@ -0,0 +1,3 @@
|
||||
#not-found {
|
||||
align-items: center;
|
||||
}
|
11
frontend/styles/view/share-dialog.css
Normal file
11
frontend/styles/view/share-dialog.css
Normal file
@ -0,0 +1,11 @@
|
||||
#share-dialog {
|
||||
width: 80%;
|
||||
}
|
||||
#share-dialog-layout {
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.share-dialog-field {
|
||||
width: 100%;
|
||||
}
|
@ -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 {
|
||||
|
@ -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();
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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();
|
||||
|
@ -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);
|
||||
|
@ -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));
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user