Add title attribute to buttons

This commit is contained in:
Moritz Dieing 2021-03-05 17:11:14 +01:00
parent a7eaf394ec
commit d3abb4f10c
6 changed files with 55 additions and 9 deletions

View File

@ -4,11 +4,13 @@ import com.vaadin.flow.component.button.Button;
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.i18n.LocaleChangeEvent;
import com.vaadin.flow.i18n.LocaleChangeObserver;
/**
* Provides a GUI in form of buttons for the user to navigate through steps.
*/
public class ControlPanel extends HorizontalLayout {
public class ControlPanel extends HorizontalLayout implements LocaleChangeObserver {
public static final String ID = "control-panel";
private final Button firstStep;
@ -85,4 +87,13 @@ public class ControlPanel extends HorizontalLayout {
public void setEnabledShareButton(boolean setEnabled) {
share.setEnabled(setEnabled);
}
@Override
public void localeChange(LocaleChangeEvent event) {
share.getElement().setAttribute("title", getTranslation("root.shareButtonTooltip"));
firstStep.getElement().setAttribute("title", getTranslation("root.firstStepTooltip"));
previousStep.getElement().setAttribute("title", getTranslation("root.previousStepTooltip"));
nextStep.getElement().setAttribute("title", getTranslation("root.nextStepTooltip"));
lastStep.getElement().setAttribute("title", getTranslation("root.lastStepTooltip"));
}
}

View File

@ -71,6 +71,7 @@ public class InferenceRuleField extends VerticalLayout implements LocaleChangeOb
@Override
public void localeChange(LocaleChangeEvent event) {
ruleName.setText(getTranslation(nameKey));
copyButton.getElement().setAttribute("title", getTranslation("root.copyLatexTooltip"));
}
}

View File

@ -39,8 +39,10 @@ public class InputBar extends HorizontalLayout implements LocaleChangeObserver {
private static final short MAX_INPUT_LENGTH = 1000;
private final transient Consumer<Pair<String, Map<String, String>>> callback;
private final Button infoIcon;
private final TextField inputField;
private TypeAssumptionsArea typeAssumptionsArea;
private final Button exampleButton;
private final Button inferTypeButton;
private final Button typeAssumptions;
@ -53,7 +55,7 @@ public class InputBar extends HorizontalLayout implements LocaleChangeObserver {
protected InputBar(Consumer<Pair<String, Map<String, String>>> callback) {
this.callback = callback;
Button infoIcon = new Button(new Icon(VaadinIcon.INFO_CIRCLE));
infoIcon = new Button(new Icon(VaadinIcon.INFO_CIRCLE));
infoIcon.addClickListener(event -> onInfoIconClick());
inputField = new TextField();
@ -79,7 +81,7 @@ public class InputBar extends HorizontalLayout implements LocaleChangeObserver {
UI.getCurrent().getPage().executeJs("window.lambdaButtonListener($0, $1);", LAMBDA_BUTTON_ID, INPUT_FIELD_ID);
typeAssumptions = new Button("", event -> onTypeAssumptionsButton());
typeAssumptionsArea = new TypeAssumptionsArea();
Button exampleButton = new Button(VaadinIcon.PAPERCLIP.create(), event -> onExampleButtonClick());
exampleButton = new Button(VaadinIcon.PAPERCLIP.create(), event -> onExampleButtonClick());
exampleButton.setId(EXAMPLE_BUTTON_ID);
inferTypeButton = new Button("", event -> onTypeInferButtonClick());
inferTypeButton.addClickShortcut(Key.ENTER).listenOn(this);
@ -134,5 +136,7 @@ public class InputBar extends HorizontalLayout implements LocaleChangeObserver {
inputField.setPlaceholder(getTranslation("root.inputFieldPlaceholder"));
inferTypeButton.setText(getTranslation("root.typeInfer"));
typeAssumptions.setText(getTranslation("root.typeAssumptions"));
infoIcon.getElement().setAttribute("title", getTranslation("root.inputSyntax"));
exampleButton.getElement().setAttribute("title", getTranslation("root.exampleTooltip"));
}
}

View File

@ -9,6 +9,9 @@ import com.vaadin.flow.component.html.H1;
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.i18n.LocaleChangeEvent;
import com.vaadin.flow.i18n.LocaleChangeObserver;
import edu.kit.typicalc.view.main.MainView.MainViewListener;
import org.apache.commons.lang3.tuple.Pair;
@ -20,7 +23,7 @@ import java.util.function.Consumer;
* Contains all the components constantly shown in the upper part of the webpage.
*/
@CssImport("./styles/view/main/upper-bar.css")
public class UpperBar extends HorizontalLayout {
public class UpperBar extends HorizontalLayout implements LocaleChangeObserver {
private static final long serialVersionUID = -7344967027514015830L;
/*
@ -32,7 +35,9 @@ public class UpperBar extends HorizontalLayout {
private static final String UPPER_BAR_ID = "header";
private final InputBar inputBar;
private final Button toggle;
private final Button helpButton;
private final transient MainViewListener presenter;
private final transient Consumer<Pair<String, Map<String, String>>> setTermInURL;
@ -47,15 +52,16 @@ public class UpperBar extends HorizontalLayout {
this.presenter = presenter;
this.setTermInURL = setTermInURL;
toggle = new DrawerToggle();
H1 viewTitle = new H1(new Anchor("/", getTranslation("root.typicalc")));
viewTitle.setId(VIEW_TITLE_ID);
this.inputBar = new InputBar(this::typeInfer);
inputBar.setId(INPUT_BAR_ID);
Button helpIcon = new Button(new Icon(VaadinIcon.QUESTION_CIRCLE));
helpIcon.addClickListener(event -> onHelpIconClick());
helpIcon.setId(HELP_ICON_ID);
helpButton = new Button(new Icon(VaadinIcon.QUESTION_CIRCLE));
helpButton.addClickListener(event -> onHelpIconClick());
helpButton.setId(HELP_ICON_ID);
add(new DrawerToggle(), viewTitle, inputBar, helpIcon);
add(toggle, viewTitle, inputBar, helpButton);
setId(UPPER_BAR_ID);
getThemeList().set("dark", true);
setSpacing(false);
@ -94,4 +100,10 @@ public class UpperBar extends HorizontalLayout {
Dialog helpDialog = new HelpDialog();
helpDialog.open();
}
@Override
public void localeChange(LocaleChangeEvent event) {
toggle.getElement().setAttribute("title", getTranslation("root.drawerToggleTooltip"));
helpButton.getElement().setAttribute("title", getTranslation("root.helpIconTooltip"));
}
}

View File

@ -101,6 +101,15 @@ root.text7=Der Teilen-Knopfs wird betätigt, um das entsprechende Dialogfenster
root.image8=/carousel/UseExportDialog.png
root.text8=In dem Dialogfenster sind der Permalink zur aktuellen Seite, der Latex-Code des Baums und die im Code \
verwendeten Pakete aufgelistet.
root.copyLatexTooltip=Kopiere LaTeX-code
root.drawerToggleTooltip=Ableitungsregeln
root.helpIconTooltip=Hilfe und Sprachwechsel
root.exampleTooltip=Beispielterme
root.shareButtonTooltip=LaTeX-Code und Permalink
root.lastStepTooltip=Letzter Schritt
root.firstStepTooltip=Erster Schritt
root.previousStepTooltip=Vorheriger Schritt
root.nextStepTooltip=Nächster Schritt
root.absLetLatex=\
\\begin{prooftree}\

View File

@ -94,6 +94,15 @@ root.text7=The share button is clicked to open up the corresponding dialog.
root.image8=/carousel/UseExportDialog.png
root.text8=The dialog contains a permalink to the current page, the LaTeX-code of the tree and the packages needed \
to compile the code.
root.copyLatexTooltip=Copy LaTeX code
root.drawerToggleTooltip=Type inference rules
root.helpIconTooltip=Help and language switch
root.exampleTooltip=Example terms
root.shareButtonTooltip=LaTeX code and permalink
root.lastStepTooltip=Last step
root.firstStepTooltip=First step
root.previousStepTooltip=Previous step
root.nextStepTooltip=Next step
root.absLetLatex=\
\\begin{prooftree}\