-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds vertical padding to input fields, adds vaadin-side-nav examples,…
… organize styles.
- Loading branch information
1 parent
34c80b0
commit a795706
Showing
8 changed files
with
254 additions
and
122 deletions.
There are no files selected for viewing
166 changes: 166 additions & 0 deletions
166
demo/src/main/java/com/example/application/views/applayoutsample/AppLayoutSample.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,166 @@ | ||
| package com.example.application.views.applayoutsample; | ||
|
|
||
| import com.example.application.views.componentssample.ComponentsSampleView; | ||
| import com.vaadin.flow.component.Component; | ||
| import com.vaadin.flow.component.applayout.AppLayout; | ||
| import com.vaadin.flow.component.applayout.DrawerToggle; | ||
| import com.vaadin.flow.component.html.H1; | ||
| import com.vaadin.flow.component.html.Span; | ||
| 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.component.orderedlayout.Scroller; | ||
| import com.vaadin.flow.component.orderedlayout.VerticalLayout; | ||
| import com.vaadin.flow.component.sidenav.SideNav; | ||
| import com.vaadin.flow.component.sidenav.SideNavItem; | ||
| import com.vaadin.flow.router.PageTitle; | ||
| import com.vaadin.flow.router.Route; | ||
| import com.vaadin.flow.theme.lumo.LumoUtility; | ||
|
|
||
| @PageTitle("App Layout Sample") | ||
| @Route("app-layout-sample") | ||
| public class AppLayoutSample extends AppLayout { | ||
|
|
||
| public AppLayoutSample() { | ||
| DrawerToggle toggle = new DrawerToggle(); | ||
|
|
||
| H1 title = new H1("MyApp"); | ||
| title.getStyle().set("font-size", "var(--lumo-font-size-l)") | ||
| .set("margin", "0"); | ||
|
|
||
| SideNav nav = getSideNav(); | ||
|
|
||
| Scroller scroller = new Scroller(nav); | ||
| scroller.setClassName(LumoUtility.Padding.SMALL); | ||
|
|
||
| addToDrawer(scroller); | ||
| addToNavbar(toggle, title); | ||
|
|
||
| HorizontalLayout navExamples = new HorizontalLayout(createSideNavLabelled(), createSideNavHierarchy()); | ||
| navExamples.setPadding(true); | ||
| navExamples.setSpacing(true); | ||
| setContent(navExamples); | ||
| } | ||
|
|
||
|
|
||
| private Component createSideNavLabelled() { | ||
| SideNav baseNav = new SideNav(); | ||
| baseNav.addItem(new SideNavItem("Dashboard", AppLayoutSample.class, | ||
| VaadinIcon.DASHBOARD.create())); | ||
| SideNavItem calendarLink = new SideNavItem("Calendar", "", | ||
| VaadinIcon.CALENDAR.create()); | ||
| baseNav.addItem(calendarLink); | ||
|
|
||
| Icon calendarNotification = VaadinIcon.BELL.create(); | ||
| calendarNotification.getElement().getThemeList() | ||
| .add("badge error pill"); | ||
| calendarNotification.getStyle().set("padding", "var(--lumo-space-xs"); | ||
| calendarNotification.getElement().setAttribute("aria-label", | ||
| "Upcoming appointment"); | ||
| calendarLink.setSuffixComponent(calendarNotification); | ||
|
|
||
| SideNav messagesNav = new SideNav(); | ||
| messagesNav.setLabel("Messages"); | ||
| SideNavItem inboxLink = new SideNavItem("Inbox", "", | ||
| VaadinIcon.INBOX.create()); | ||
| Span inboxCounter = new Span("12"); | ||
| inboxCounter.getElement().getThemeList().add("badge contrast pill"); | ||
| inboxCounter.getElement().setAttribute("aria-label", | ||
| "12 unread messages"); | ||
| inboxLink.setSuffixComponent(inboxCounter); | ||
| messagesNav.addItem(inboxLink); | ||
| messagesNav.addItem(new SideNavItem("Sent", "", | ||
| VaadinIcon.PAPERPLANE.create())); | ||
| messagesNav.addItem(new SideNavItem("Trash", "", | ||
| VaadinIcon.TRASH.create())); | ||
|
|
||
| SideNav adminNav = new SideNav(); | ||
| adminNav.setLabel("Admin"); | ||
| adminNav.setCollapsible(true); | ||
| adminNav.addItem(new SideNavItem("Users", "", | ||
| VaadinIcon.GROUP.create())); | ||
| adminNav.addItem(new SideNavItem("Permissions", "", | ||
| VaadinIcon.KEY.create())); | ||
|
|
||
| VerticalLayout navWrapper = new VerticalLayout(baseNav, messagesNav, adminNav); | ||
| navWrapper.setSpacing(true); | ||
| navWrapper.setWidth("320px"); | ||
| navWrapper.setHeightFull(); | ||
| navWrapper.getStyle().set("background", "var(--lumo-base-color-60pct)"); | ||
| baseNav.setWidthFull(); | ||
| messagesNav.setWidthFull(); | ||
| adminNav.setWidthFull(); | ||
|
|
||
| return navWrapper; | ||
| } | ||
|
|
||
| private Component createSideNavHierarchy() { | ||
| SideNav sideNav = new SideNav(); | ||
| sideNav.addItem(new SideNavItem("Dashboard", AppLayoutSample.class, | ||
| VaadinIcon.DASHBOARD.create())); | ||
| SideNavItem calendarLink = new SideNavItem("Calendar", "", | ||
| VaadinIcon.CALENDAR.create()); | ||
| sideNav.addItem(calendarLink); | ||
|
|
||
| Icon calendarNotification = VaadinIcon.BELL.create(); | ||
| calendarNotification.getElement().getThemeList() | ||
| .add("badge error pill"); | ||
| calendarNotification.getStyle().set("padding", "var(--lumo-space-xs"); | ||
| calendarNotification.getElement().setAttribute("aria-label", | ||
| "Upcoming appointment"); | ||
| calendarLink.setSuffixComponent(calendarNotification); | ||
|
|
||
| SideNavItem messagesLink = new SideNavItem("Messages", "", VaadinIcon.ENVELOPE.create()); | ||
| messagesLink.setExpanded(true); | ||
| SideNavItem inboxLink = new SideNavItem("Inbox", "", | ||
| VaadinIcon.INBOX.create()); | ||
| Span inboxCounter = new Span("12"); | ||
| inboxCounter.getElement().getThemeList().add("badge contrast pill"); | ||
| inboxCounter.getElement().setAttribute("aria-label", | ||
| "12 unread messages"); | ||
| inboxLink.setSuffixComponent(inboxCounter); | ||
| messagesLink.addItem(inboxLink); | ||
| messagesLink.addItem(new SideNavItem("Sent", "", | ||
| VaadinIcon.PAPERPLANE.create())); | ||
| messagesLink.addItem(new SideNavItem("Trash", "", | ||
| VaadinIcon.TRASH.create())); | ||
| sideNav.addItem(messagesLink); | ||
|
|
||
| SideNavItem adminSection = new SideNavItem("Admin"); | ||
| adminSection.setExpanded(true); | ||
| adminSection.setPrefixComponent(VaadinIcon.COG.create()); | ||
| adminSection.addItem(new SideNavItem("Users", "", | ||
| VaadinIcon.GROUP.create())); | ||
| adminSection.addItem(new SideNavItem("Permissions", "", | ||
| VaadinIcon.KEY.create())); | ||
| sideNav.addItem(adminSection); | ||
|
|
||
| VerticalLayout navWrapper = new VerticalLayout(sideNav); | ||
| navWrapper.setSpacing(true); | ||
| navWrapper.setWidth("320px"); | ||
| navWrapper.setHeightFull(); | ||
| navWrapper.getStyle().set("background", "var(--lumo-base-color-60pct)"); | ||
| sideNav.setWidthFull(); | ||
|
|
||
| return navWrapper; | ||
| } | ||
|
|
||
| private SideNav getSideNav() { | ||
| SideNav sideNav = new SideNav(); | ||
| sideNav.addItem( | ||
| new SideNavItem("Dashboard", "/dashboard", | ||
| VaadinIcon.DASHBOARD.create()), | ||
| new SideNavItem("Orders", "/orders", VaadinIcon.CART.create()), | ||
| new SideNavItem("Customers", "/customers", | ||
| VaadinIcon.USER_HEART.create()), | ||
| new SideNavItem("Products", "/products", | ||
| VaadinIcon.PACKAGE.create()), | ||
| new SideNavItem("Documents", "/documents", | ||
| VaadinIcon.RECORDS.create()), | ||
| new SideNavItem("Tasks", "/tasks", VaadinIcon.LIST.create()), | ||
| new SideNavItem("Analytics", "/analytics", | ||
| VaadinIcon.CHART.create())); | ||
| return sideNav; | ||
| } | ||
|
|
||
| } |
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
14 changes: 14 additions & 0 deletions
14
theme/src/main/resources/META-INF/resources/themes/starpass/app-layout.css
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,14 @@ | ||
| vaadin-app-layout:not([overlay])::part(drawer) { | ||
| background-color: transparent; | ||
| border-inline-end: transparent; | ||
| } | ||
|
|
||
| vaadin-app-layout:not([overlay])::part(navbar) { | ||
| background-color: var(--lumo-base-color-60pct); | ||
| background-image: none; | ||
| border-bottom-style: solid; | ||
| border-bottom-width: min(var(--view-inset), var(--view-border-width)); | ||
| border-color: var(--view-border-color); | ||
| background: var(--view-background); | ||
| background-clip: var(--view-background-clip); | ||
| } |
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
50 changes: 50 additions & 0 deletions
50
theme/src/main/resources/META-INF/resources/themes/starpass/dialogs-overlays.css
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,50 @@ | ||
| ::part(overlay) { | ||
| background: var(--view-glow), hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 7%), 8%)); | ||
| box-shadow: inset 0 0.5px 0 0 var(--lumo-tint-5pct), inset 0 0 0 0.5px var(--lumo-tint-10pct), 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-l); | ||
| -webkit-backdrop-filter: blur(var(--blur-radius)); | ||
| backdrop-filter: blur(var(--blur-radius)); | ||
| font-weight: inherit; | ||
| } | ||
|
|
||
|
|
||
| vaadin-dialog-overlay::part(header), | ||
| vaadin-dialog-overlay::part(footer) { | ||
| background: transparent; | ||
| } | ||
|
|
||
| vaadin-dialog-overlay::part(footer) { | ||
| padding: var(--lumo-space-m); | ||
| } | ||
|
|
||
| /* :is(vaadin-select-overlay, vaadin-context-menu-overlay, vaadin-menu-bar-overlay, vaadin-combo-box-overlay, vaadin-multi-select-combo-box-overlay, vaadin-time-picker-overlay) :is([role=menuitem], [role=option]):is(:hover, [expanded]), | ||
| vaadin-item:hover { | ||
| background-color: var(--lumo-contrast-10pct); | ||
| } */ | ||
|
|
||
| @media (prefers-reduced-motion) { | ||
|
|
||
| :is([opening], [closing]), | ||
| :is([opening], [closing])::part(overlay) { | ||
| animation: none; | ||
| } | ||
|
|
||
| vaadin-dialog-overlay:is([opening], [closing]), | ||
| vaadin-dialog-overlay:is([opening], [closing])::part(overlay) { | ||
| animation: none; | ||
| } | ||
| } | ||
|
|
||
| vaadin-tooltip-overlay { | ||
| /* TODO should probably be the default style. Without this, tooltips close to the viewport edge can get scrollbars. */ | ||
| inset: 0; | ||
| } | ||
|
|
||
| vaadin-tooltip-overlay::part(overlay) { | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| @media (max-width: 420px), (max-height: 420px) { | ||
| :is(vaadin-context-menu-overlay, vaadin-menu-bar-overlay, vaadin-select-overlay)::part(overlay) { | ||
| max-height: 80vh; | ||
| } | ||
| } |
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.