-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: create completely new Popup demostration
- Loading branch information
Showing
10 changed files
with
423 additions
and
462 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
popup-demo/src/main/java/com/vaadin/componentfactory/popup/demo/MainLayout.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| package com.vaadin.componentfactory.popup.demo; | ||
|
|
||
| import com.vaadin.componentfactory.popup.demo.views.*; | ||
| import com.vaadin.flow.component.applayout.AppLayout; | ||
| import com.vaadin.flow.component.applayout.DrawerToggle; | ||
| import com.vaadin.flow.component.orderedlayout.VerticalLayout; | ||
| import com.vaadin.flow.router.RouterLink; | ||
|
|
||
| public class MainLayout extends AppLayout { | ||
|
|
||
| public MainLayout() { | ||
| final DrawerToggle drawerToggle = new DrawerToggle(); | ||
|
|
||
| final RouterLink basicUsages = new RouterLink("Popup basic usage", PopupBasicUsageView.class); | ||
| final RouterLink headerAndFooter = new RouterLink("Header and Footer", HeaderAndFooterView.class); | ||
| final RouterLink popupInGrid = new RouterLink("Popup in Grid", PopupGridView.class); | ||
| final RouterLink onboardingDemo = new RouterLink("Onboarding Demo", OnboardingView.class); | ||
|
|
||
| final VerticalLayout menuLayout = new VerticalLayout(basicUsages, headerAndFooter, popupInGrid, onboardingDemo); | ||
| addToDrawer(menuLayout); | ||
| addToNavbar(drawerToggle); | ||
| } | ||
|
|
||
| } |
17 changes: 17 additions & 0 deletions
17
...p-demo/src/main/java/com/vaadin/componentfactory/popup/demo/content/LongPopupContent.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| package com.vaadin.componentfactory.popup.demo.content; | ||
|
|
||
| import com.vaadin.flow.component.button.Button; | ||
| import com.vaadin.flow.component.html.Span; | ||
| import com.vaadin.flow.component.orderedlayout.HorizontalLayout; | ||
| import com.vaadin.flow.component.orderedlayout.VerticalLayout; | ||
|
|
||
| public class LongPopupContent extends VerticalLayout { | ||
|
|
||
| public LongPopupContent() { | ||
| add(new Span("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam at arcu a est sollicitudin euismod. Nunc tincidunt ante vitae massa. Et harum quidem rerum facilis est et expedita distinctio. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.")); | ||
| add(new HorizontalLayout(new Button("Action 1"), new Button("Action 2"))); | ||
| add(new Span("Lorem ipsum dolor sit amet. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Duis viverra diam non justo. Nulla est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.")); | ||
| setMaxWidth("25rem"); | ||
| setMaxHeight("20rem"); | ||
| } | ||
| } |
96 changes: 96 additions & 0 deletions
96
...-demo/src/main/java/com/vaadin/componentfactory/popup/demo/views/HeaderAndFooterView.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| package com.vaadin.componentfactory.popup.demo.views; | ||
|
|
||
| import com.vaadin.componentfactory.Popup; | ||
| import com.vaadin.componentfactory.popup.demo.MainLayout; | ||
| import com.vaadin.componentfactory.popup.demo.content.LongPopupContent; | ||
| import com.vaadin.flow.component.Component; | ||
| import com.vaadin.flow.component.button.Button; | ||
| import com.vaadin.flow.component.button.ButtonVariant; | ||
| import com.vaadin.flow.component.dependency.CssImport; | ||
| import com.vaadin.flow.component.html.H3; | ||
| import com.vaadin.flow.component.html.Paragraph; | ||
| import com.vaadin.flow.component.orderedlayout.VerticalLayout; | ||
| import com.vaadin.flow.router.Route; | ||
| import com.vaadin.flow.theme.lumo.LumoIcon; | ||
|
|
||
| @Route(value = "header-footer", layout = MainLayout.class) | ||
| @CssImport(value = "./styles/custom-popup-style.css", themeFor = "vcf-popup-overlay") | ||
| public class HeaderAndFooterView extends VerticalLayout { | ||
|
|
||
| public HeaderAndFooterView() { | ||
| add(new H3("Add header and footer to Popup")); | ||
|
|
||
| addViewDescription(); | ||
|
|
||
| VerticalLayout buttonLayout = new VerticalLayout(); | ||
| buttonLayout.setSpacing(false); | ||
| buttonLayout.setPadding(false); | ||
| addSimpleTextInHeaderExample(buttonLayout); | ||
| addTextAndCloseButtonInHeaderExample(buttonLayout); | ||
| addHeaderAndFooterExample(buttonLayout); | ||
| addStyledHeaderAndFooterExample(buttonLayout); | ||
| add(buttonLayout); | ||
| } | ||
|
|
||
| private void addSimpleTextInHeaderExample(VerticalLayout layout) { | ||
| Button button = new Button("Show popup with simple textual header"); | ||
| Popup popup = createDefaultPopup(button, layout); | ||
| popup.setHeaderTitle("This is title"); | ||
| layout.add(button); | ||
| } | ||
|
|
||
| private void addTextAndCloseButtonInHeaderExample(VerticalLayout layout) { | ||
| Button button = new Button("Show popup with textual header and close button"); | ||
| Popup popup = createDefaultPopup(button, layout); | ||
| popup.setHeaderTitle("This is title"); | ||
| addCloseButtonToHeader(popup); | ||
| layout.add(button); | ||
| } | ||
|
|
||
| private void addHeaderAndFooterExample(VerticalLayout layout) { | ||
| Button button = new Button("Header and footer example"); | ||
| Popup popup = createDefaultPopup(button, layout); | ||
| popup.setHeaderTitle("This is title"); | ||
| addCloseButtonToHeader(popup); | ||
| addOkAndCancelToFooter(popup); | ||
| layout.add(button); | ||
| } | ||
|
|
||
| private void addStyledHeaderAndFooterExample(VerticalLayout layout) { | ||
| Button button = new Button("Header and footer with custom styling"); | ||
| Popup popup = createDefaultPopup(button, layout); | ||
| popup.setThemeName("custom-popup-style"); | ||
| popup.setHeaderTitle("This is title"); | ||
| addOkAndCancelToFooter(popup); | ||
| layout.add(button); | ||
| } | ||
|
|
||
| private void addOkAndCancelToFooter(Popup popup) { | ||
| Button cancel = new Button("Cancel"); | ||
| Button apply = new Button("Ok"); | ||
| apply.addThemeVariants(ButtonVariant.LUMO_PRIMARY); | ||
| popup.getFooter().add(cancel, apply); | ||
| } | ||
|
|
||
| private void addCloseButtonToHeader(Popup popup) { | ||
| Button closeBtn = new Button(LumoIcon.CROSS.create()); | ||
| closeBtn.addClickListener(e -> popup.hide()); | ||
| closeBtn.addThemeVariants(ButtonVariant.LUMO_TERTIARY); | ||
| popup.getHeader().add(closeBtn); | ||
| } | ||
|
|
||
| private void addViewDescription() { | ||
| add(new Paragraph("This demo showcases a possibility to easily define a header and a footer for the Popup. " + | ||
| "You can use the `setHeaderTitle` method to quickly define the header title text. If you need more complicated header content " + | ||
| "you can use the `getHeader` method to get the header component and add your own content to it using `getHeader.add(Component)`. " + | ||
| "The same applies to the footer - add components (for example buttons) to the footer using `getFooter.add(Component)`.")); | ||
| } | ||
|
|
||
| private Popup createDefaultPopup(Component forComponent, VerticalLayout layout) { | ||
| Popup popup = new Popup(); | ||
| popup.add(new LongPopupContent()); | ||
| popup.setTarget(forComponent.getElement()); | ||
| layout.add(popup); | ||
| return popup; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.