Consistent naming of css ids and classes

This commit is contained in:
Moritz Dieing 2021-08-31 10:56:03 +02:00
parent 5277feafcf
commit 684327d63a
25 changed files with 103 additions and 161 deletions

View File

@ -8,7 +8,7 @@ function changeEvent(element: HTMLElement, inputID: string) {
// @ts-ignore
window.buttonListener = (buttonID: string, inputID: string) => {
let replacement = (buttonID === "lambdaButton") ? 'λ' : '∀';
let replacement = (buttonID === "lambda-button") ? 'λ' : '∀';
const button = document.getElementById(buttonID)!;
const input = document.getElementById(inputID)!;
button.addEventListener('click', () => {

View File

@ -10,6 +10,12 @@ vaadin-button, iron-icon, vaadin-drawer-toggle {
cursor: pointer;
}
#closeIcon:hover {
.close-icon {
right: 0;
position: absolute;
bottom: 2.1em;
}
.close-icon:hover {
color: rgb(120, 120, 120);
}

View File

@ -1,15 +1,15 @@
#errorViewContent {
#error-view-content {
align-items: center;
background-color: #ff0000BB;
}
#errorAdditionalInfo {
#error-additional-info {
padding: 0;
margin: 0;
color: white;
font-family: monospace;
}
#errorSummary {
#error-summary {
color: white;
}

View File

@ -1,9 +1,9 @@
#slideLayout {
#slide-layout {
align-items: center;
justify-content: center;
padding: 0;
}
#explanation {
#slide-explanation {
margin-top: 5px;
}

View File

@ -1,4 +1,4 @@
#headingLayout {
#example-heading-layout {
width: 100%;
display: flex;
position: relative;
@ -6,13 +6,7 @@
justify-content: center;
}
#closeIcon {
right: 0;
position: absolute;
bottom: 2.1em;
}
#exampleContainer {
#example-container {
padding: 0;
margin: 0;
}

View File

@ -1,4 +1,4 @@
#contentLayout {
#help-content-layout {
width: 1000px !important;
padding-left: 0;
padding-right: 0;
@ -7,7 +7,7 @@
align-items: center;
}
#headingLayout {
#help-heading-layout {
width: 100%;
display: flex;
position: relative;
@ -20,13 +20,7 @@
width: 100%;
}
#closeIcon {
right: 0;
position: absolute;
bottom: 2.1em;
}
#typicalcInfo {
#typicalc-info {
padding-top: 24px;
padding-bottom: 24px;
text-align: center;

View File

@ -1,4 +1,4 @@
#inferenceRuleField {
#inference-rule-field {
display: flex;
align-items: center;
border: 2px solid #e8e8e8;
@ -9,7 +9,7 @@
padding: 0px;
}
#headerField {
#inference-rule-header {
border-bottom: 2px solid #e8e8e8;
background-color: #f8f8f8;
display: grid;
@ -20,16 +20,16 @@
border-radius: 5px 5px 0 0;
}
#ruleName {
#rule-name {
margin: 1px;
}
#copyButton {
#copy-button {
margin-left: auto;
margin-right: 10%;
}
#main {
#inference-rule-content {
align-items: center;
justify-content: center;
width: 100%;

View File

@ -1,21 +1,15 @@
#infoHeader {
#info-header {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
#infoContent {
#info-content {
align-items: flex-start;
}
#inputSyntax {
#input-syntax {
font-family: "Courier";
margin-top: 1.5em;
}
#closeIcon {
right: 0;
position: absolute;
bottom: 2.1em;
}

View File

@ -4,12 +4,6 @@
padding-bottom: 0;
}
#inputBar {
align-items: flex-end;
padding: 0 1em;
margin-top: -0.5em;
}
#ass-input-field {
flex-grow: 1;
padding-top: 0;

View File

@ -4,38 +4,30 @@
align-items: center;
overflow-x: auto;
overflow-y: hidden;
padding: 0.25em;
}
#header img {
border-radius: 50%;
height: var(--lumo-size-s);
margin-left: auto;
margin-right: var(--lumo-space-m);
overflow: hidden;
background-color: var(--lumo-contrast);
}
#viewTitle {
#view-title {
font-size: var(--lumo-font-size-l);
cursor: pointer;
align-self: center;
margin: 0 47% 0.5% 0;
}
#viewTitle a {
#view-title a {
color: var(--lumo-header-text-color);
}
#inputBar {
#input-bar {
width: 75%;
flex-grow: 1;
align-items: flex-end;
padding: 0 1em;
margin-top: -0.5em;
justify-content: end;
}
#helpIcon {
#help-icon {
color: white;
align-self: center;
}

View File

@ -12,7 +12,7 @@
width: 100%;
}
#headingLayout {
#share-heading-layout {
width: 100%;
max-height: 10%;
display: flex;
@ -22,28 +22,6 @@
padding-bottom: 12px;
}
#closeIcon {
right: 0;
position: absolute;
bottom: 2.1em;
}
#url-area-layout {
width: 100%;
}
#package-area-tree-layout {
width: 100%;
}
#package-area-unification-layout {
width: 100%;
}
#latex-area-tree-layout {
width: 100%;
}
#latex-area-unification-layout {
width: 100%;
.copy-button-layout {
width: 100%;
}

View File

@ -1,25 +1,25 @@
#startPage-Heading {
#start-page-heading {
margin-top: 20px;
margin-bottom: 10px;
font-size: 50px;
}
#horizontalLine {
#horizontal-line {
align-self: center;
width: 55em;
max-width: 100%;
min-height: 1px;
}
#textContainer {
#start-text-container {
max-width: 55em;
}
#linkContainer {
#start-link-container {
margin: 0;
}
#slideProgress {
#slide-progress {
width: 55em;
max-width: 100%;
min-height: 1px;
@ -27,7 +27,7 @@
margin-bottom: 0;
}
#startPage {
#start-page {
padding: 0;
display: flex;
justify-content: space-between;
@ -36,16 +36,16 @@
height: 100%;
}
#slideShow {
#slide-show {
height: var(--paper-slide-height);
width: 100%;
}
#startPage::before {
#start-page::before {
position: absolute;
}
#startPage #content {
#start-page #start-page-content {
width: 100%;
overflow-y: auto;
margin-top: 0;

View File

@ -77,7 +77,7 @@ tc-explanation {
margin-top: 0;
}
#horizontalLine {
#horizontal-line {
align-self: center;
width: auto;
min-height: 1px;

View File

@ -23,9 +23,9 @@ import java.util.Optional;
public class ErrorView extends VerticalLayout implements LocaleChangeObserver {
private static final long serialVersionUID = 239587L;
private static final String ERROR_CONTENT_ID = "errorViewContent";
private static final String ADDITIONAL_INFO_ID = "errorAdditionalInfo";
private static final String ERROR_SUMMARY_ID = "errorSummary";
private static final String ERROR_CONTENT_ID = "error-view-content";
private static final String ADDITIONAL_INFO_ID = "error-additional-info";
private static final String ERROR_SUMMARY_ID = "error-summary";
private final H3 heading;
private final Div errorMessage;

View File

@ -16,8 +16,8 @@ public class ImageSlide extends Slide implements LocaleChangeObserver {
private static final long serialVersionUID = 232255503611054445L;
private static final String SLIDE_LAYOUT_ID = "slideLayout";
private static final String EXPLANATION_ID = "explanation";
private static final String SLIDE_LAYOUT_ID = "slide-layout";
private static final String EXPLANATION_ID = "slide-explanation";
private final VerticalLayout slideLayout;
private final Span explanation;

View File

@ -27,15 +27,15 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
private static final long serialVersionUID = 2502750919087936406L;
private static final String CONTENT_ID = "content";
private static final String HEADING_ID = "startPage-Heading";
private static final String H_LINE_ID = "horizontalLine";
private static final String TEXT_CONTAINER_ID = "textContainer";
private static final String LINK_CONTAINER_ID = "linkContainer";
private static final String SLIDE_PROGRESS_ID = "slideProgress";
private static final String CONTROL_PANEL_ID = "controlPanel";
private static final String START_PAGE_ID = "startPage";
private static final String SLIDE_SHOW_ID = "slideShow";
private static final String CONTENT_ID = "start-page-content";
private static final String HEADING_ID = "start-page-heading";
private static final String H_LINE_ID = "horizontal-line";
private static final String TEXT_CONTAINER_ID = "start-text-container";
private static final String LINK_CONTAINER_ID = "start-link-container";
private static final String SLIDE_PROGRESS_ID = "slide-progress";
private static final String CONTROL_PANEL_ID = "control-panel";
private static final String START_PAGE_ID = "start-page";
private static final String SLIDE_SHOW_ID = "slide-show";
private static final String DOT = ".";
@ -62,10 +62,8 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
H1 heading = new H1(getTranslation("root.typicalc"));
heading.setId(HEADING_ID);
Hr line1 = new Hr();
line1.setId(H_LINE_ID);
Hr line2 = new Hr();
line2.setId(H_LINE_ID);
Hr line = new Hr();
line.setId(H_LINE_ID);
introduction = new Span();
linkText = new Text(getTranslation("root.linkText"));
@ -76,7 +74,7 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
slideProgress = new ProgressBar(slideShow.getStartPosition(), slideShow.getSlides().length - 1);
slideProgress.setId(SLIDE_PROGRESS_ID);
content.add(heading, line1, textContainer, slideProgress, slideShow, line2);
content.add(heading, textContainer, slideProgress, slideShow, line);
Footer footer = new Footer(controlPanel);
add(content, footer);

View File

@ -27,16 +27,12 @@ import java.util.regex.Pattern;
@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 HEADING_LAYOUT_ID = "share-heading-layout";
private static final String SHARE_DIALOG_ID = "share-dialog";
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 static final String URL_AREA_LAYOUT_ID = "url-area-layout";
private static final String PACKAGE_AREA_TREE_LAYOUT_ID = "package-area-tree-layout";
private static final String PACKAGE_AREA_UNIFICATION_LAYOUT_ID = "package-area-unification-layout";
private static final String LATEX_AREA_TREE_LAYOUT_ID = "latex-area-tree-layout";
private static final String LATEX_AREA_UNIFICATION_LAYOUT_ID = "latex-area-unification-layout";
private static final String CLOSE_ICON_CLASS = "close-icon";
private static final String COPY_BUTTON_LAYOUT_CLASS = "copy-button-layout";
private static final String RIGHT_ARROW_WHITE = "\\\\rightwhitearrow";
@ -62,7 +58,7 @@ public class ShareDialog extends Dialog implements LocaleChangeObserver {
heading = new H3();
Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL);
closeIcon.addClickListener(event -> this.close());
closeIcon.setId(CLOSE_ICON_ID);
closeIcon.setClassName(CLOSE_ICON_CLASS);
headingLayout.add(heading);
headingLayout.add(closeIcon);
@ -91,15 +87,15 @@ public class ShareDialog extends Dialog implements LocaleChangeObserver {
Button copyButtonLatexAreaUnification = makeCopyButton(latexAreaUnification.getValue());
HorizontalLayout urlLayout = new HorizontalLayout();
urlLayout.setId(URL_AREA_LAYOUT_ID);
urlLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
HorizontalLayout packageAreaTreeLayout = new HorizontalLayout();
packageAreaTreeLayout.setId(PACKAGE_AREA_TREE_LAYOUT_ID);
packageAreaTreeLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
HorizontalLayout latexAreaTreeLayout = new HorizontalLayout();
latexAreaTreeLayout.setId(LATEX_AREA_TREE_LAYOUT_ID);
latexAreaTreeLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
HorizontalLayout packageAreaUnificationLayout = new HorizontalLayout();
packageAreaUnificationLayout.setId(PACKAGE_AREA_UNIFICATION_LAYOUT_ID);
packageAreaUnificationLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
HorizontalLayout latexAreaUnificationLayout = new HorizontalLayout();
latexAreaUnificationLayout.setId(LATEX_AREA_UNIFICATION_LAYOUT_ID);
latexAreaUnificationLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
urlLayout.add(urlField, copyButtonUrl);
packageAreaTreeLayout.add(packageAreaTree, copyButtonPackageAreaTree);

View File

@ -57,7 +57,7 @@ public class TypeInferenceView extends VerticalLayout
private static final String HOVER_BUTTON_CLASS = "hovering-button";
private static final String RULES_BUTTON_ID = "rules-button";
private static final String EXPLANATION_TEXT_BUTTON_ID = "explanation-text-button";
private static final String H_LINE_ID = "horizontalLine";
private static final String H_LINE_ID = "horizontal-line";
private static final String FOOTER_ID = "footer";
private List<Integer> treeNumbers;

View File

@ -24,10 +24,10 @@ import com.vaadin.flow.i18n.LocaleChangeObserver;
public class ExampleDialog extends Dialog implements LocaleChangeObserver {
private static final long serialVersionUID = -428675165625776559L;
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 static final String EXAMPLE_CONTAINER_ID = "exampleContainer";
private static final String HEADING_LAYOUT_ID = "example-heading-layout";
private static final String EXAMPLE_DIALOG_ID = "example-dialog";
private static final String CLOSE_ICON_CLASS = "close-icon";
private static final String EXAMPLE_CONTAINER_ID = "example-container";
private final H3 instruction;
private final transient Consumer<Pair<String, String>> setExamples;
@ -49,7 +49,7 @@ public class ExampleDialog extends Dialog implements LocaleChangeObserver {
Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL);
closeIcon.addClickListener(event -> this.close());
closeIcon.setId(CLOSE_ICON_ID);
closeIcon.setClassName(CLOSE_ICON_CLASS);
headingLayout.add(instruction);
headingLayout.add(closeIcon);

View File

@ -23,11 +23,11 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver {
/*
* IDs for the imported .css-file
*/
private static final String HEADING_LAYOUT_ID = "headingLayout";
private static final String CONTENT_LAYOUT_ID = "contentLayout";
private static final String HEADING_LAYOUT_ID = "help-heading-layout";
private static final String CONTENT_LAYOUT_ID = "help-content-layout";
private static final String ACCORDION_ID = "accordion";
private static final String CLOSE_ICON_ID = "closeIcon";
private static final String TYPICALC_INFO_ID = "typicalcInfo";
private static final String CLOSE_ICON_CLASS = "close-icon";
private static final String TYPICALC_INFO_ID = "typicalc-info";
private final H3 heading;
private final Paragraph typicalcInfo;
@ -43,7 +43,7 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver {
Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL);
closeIcon.addClickListener(event -> this.close());
closeIcon.setId(CLOSE_ICON_ID);
closeIcon.setClassName(CLOSE_ICON_CLASS);
headingLayout.add(heading, closeIcon);

View File

@ -28,11 +28,11 @@ public class InferenceRuleField extends VerticalLayout implements LocaleChangeOb
/*
* IDs for the imported .css-file
*/
private static final String INFERENCE_RULE_FIELD_ID = "inferenceRuleField";
private static final String HEADER_ID = "headerField";
private static final String MAIN_ID = "main";
private static final String RULE_NAME_ID = "ruleName";
private static final String COPY_BUTTON_ID = "copyButton";
private static final String INFERENCE_RULE_FIELD_ID = "inference-rule-field";
private static final String HEADER_ID = "inference-rule-header";
private static final String MAIN_ID = "inference-rule-content";
private static final String RULE_NAME_ID = "rule-name";
private static final String COPY_BUTTON_ID = "copy-button";
private final String nameKey;
private final Button copyButton;
@ -60,11 +60,10 @@ public class InferenceRuleField extends VerticalLayout implements LocaleChangeOb
ruleName.setId(RULE_NAME_ID);
header.add(ruleName, copyButton);
VerticalLayout main = new VerticalLayout();
main.setId(MAIN_ID);
MathjaxDisplay rule = new MathjaxDisplay(latex);
main.add(rule);
add(header, main);
VerticalLayout content = new VerticalLayout(rule);
content.setId(MAIN_ID);
add(header, content);
setId(INFERENCE_RULE_FIELD_ID);
}

View File

@ -7,7 +7,7 @@ import com.vaadin.flow.i18n.LocaleChangeEvent;
import com.vaadin.flow.i18n.LocaleChangeObserver;
public class InfoContent extends VerticalLayout implements LocaleChangeObserver {
private static final String GRAMMAR_ID = "inputSyntax";
private static final String GRAMMAR_ID = "input-syntax";
private final Span termExplanation;
private final Paragraph termSyntax;

View File

@ -18,9 +18,9 @@ public class InfoDialog extends Dialog {
/*
* IDs for the imported .css-file
*/
private static final String INFO_HEADER_ID = "infoHeader";
private static final String INFO_CONTENT_ID = "infoContent";
private static final String CLOSE_ICON_ID = "closeIcon";
private static final String INFO_HEADER_ID = "info-header";
private static final String INFO_CONTENT_ID = "info-content";
private static final String CLOSE_ICON_CLASS = "close-icon";
/**
* Creates new InfoDialog.
@ -30,7 +30,7 @@ public class InfoDialog extends Dialog {
HorizontalLayout infoHeader = new HorizontalLayout(heading);
Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL);
closeIcon.addClickListener(event -> this.close());
closeIcon.setId(CLOSE_ICON_ID);
closeIcon.setClassName(CLOSE_ICON_CLASS);
infoHeader.setId(INFO_HEADER_ID);
infoHeader.add(closeIcon);

View File

@ -30,10 +30,9 @@ public class InputBar extends HorizontalLayout implements LocaleChangeObserver {
* IDs for the imported .css-file
*/
public static final String TERM_INPUT_FIELD_ID = "term-input-field";
private static final String INPUT_BAR_ID = "inputBar";
private static final String INFER_BUTTON_ID = "inferButton";
private static final String EXAMPLE_BUTTON_ID = "exampleButton";
private static final String LAMBDA_BUTTON_ID = "lambdaButton";
private static final String INFER_BUTTON_ID = "infer-button";
private static final String EXAMPLE_BUTTON_ID = "example-button";
private static final String LAMBDA_BUTTON_ID = "lambda-button";
private static final String QUANTIFIER_BUTTON_ID = "quantifier-button";
public static final String ASS_INPUT_FIELD_ID = "ass-input-field";
@ -55,8 +54,6 @@ public class InputBar extends HorizontalLayout implements LocaleChangeObserver {
protected InputBar(Consumer<Pair<String, String>> callback) {
this.callback = callback;
setId(INPUT_BAR_ID);
infoIcon = new Button(new Icon(VaadinIcon.INFO_CIRCLE));
infoIcon.addClickListener(event -> onInfoIconClick());

View File

@ -34,9 +34,9 @@ public class UpperBar extends VerticalLayout implements LocaleChangeObserver {
/*
* IDs for the imported .css-file
*/
private static final String VIEW_TITLE_ID = "viewTitle";
private static final String INPUT_BAR_ID = "inputBar";
private static final String HELP_ICON_ID = "helpIcon";
private static final String VIEW_TITLE_ID = "view-title";
private static final String INPUT_BAR_ID = "input-bar";
private static final String HELP_ICON_ID = "help-icon";
private static final String UPPER_BAR_ID = "header";
private static final String TOP_LINE_ID = "top-line";
private static final String LANGUAGE_SELECT_ID = "language-select";