Skip to content

Commit a795706

Browse files
juuso-vaadinjuuso-vaadin
committed
Adds vertical padding to input fields, adds vaadin-side-nav examples, organize styles.
1 parent 34c80b0 commit a795706

File tree

8 files changed

+254
-122
lines changed

8 files changed

+254
-122
lines changed

‎demo/src/main/java/com/example/application/views/applayoutsample/AppLayoutSample.java

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
package com.example.application.views.applayoutsample;
2+
3+
import com.example.application.views.componentssample.ComponentsSampleView;
4+
import com.vaadin.flow.component.Component;
5+
import com.vaadin.flow.component.applayout.AppLayout;
6+
import com.vaadin.flow.component.applayout.DrawerToggle;
7+
import com.vaadin.flow.component.html.H1;
8+
import com.vaadin.flow.component.html.Span;
9+
import com.vaadin.flow.component.icon.Icon;
10+
import com.vaadin.flow.component.icon.VaadinIcon;
11+
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
12+
import com.vaadin.flow.component.orderedlayout.Scroller;
13+
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
14+
import com.vaadin.flow.component.sidenav.SideNav;
15+
import com.vaadin.flow.component.sidenav.SideNavItem;
16+
import com.vaadin.flow.router.PageTitle;
17+
import com.vaadin.flow.router.Route;
18+
import com.vaadin.flow.theme.lumo.LumoUtility;
19+
20+
@PageTitle("App Layout Sample")
21+
@Route("app-layout-sample")
22+
public class AppLayoutSample extends AppLayout {
23+
24+
public AppLayoutSample() {
25+
DrawerToggle toggle = new DrawerToggle();
26+
27+
H1 title = new H1("MyApp");
28+
title.getStyle().set("font-size", "var(--lumo-font-size-l)")
29+
.set("margin", "0");
30+
31+
SideNav nav = getSideNav();
32+
33+
Scroller scroller = new Scroller(nav);
34+
scroller.setClassName(LumoUtility.Padding.SMALL);
35+
36+
addToDrawer(scroller);
37+
addToNavbar(toggle, title);
38+
39+
HorizontalLayout navExamples = new HorizontalLayout(createSideNavLabelled(), createSideNavHierarchy());
40+
navExamples.setPadding(true);
41+
navExamples.setSpacing(true);
42+
setContent(navExamples);
43+
}
44+
45+
46+
private Component createSideNavLabelled() {
47+
SideNav baseNav = new SideNav();
48+
baseNav.addItem(new SideNavItem("Dashboard", AppLayoutSample.class,
49+
VaadinIcon.DASHBOARD.create()));
50+
SideNavItem calendarLink = new SideNavItem("Calendar", "",
51+
VaadinIcon.CALENDAR.create());
52+
baseNav.addItem(calendarLink);
53+
54+
Icon calendarNotification = VaadinIcon.BELL.create();
55+
calendarNotification.getElement().getThemeList()
56+
.add("badge error pill");
57+
calendarNotification.getStyle().set("padding", "var(--lumo-space-xs");
58+
calendarNotification.getElement().setAttribute("aria-label",
59+
"Upcoming appointment");
60+
calendarLink.setSuffixComponent(calendarNotification);
61+
62+
SideNav messagesNav = new SideNav();
63+
messagesNav.setLabel("Messages");
64+
SideNavItem inboxLink = new SideNavItem("Inbox", "",
65+
VaadinIcon.INBOX.create());
66+
Span inboxCounter = new Span("12");
67+
inboxCounter.getElement().getThemeList().add("badge contrast pill");
68+
inboxCounter.getElement().setAttribute("aria-label",
69+
"12 unread messages");
70+
inboxLink.setSuffixComponent(inboxCounter);
71+
messagesNav.addItem(inboxLink);
72+
messagesNav.addItem(new SideNavItem("Sent", "",
73+
VaadinIcon.PAPERPLANE.create()));
74+
messagesNav.addItem(new SideNavItem("Trash", "",
75+
VaadinIcon.TRASH.create()));
76+
77+
SideNav adminNav = new SideNav();
78+
adminNav.setLabel("Admin");
79+
adminNav.setCollapsible(true);
80+
adminNav.addItem(new SideNavItem("Users", "",
81+
VaadinIcon.GROUP.create()));
82+
adminNav.addItem(new SideNavItem("Permissions", "",
83+
VaadinIcon.KEY.create()));
84+
85+
VerticalLayout navWrapper = new VerticalLayout(baseNav, messagesNav, adminNav);
86+
navWrapper.setSpacing(true);
87+
navWrapper.setWidth("320px");
88+
navWrapper.setHeightFull();
89+
navWrapper.getStyle().set("background", "var(--lumo-base-color-60pct)");
90+
baseNav.setWidthFull();
91+
messagesNav.setWidthFull();
92+
adminNav.setWidthFull();
93+
94+
return navWrapper;
95+
}
96+
97+
private Component createSideNavHierarchy() {
98+
SideNav sideNav = new SideNav();
99+
sideNav.addItem(new SideNavItem("Dashboard", AppLayoutSample.class,
100+
VaadinIcon.DASHBOARD.create()));
101+
SideNavItem calendarLink = new SideNavItem("Calendar", "",
102+
VaadinIcon.CALENDAR.create());
103+
sideNav.addItem(calendarLink);
104+
105+
Icon calendarNotification = VaadinIcon.BELL.create();
106+
calendarNotification.getElement().getThemeList()
107+
.add("badge error pill");
108+
calendarNotification.getStyle().set("padding", "var(--lumo-space-xs");
109+
calendarNotification.getElement().setAttribute("aria-label",
110+
"Upcoming appointment");
111+
calendarLink.setSuffixComponent(calendarNotification);
112+
113+
SideNavItem messagesLink = new SideNavItem("Messages", "", VaadinIcon.ENVELOPE.create());
114+
messagesLink.setExpanded(true);
115+
SideNavItem inboxLink = new SideNavItem("Inbox", "",
116+
VaadinIcon.INBOX.create());
117+
Span inboxCounter = new Span("12");
118+
inboxCounter.getElement().getThemeList().add("badge contrast pill");
119+
inboxCounter.getElement().setAttribute("aria-label",
120+
"12 unread messages");
121+
inboxLink.setSuffixComponent(inboxCounter);
122+
messagesLink.addItem(inboxLink);
123+
messagesLink.addItem(new SideNavItem("Sent", "",
124+
VaadinIcon.PAPERPLANE.create()));
125+
messagesLink.addItem(new SideNavItem("Trash", "",
126+
VaadinIcon.TRASH.create()));
127+
sideNav.addItem(messagesLink);
128+
129+
SideNavItem adminSection = new SideNavItem("Admin");
130+
adminSection.setExpanded(true);
131+
adminSection.setPrefixComponent(VaadinIcon.COG.create());
132+
adminSection.addItem(new SideNavItem("Users", "",
133+
VaadinIcon.GROUP.create()));
134+
adminSection.addItem(new SideNavItem("Permissions", "",
135+
VaadinIcon.KEY.create()));
136+
sideNav.addItem(adminSection);
137+
138+
VerticalLayout navWrapper = new VerticalLayout(sideNav);
139+
navWrapper.setSpacing(true);
140+
navWrapper.setWidth("320px");
141+
navWrapper.setHeightFull();
142+
navWrapper.getStyle().set("background", "var(--lumo-base-color-60pct)");
143+
sideNav.setWidthFull();
144+
145+
return navWrapper;
146+
}
147+
148+
private SideNav getSideNav() {
149+
SideNav sideNav = new SideNav();
150+
sideNav.addItem(
151+
new SideNavItem("Dashboard", "/dashboard",
152+
VaadinIcon.DASHBOARD.create()),
153+
new SideNavItem("Orders", "/orders", VaadinIcon.CART.create()),
154+
new SideNavItem("Customers", "/customers",
155+
VaadinIcon.USER_HEART.create()),
156+
new SideNavItem("Products", "/products",
157+
VaadinIcon.PACKAGE.create()),
158+
new SideNavItem("Documents", "/documents",
159+
VaadinIcon.RECORDS.create()),
160+
new SideNavItem("Tasks", "/tasks", VaadinIcon.LIST.create()),
161+
new SideNavItem("Analytics", "/analytics",
162+
VaadinIcon.CHART.create()));
163+
return sideNav;
164+
}
165+
166+
}

‎demo/src/main/java/com/example/application/views/componentssample/ComponentsSampleView.java

-4
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
import com.vaadin.flow.component.html.*;
2828
import com.vaadin.flow.component.icon.Icon;
2929
import com.vaadin.flow.component.icon.VaadinIcon;
30-
import com.vaadin.flow.component.listbox.ListBox;
3130
import com.vaadin.flow.component.listbox.MultiSelectListBox;
3231
import com.vaadin.flow.component.menubar.MenuBar;
3332
import com.vaadin.flow.component.messages.MessageList;
@@ -52,7 +51,6 @@
5251
import com.vaadin.flow.component.textfield.TextFieldVariant;
5352
import com.vaadin.flow.component.upload.Upload;
5453
import com.vaadin.flow.component.upload.receivers.MultiFileMemoryBuffer;
55-
import com.vaadin.flow.data.renderer.ComponentRenderer;
5654
import com.vaadin.flow.data.renderer.LitRenderer;
5755
import com.vaadin.flow.data.renderer.Renderer;
5856
import com.vaadin.flow.data.value.ValueChangeMode;
@@ -68,8 +66,6 @@
6866
import java.time.ZoneOffset;
6967
import java.util.*;
7068
import java.util.function.Consumer;
71-
import java.util.stream.Collectors;
72-
import java.util.stream.Stream;
7369

7470
@PageTitle("Components Sample")
7571
@Route(value = "components-sample")

‎theme/src/main/resources/META-INF/resources/themes/starpass/app-layout.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
vaadin-app-layout:not([overlay])::part(drawer) {
2+
background-color: transparent;
3+
border-inline-end: transparent;
4+
}
5+
6+
vaadin-app-layout:not([overlay])::part(navbar) {
7+
background-color: var(--lumo-base-color-60pct);
8+
background-image: none;
9+
border-bottom-style: solid;
10+
border-bottom-width: min(var(--view-inset), var(--view-border-width));
11+
border-color: var(--view-border-color);
12+
background: var(--view-background);
13+
background-clip: var(--view-background-clip);
14+
}

‎theme/src/main/resources/META-INF/resources/themes/starpass/date-picker.css ‎theme/src/main/resources/META-INF/resources/themes/starpass/date-time-pickers.css

+13-4
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,16 @@ vaadin-month-calendar::part(month-header) {
1919
font-weight: 600;
2020
}
2121

22-
/* TODO would need a dedicated custom property to control the hover background color */
23-
/* vaadin-month-calendar::part(date)::before {
24-
--lumo-primary-color-10pct: var(--lumo-contrast-10pct);
25-
} */
22+
vaadin-date-time-picker vaadin-date-picker {
23+
margin-inline-end: calc(var(--vaadin-input-field-border-width) * -1);
24+
position: relative;
25+
}
26+
27+
vaadin-date-time-picker vaadin-date-picker::after {
28+
content: "";
29+
position: absolute;
30+
height: 100%;
31+
width: var(--vaadin-input-field-border-width);
32+
background: var(--lumo-base-color);
33+
inset-inline-end: 0;
34+
}

‎theme/src/main/resources/META-INF/resources/themes/starpass/dialogs-overlays.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
::part(overlay) {
2+
background: var(--view-glow), hsl(var(--base-h) var(--base-s) max(calc(var(--base-l) + 7%), 8%));
3+
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);
4+
-webkit-backdrop-filter: blur(var(--blur-radius));
5+
backdrop-filter: blur(var(--blur-radius));
6+
font-weight: inherit;
7+
}
8+
9+
10+
vaadin-dialog-overlay::part(header),
11+
vaadin-dialog-overlay::part(footer) {
12+
background: transparent;
13+
}
14+
15+
vaadin-dialog-overlay::part(footer) {
16+
padding: var(--lumo-space-m);
17+
}
18+
19+
/* :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]),
20+
vaadin-item:hover {
21+
background-color: var(--lumo-contrast-10pct);
22+
} */
23+
24+
@media (prefers-reduced-motion) {
25+
26+
:is([opening], [closing]),
27+
:is([opening], [closing])::part(overlay) {
28+
animation: none;
29+
}
30+
31+
vaadin-dialog-overlay:is([opening], [closing]),
32+
vaadin-dialog-overlay:is([opening], [closing])::part(overlay) {
33+
animation: none;
34+
}
35+
}
36+
37+
vaadin-tooltip-overlay {
38+
/* TODO should probably be the default style. Without this, tooltips close to the viewport edge can get scrollbars. */
39+
inset: 0;
40+
}
41+
42+
vaadin-tooltip-overlay::part(overlay) {
43+
font-weight: 500;
44+
}
45+
46+
@media (max-width: 420px), (max-height: 420px) {
47+
:is(vaadin-context-menu-overlay, vaadin-menu-bar-overlay, vaadin-select-overlay)::part(overlay) {
48+
max-height: 80vh;
49+
}
50+
}

‎theme/src/main/resources/META-INF/resources/themes/starpass/menu-bar.css

+4
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ vaadin-menu-bar-item.uncheckable::part(checkmark) {
4343
display: none;
4444
}
4545

46+
vaadin-menu-bar.icon-only vaadin-menu-bar-item> :not(vaadin-icon) {
47+
display: none;
48+
}
49+
4650

4751
@media (pointer: fine) {
4852
vaadin-menu-bar-item {

0 commit comments

Comments
 (0)