Skip to content

Commit 0147d37

Browse files
rolfsmedsrolfsmeds
authored
feat: base, Aura and Lumo styles for MessageList attachments (#11204)
* Initial base styles impl * Initial Lumo styles impl * Initial Aura styles for message attachments * Refaced Aura attachment styles to use button styles
1 parent b910e1c commit 0147d37

File tree

6 files changed

+127
-22
lines changed

6 files changed

+127
-22
lines changed

‎packages/aura/aura.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
@import './src/components/master-detail-layout.css';
2828
@import './src/components/menu-bar.css';
2929
@import './src/components/message-input.css';
30+
@import './src/components/message-list.css';
3031
@import './src/components/multi-select-combo-box.css';
3132
@import './src/components/notification.css';
3233
@import './src/components/overlay.css';

‎packages/aura/src/color.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ vaadin-crud-edit,
6363
vaadin-drawer-toggle,
6464
vaadin-menu-bar-button,
6565
vaadin-menu-bar-item,
66+
vaadin-message::part(attachment),
6667
vaadin-notification-container,
6768
vaadin-notification-card,
6869
vaadin-notification-card::part(overlay),

‎packages/aura/src/components/button.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
--vaadin-button-shadow: var(--aura-shadow-xs);
44
}
55

6+
vaadin-message::part(attachment),
67
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
78
transition: scale 180ms;
89
position: relative;
@@ -14,6 +15,7 @@ vaadin-drawer-toggle[theme~='tertiary']::part(icon) {
1415
opacity: 0.6;
1516
}
1617

18+
vaadin-message::part(attachment),
1719
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
1820
:not([theme~='tertiary'])
1921
) {
@@ -23,11 +25,13 @@ vaadin-drawer-toggle[theme~='tertiary']::part(icon) {
2325
}
2426

2527
/* prettier-ignore */
28+
vaadin-message::part(attachment),
2629
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
2730
background: var(--vaadin-button-background, var(--_background));
2831
border-color: var(--vaadin-button-border-color, var(--aura-accent-border-color));
2932
}
3033

34+
vaadin-message::part(attachment),
3135
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
3236
:not([theme~='primary'])
3337
) {
@@ -75,6 +79,7 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
7579
color: color-mix(in srgb, currentColor 50%, transparent);
7680
}
7781

82+
vaadin-message::part(attachment)::before,
7883
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
7984
[disabled]
8085
)::before {
@@ -91,6 +96,7 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
9196
}
9297

9398
@supports (color: hsl(0 0 0)) {
99+
vaadin-message::part(attachment)::before,
94100
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
95101
[disabled]
96102
)::before {
@@ -100,6 +106,7 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
100106

101107
@media (any-hover: hover) {
102108
/* prettier-ignore */
109+
vaadin-message::part(attachment):hover:not(:active)::before,
103110
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
104111
opacity: 0.03;
105112
}
@@ -112,18 +119,21 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
112119

113120
@media (min-resolution: 2x) {
114121
/* prettier-ignore */
122+
vaadin-message::part(attachment):active,
115123
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled='true']) {
116124
scale: 0.98;
117125
transition-duration: 50ms;
118126
}
119127
}
120128

129+
vaadin-message::part(attachment):active,
121130
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
122131
[disabled]
123132
) {
124133
box-shadow: none;
125134
}
126135

136+
vaadin-message::part(attachment):active::before,
127137
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
128138
[disabled]
129139
)::before {

‎packages/aura/src/components/message-list.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
vaadin-message::part(attachment) {
2+
padding: 0 var(--vaadin-padding-xs) 0 0;
3+
overflow: hidden;
4+
border-width: 1px;
5+
border-style: solid;
6+
border-color: var(--vaadin-button-border-color, var(--aura-accent-border-color));
7+
min-height: var(--_prefix-area-size);
8+
border-radius: var(--vaadin-radius-m);
9+
}
10+
11+
vaadin-message::part(attachment-image) {
12+
padding: 0;
13+
}
14+
15+
vaadin-message::part(attachment-preview) {
16+
object-fit: cover;
17+
}

‎packages/message-list/src/styles/vaadin-message-base-styles.js‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -70,46 +70,56 @@ export const messageStyles = css`
7070
[part='attachments'] {
7171
display: flex;
7272
flex-wrap: wrap;
73-
gap: 6px;
73+
gap: var(--vaadin-gap-s);
7474
}
7575
7676
[part~='attachment'] {
77-
display: inline-flex;
77+
--_prefix-area-size: 2rem;
78+
display: inline-grid;
79+
grid-template-columns: var(--_prefix-area-size) auto;
7880
align-items: center;
81+
background: var(--vaadin-background-container);
7982
color: inherit;
80-
background: none;
8183
border: none;
8284
padding: 0;
8385
margin: 0;
8486
font: inherit;
85-
cursor: pointer;
8687
text-align: start;
8788
}
8889
89-
[part~='attachment-image'] [part='attachment-preview'] {
90-
display: block;
91-
max-width: 200px;
92-
max-height: 150px;
93-
}
94-
95-
[part~='attachment-file'] {
96-
gap: 6px;
97-
}
98-
9990
[part='attachment-icon'] {
100-
display: inline-block;
101-
width: 1em;
102-
height: 1em;
103-
background: currentColor;
104-
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
105-
mask-size: contain;
106-
mask-repeat: no-repeat;
107-
flex-shrink: 0;
91+
width: 100%;
92+
aspect-ratio: 1 / 1;
93+
align-items: center;
94+
justify-content: center;
95+
grid-column: 1;
96+
text-align: center;
97+
98+
&::before {
99+
/* TODO: Replace with vaadin file icon, once it exists. */
100+
content: '';
101+
display: inline-flex;
102+
align-items: center;
103+
flex: none;
104+
height: var(--vaadin-icon-size, 1lh);
105+
width: var(--vaadin-icon-size, 1lh);
106+
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
107+
mask-size: contain;
108+
background: currentColor;
109+
}
110+
}
111+
112+
[part='attachment-preview'] {
113+
grid-column: 1;
114+
width: 100%;
115+
aspect-ratio: 1 / 1;
108116
}
109117
110118
[part='attachment-name'] {
119+
grid-column: 2;
111120
overflow: hidden;
112121
text-overflow: ellipsis;
113122
white-space: nowrap;
123+
margin-inline-end: var(--vaadin-padding-s);
114124
}
115125
`;

‎packages/vaadin-lumo-styles/src/components/message.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,70 @@
5454
:host([focus-ring]) {
5555
box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
5656
}
57+
58+
[part='attachments'] {
59+
margin-block: var(--lumo-space-xs);
60+
}
61+
62+
[part~='attachment'] {
63+
--_prefix-area-size: var(--lumo-size-m);
64+
min-width: var(--_prefix-area-size);
65+
color: var(--lumo-body-text-color);
66+
min-height: var(--_prefix-area-size);
67+
border-radius: var(--lumo-border-radius-l);
68+
overflow: hidden;
69+
position: relative;
70+
71+
& [part='attachment-icon'] {
72+
color: var(--lumo-secondary-text-color);
73+
background: var(--lumo-contrast-5pct);
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
78+
&::before {
79+
height: var(--lumo-icon-size-s);
80+
width: var(--lumo-icon-size-s);
81+
}
82+
}
83+
84+
& [part='attachment-preview'] {
85+
width: var(--_prefix-area-size);
86+
object-fit: cover;
87+
}
88+
89+
& [part='attachment-name'] {
90+
margin-inline: var(--lumo-space-s);
91+
font-size: var(--lumo-font-size-xs);
92+
}
93+
94+
&::after {
95+
content: '';
96+
position: absolute;
97+
z-index: 1;
98+
inset: 0;
99+
background: currentColor;
100+
border-radius: inherit;
101+
opacity: 0;
102+
pointer-events: none;
103+
filter: blur(8px);
104+
}
105+
106+
&:hover::after {
107+
opacity: 0.02;
108+
}
109+
110+
&:focus {
111+
outline: none;
112+
box-shadow:
113+
0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
114+
0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-color);
115+
}
116+
117+
&:active::after {
118+
opacity: 0.1;
119+
transition-duration: 0s, 0s;
120+
transform: scale(0);
121+
}
122+
}
57123
}

0 commit comments

Comments
 (0)