vaadin-framework/uitest/src/main/java/com/vaadin/tests/minitutorials/v71beta/CSSInjectWithColorpicker.java

package com.vaadin.tests.minitutorials.v71beta;

import java.util.Arrays;

import com.vaadin.annotations.Widgetset;
import com.vaadin.server.Page;
import com.vaadin.server.Page.Styles;
import com.vaadin.server.VaadinRequest;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.shared.ui.MarginInfo;
import com.vaadin.shared.ui.colorpicker.Color;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.ColorPicker;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.Component;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Widgetset("com.vaadin.DefaultWidgetSet")
public class CSSInjectWithColorpicker extends UI {

    @Override
    protected void init(VaadinRequest request) {

        // Create a text editor
        Component editor = createEditor(
                "Lorem ipsum dolor sit amet, lacus pharetra sed, sit a "
                        + "tortor. Id aliquam lorem pede, orci ut enim metus, diam nulla mi "
                        + "suspendisse tempor tortor. Eleifend lorem proin, morbi vel diam ut. "
                        + "Tempor est tellus vitae, pretium condimentum facilisis sit. Sagittis "
                        + "quam, ac urna eros est cras id cras, eleifend eu mattis nec."
                        + "Lorem ipsum dolor sit amet, lacus pharetra sed, sit a "
                        + "tortor. Id aliquam lorem pede, orci ut enim metus, diam nulla mi "
                        + "suspendisse tempor tortor. Eleifend lorem proin, morbi vel diam ut. "
                        + "Tempor est tellus vitae, pretium condimentum facilisis sit. Sagittis "
                        + "quam, ac urna eros est cras id cras, eleifend eu mattis nec."
                        + "Lorem ipsum dolor sit amet, lacus pharetra sed, sit a "
                        + "tortor. Id aliquam lorem pede, orci ut enim metus, diam nulla mi "
                        + "suspendisse tempor tortor. Eleifend lorem proin, morbi vel diam ut. "
                        + "Tempor est tellus vitae, pretium condimentum facilisis sit. Sagittis "
                        + "quam, ac urna eros est cras id cras, eleifend eu mattis nec."
                        + "Lorem ipsum dolor sit amet, lacus pharetra sed, sit a "
                        + "tortor. Id aliquam lorem pede, orci ut enim metus, diam nulla mi "
                        + "suspendisse tempor tortor. Eleifend lorem proin, morbi vel diam ut. "
                        + "Tempor est tellus vitae, pretium condimentum facilisis sit. Sagittis "
                        + "quam, ac urna eros est cras id cras, eleifend eu mattis nec.");

        VerticalLayout content = new VerticalLayout(editor);
        content.setMargin(true);
        setContent(content);
    }

    /**
     * Creates a text editor for visually editing text
     *
     * @param text
     *            The text editor
     * @return
     */
    private Component createEditor(String text) {

        Panel editor = new Panel("Text Editor");
        editor.setWidth("580px");

        VerticalLayout panelContent = new VerticalLayout();
        panelContent.setSpacing(true);
        panelContent.setMargin(new MarginInfo(true, false, false, false));
        editor.setContent(panelContent);

        // Create the toolbar
        HorizontalLayout toolbar = new HorizontalLayout();
        toolbar.setSpacing(true);
        toolbar.setMargin(new MarginInfo(false, false, false, true));

        // Create the font family selector
        toolbar.addComponent(createFontSelect());

        // Create the font size selector
        toolbar.addComponent(createFontSizeSelect());

        // Create the text color selector
        toolbar.addComponent(createTextColorSelect());

        // Create the background color selector
        toolbar.addComponent(createBackgroundColorSelect());

        panelContent.addComponent(toolbar);
        panelContent.setComponentAlignment(toolbar, Alignment.MIDDLE_LEFT);

        // Spacer between toolbar and text
        panelContent.addComponent(new Label("<hr/>", ContentMode.HTML));

        // The text to edit
        TextArea textLabel = new TextArea(null, text);
        textLabel.setWidth("100%");
        textLabel.setHeight("200px");

        // IMPORTANT: We are here setting the style name of the label, we are
        // going to use this in our injected styles to target the label
        textLabel.setStyleName("text-label");

        panelContent.addComponent(textLabel);

        return editor;
    }

    /**
     * Creates a background color select dialog
     */
    private Component createBackgroundColorSelect() {
        ColorPicker bgColor = new ColorPicker("Background", Color.WHITE);
        bgColor.setWidth("110px");
        bgColor.setCaption("Background");
        bgColor.addValueChangeListener(event -> {

            // Get the new background color
            Color color = event.getValue();

            // Get the stylesheet of the page
            Styles styles = Page.getCurrent().getStyles();

            // inject the new background color
            styles.add(".v-app .v-textarea.text-label { background-color:"
                    + color.getCSS() + "; }");
        });

        return bgColor;
    }

    /**
     * Create a text color selction dialog
     */
    private Component createTextColorSelect() {

        // Colorpicker for changing text color
        ColorPicker textColor = new ColorPicker("Color", Color.BLACK);
        textColor.setWidth("110px");
        textColor.setCaption("Color");
        textColor.addValueChangeListener(event -> {

            // Get the new text color
            Color color = event.getValue();

            // Get the stylesheet of the page
            Styles styles = Page.getCurrent().getStyles();

            // inject the new color as a style
            styles.add(".v-app .v-textarea.text-label { color:" + color.getCSS()
                    + "; }");
        });

        return textColor;
    }

    /**
     * Creates a font family selection dialog
     */
    private Component createFontSelect() {
        final ComboBox<String> select = new ComboBox<>(null,
                Arrays.asList("Arial", "Helvetica", "Verdana", "Courier",
                        "Times", "sans-serif"));
        select.setValue("Arial");
        select.setWidth("200px");
        select.setPlaceholder("Font");
        select.setDescription("Font");
        select.setEmptySelectionAllowed(false);
        select.addValueChangeListener(event -> {
            // Get the new font family
            String fontFamily = select.getValue().toString();

            // Get the stylesheet of the page
            Styles styles = Page.getCurrent().getStyles();

            // inject the new font size as a style. We need .v-app to
            // override Vaadin's default styles here
            styles.add(".v-app .v-textarea.text-label { font-family:"
                    + fontFamily + "; }");
        });

        return select;
    }

    /**
     * Creates a font size selection control
     */
    private Component createFontSizeSelect() {

        final ComboBox<Integer> select = new ComboBox<>(null,
                Arrays.asList(8, 9, 10, 12, 14, 16, 20, 25, 30, 40, 50));
        select.setWidth("100px");
        select.setValue(12);
        select.setPlaceholder("Font size");
        select.setDescription("Font size");
        select.setEmptySelectionAllowed(false);
        select.addValueChangeListener(event -> {
            // Get the new font size
            Integer fontSize = select.getValue();

            // Get the stylesheet of the page
            Styles styles = Page.getCurrent().getStyles();

            // inject the new font size as a style. We need .v-app to
            // override Vaadin's default styles here
            styles.add(".v-app .v-textarea.text-label { font-size:"
                    + String.valueOf(fontSize) + "px; }");
        });

        return select;
    }
}