From 0f98164d70eddbf29f375dc9058da4131af5a6f4 Mon Sep 17 00:00:00 2001 From: Matti Tahvonen Date: Thu, 7 Sep 2023 09:38:27 +0300 Subject: [PATCH 1/4] added theme & workaround for tinymce z-indexes --- frontend/themes/addons/main-layout.css | 20 ++++++++++++++++++++ frontend/themes/addons/styles.css | 1 + frontend/themes/addons/theme-editor.css | 0 frontend/themes/addons/theme.json | 3 +++ src/main/java/org/example/Application.java | 5 ++++- 5 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 frontend/themes/addons/main-layout.css create mode 100644 frontend/themes/addons/styles.css create mode 100644 frontend/themes/addons/theme-editor.css create mode 100644 frontend/themes/addons/theme.json diff --git a/frontend/themes/addons/main-layout.css b/frontend/themes/addons/main-layout.css new file mode 100644 index 0000000..88767c5 --- /dev/null +++ b/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; +} diff --git a/frontend/themes/addons/styles.css b/frontend/themes/addons/styles.css new file mode 100644 index 0000000..dcf1f18 --- /dev/null +++ b/frontend/themes/addons/styles.css @@ -0,0 +1 @@ +@import url('./main-layout.css'); \ No newline at end of file diff --git a/frontend/themes/addons/theme-editor.css b/frontend/themes/addons/theme-editor.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/themes/addons/theme.json b/frontend/themes/addons/theme.json new file mode 100644 index 0000000..0f7a81f --- /dev/null +++ b/frontend/themes/addons/theme.json @@ -0,0 +1,3 @@ +{ + "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ] +} \ No newline at end of file diff --git a/src/main/java/org/example/Application.java b/src/main/java/org/example/Application.java index 26ee836..3e4cbfb 100644 --- a/src/main/java/org/example/Application.java +++ b/src/main/java/org/example/Application.java @@ -1,5 +1,7 @@ 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; @@ -7,7 +9,8 @@ * 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); From bae5eb96e6ac8611c5c3bd8bdcbd155d78bafb1f Mon Sep 17 00:00:00 2001 From: Matti Tahvonen Date: Thu, 7 Sep 2023 09:46:08 +0300 Subject: [PATCH 2/4] improved tinymce demo --- .../java/org/example/views/TinyMceView.java | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/main/java/org/example/views/TinyMceView.java b/src/main/java/org/example/views/TinyMceView.java index da47838..5af9a51 100644 --- a/src/main/java/org/example/views/TinyMceView.java +++ b/src/main/java/org/example/views/TinyMceView.java @@ -5,6 +5,7 @@ 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; @@ -12,6 +13,7 @@ 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 bold text with italic 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()); } } From 9564f5603179a3cbf67a6b955c6e69413359abc0 Mon Sep 17 00:00:00 2001 From: Matti Tahvonen Date: Thu, 7 Sep 2023 09:52:34 +0300 Subject: [PATCH 3/4] Improved the welcome screen --- src/main/java/org/example/views/AboutView.java | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/main/java/org/example/views/AboutView.java b/src/main/java/org/example/views/AboutView.java index eb08c8c..7584834 100644 --- a/src/main/java/org/example/views/AboutView.java +++ b/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", From e50e6ed2a99d796211b14d8f55103c6dbd79d6b3 Mon Sep 17 00:00:00 2001 From: Matti Tahvonen Date: Thu, 7 Sep 2023 10:29:02 +0300 Subject: [PATCH 4/4] IT fix --- src/test/java/org/example/TrivialWebDriverTest.java | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/java/org/example/TrivialWebDriverTest.java b/src/test/java/org/example/TrivialWebDriverTest.java index 3d9c97a..6a118e3 100644 --- a/src/test/java/org/example/TrivialWebDriverTest.java +++ b/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);