Feature/theme and stuff

frontend/themes/addons/main-layout.css

@@ -0,0 +1,20 @@
+vaadin-app-layout::part(drawer) {
+    z-index: 3 !important; /* tinymce uses 2 */
+}
+
+vaadin-scroller[slot="drawer"] {
+  padding: var(--lumo-space-s);
+}
+
+[slot="drawer"]:is(header, footer) {
+  display: flex;
+  align-items: center;
+  gap: var(--lumo-space-s);
+  padding: var(--lumo-space-s) var(--lumo-space-m);
+  min-height: var(--lumo-size-xl);
+  box-sizing: border-box;
+}
+
+[slot="drawer"]:is(header, footer):is(:empty) {
+  display: none;
+}

frontend/themes/addons/styles.css

@@ -0,0 +1 @@
+@import url('./main-layout.css');

frontend/themes/addons/theme.json

@@ -0,0 +1,3 @@
+{
+  "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ]
+}

src/main/java/org/example/Application.java

@@ -1,13 +1,16 @@
 package org.example;
 
+import com.vaadin.flow.component.page.AppShellConfigurator;
+import com.vaadin.flow.theme.Theme;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 
 /**
  * The entry point of the Spring Boot application.
  */
 @SpringBootApplication
-public class Application {
+@Theme("addons")
+public class Application implements AppShellConfigurator {
 
     public static void main(String[] args) {
         SpringApplication.run(Application.class, args);

src/main/java/org/example/views/AboutView.java

@@ -2,25 +2,29 @@
 
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.Paragraph;
+import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
 import org.example.Addon;
 import org.example.DefaultLayout;
+import org.vaadin.firitin.appframework.MenuItem;
 import org.vaadin.firitin.components.RichText;
 
 @Route(value = "", layout = DefaultLayout.class)
+@MenuItem(title = "Welcome", icon = VaadinIcon.QUOTE_LEFT, order = MenuItem.BEGINNING)
 @Addon("flow-viritin")
 public class AboutView extends VerticalLayout {
 
     public AboutView() {
         add(new RichText().withMarkDown("""
-# Welcome }>  add-on demo project
+# }> add-on demo project
 
 This is a demo project showcasing various Vaadin add-ons and hosted by "Team Parttio", but add-on examples are not limited to add-ons from Parttio.
 
 For example this welcome screen is using RichText component from [Viritin](https://vaadin.com/directory/component/firitin) add-on. Quick links to the source code of examples can be found on top right corner of the main layout.
 
 If you want to contribute your add-on example, please make a PR to the [GitHub project](https://github.com/parttio/addon-demos).
+In case you plan to make a lot of views or include lot of resources, consider making a separately deployed demo app, so that the size of this project remains manageable.
 
                 """));
         Button button = new Button("Click me",

src/main/java/org/example/views/TinyMceView.java

@@ -5,13 +5,15 @@
 import com.vaadin.flow.component.html.H5;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.notification.Notification;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
 import org.example.Addon;
 import org.example.DefaultLayout;
 import org.jsoup.safety.Safelist;
 import org.vaadin.firitin.appframework.MenuItem;
 import org.vaadin.firitin.components.RichText;
+import org.vaadin.firitin.components.orderedlayout.VHorizontalLayout;
 import org.vaadin.tinymce.TinyMce;
 
 @Route(layout = DefaultLayout.class)
@@ -20,16 +22,31 @@
 public class TinyMceView extends VerticalLayout {
 
     public TinyMceView() {
+        add(new RichText().withMarkDown("""
+        # TinyMCE editor
+
+        TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL.
+
+        See more configuration options from [add-on tests](https://github.com/parttio/tinymce-for-flow/tree/master/src/test/java/org/vaadin/tinymce) or [TinyMCE documentation](https://www.tiny.cloud/docs/configure/).
+        """));
+
         TinyMce editor = new TinyMce();
         String originalValue = "This is a <b>bold</b> text with <i>italic</i> text.";
         editor.setValue(originalValue);
+        editor.setWidth("100%");
 
         Div rawHtml = new Div();
+        rawHtml.setWidth("100%");
 
         Button showValue = new Button("show value", event -> {
             rawHtml.getElement().setProperty("innerHTML", editor.getValue());
         });
 
-        add(editor, showValue, new H5("Value:"), rawHtml);
+        add(new VHorizontalLayout(editor, new VerticalLayout(
+                        showValue,
+                        new H5("Value:"),
+                        rawHtml
+                )
+        ).withFullWidth());
     }
 }

src/test/java/org/example/TrivialWebDriverTest.java

@@ -34,7 +34,7 @@ public void smokeTest() {
         Browser browser = playwright.firefox().launch();
         Page page = browser.newPage();
         page.navigate("http://localhost:" + port + "/");
-        assertThat(page.getByText("Welcome }> add-on demo project")).isVisible();
+        assertThat(page.getByText("}> add-on demo project")).isVisible();
     }
 
     @Test
@@ -43,7 +43,7 @@ public void checkAllViewsLoadProperly() {
         Page page = browser.newPage();
         page.navigate("http://localhost:" + port + "/");
 
-        assertThat(page.getByText("Welcome }> add-on demo project")).isVisible();
+        assertThat(page.getByText("}> add-on demo project")).isVisible();
 
         MutableInt count = new MutableInt(0);