Skip to content

Commit 2e59969

Browse files
jouniweb-padawan
jouni
and
web-padawan
authored
refactor: MDL layout and view transitions styles (#9665)
* refactor: MDL layout and view transitions styles * test: update screenshots * Update master-detail-layout.html * fix: vertical drawer size * test: check position on the correct element * test: adjust tests for masterMinSize and detailMinSize * test: update test to use detailSize * test: update snapshot * chore: fix prettier warning in dev page * test: remove test that is no longer valid with new logic * test: check display on the wrapper element * fix: move detail backdrop click listener to detail wrapper * fix: align Lumo CSS with JS version * chore: fix dev page formatting for icon * chore: remove JSDoc for custom CSS properties * chore: add prettier-ignore * fix: split mode transition for RTL --------- Co-authored-by: web-padawan <iamkulykov@gmail.com>
1 parent 191c8b5 commit 2e59969

18 files changed

+488
-520
lines changed

‎dev/master-detail-layout.html‎

Lines changed: 222 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -13,128 +13,259 @@
1313
html,
1414
body {
1515
height: 100%;
16+
margin: 0;
17+
padding: 10px;
18+
box-sizing: border-box;
1619
}
1720

18-
vaadin-master-detail-layout {
19-
border: solid 1px #ccc;
21+
mdl-view {
22+
display: block;
23+
height: 100%;
24+
max-width: 100%;
25+
max-height: 100%;
26+
overflow: hidden;
27+
}
28+
29+
body > mdl-view > vaadin-master-detail-layout {
30+
border: 1px solid lightgray;
31+
resize: both;
32+
}
33+
34+
.master {
35+
box-sizing: border-box;
36+
height: 100%;
37+
padding: 1.5rem;
38+
overflow: auto;
39+
}
40+
41+
.master > header {
42+
display: flex;
43+
align-items: center;
44+
gap: 1em;
45+
}
46+
47+
.master > header > h3 {
48+
flex: auto;
2049
}
2150

22-
vaadin-master-detail-layout[orientation='horizontal'] > [slot='detail'] {
23-
width: var(--detail-size);
51+
.close-btn,
52+
.replace-btn {
53+
visibility: hidden;
54+
position: absolute;
2455
}
2556

26-
vaadin-master-detail-layout[orientation='vertical'] > [slot='detail'] {
27-
height: var(--detail-size);
57+
.detail .close-btn,
58+
.detail .replace-btn {
59+
visibility: visible;
60+
position: relative;
61+
}
62+
63+
.static-detail {
64+
box-sizing: border-box;
65+
height: 100%;
66+
padding: 1.5rem;
67+
overflow: auto;
2868
}
2969
</style>
3070

31-
<p>
32-
<vaadin-checkbox id="showDetail" label="Show detail" checked></vaadin-checkbox>
33-
<vaadin-checkbox id="detailSize" label="Set detail size"></vaadin-checkbox>
34-
<vaadin-checkbox id="detailMinSize" label="Set detail min-size"></vaadin-checkbox>
35-
<vaadin-checkbox id="masterSize" label="Set master size"></vaadin-checkbox>
36-
<vaadin-checkbox id="masterMinSize" label="Set master min-size"></vaadin-checkbox>
37-
<vaadin-checkbox id="containmentViewport" label="Use viewport containment"></vaadin-checkbox>
38-
<vaadin-checkbox id="vertical" label="Use vertical orientation"></vaadin-checkbox>
39-
<vaadin-checkbox id="maxWidth" label="Use max-width on the host"></vaadin-checkbox>
40-
<vaadin-checkbox id="maxHeight" label="Use max-height on the host"></vaadin-checkbox>
41-
<vaadin-checkbox id="forceOverlay" label="Force overlay"></vaadin-checkbox>
42-
<vaadin-checkbox id="stack" label="Use stack mode"></vaadin-checkbox>
43-
<button id="set-small-detail">Set small detail</button>
44-
<button id="set-large-detail">Set large detail</button>
45-
<button id="clear-detail">Clear detail</button>
46-
</p>
47-
48-
<vaadin-master-detail-layout>
49-
<master-content></master-content>
50-
<detail-content slot="detail"></detail-content>
51-
</vaadin-master-detail-layout>
71+
<mdl-view></mdl-view>
72+
73+
<template id="static-detail">
74+
<div class="static-detail">
75+
<vaadin-button>Close</vaadin-button><br />
76+
<vaadin-text-field label="First Name"></vaadin-text-field>
77+
<vaadin-text-field label="Last Name"></vaadin-text-field>
78+
<vaadin-text-field label="Email"></vaadin-text-field>
79+
<vaadin-select label="Country"></vaadin-select>
80+
</div>
81+
</template>
5282

5383
<script type="module">
5484
// Enable feature flag
5585
window.Vaadin ||= {};
5686
window.Vaadin.featureFlags ||= {};
5787
window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
5888

89+
import '@vaadin/button';
5990
import '@vaadin/checkbox';
91+
import '@vaadin/select';
92+
import '@vaadin/text-field';
93+
import '@vaadin/radio-group';
94+
import '@vaadin/icon';
6095
import '@vaadin/master-detail-layout';
61-
import '@vaadin/master-detail-layout/test/helpers/master-content.js';
62-
import '@vaadin/master-detail-layout/test/helpers/detail-content.js';
96+
import '@vaadin/tooltip';
97+
import '@vaadin/vaadin-lumo-styles/icons';
98+
import { html, LitElement, render } from 'lit';
6399

64-
const layout = document.querySelector('vaadin-master-detail-layout');
65-
const detailContent = document.querySelector('detail-content');
100+
window.mdlCount = 1;
66101

67-
document.querySelector('#showDetail').addEventListener('change', (e) => {
68-
if (e.target.checked) {
69-
layout.append(detailContent);
70-
} else {
71-
detailContent.remove();
102+
// prettier-ignore
103+
const lorem = html`Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi suscipit rem, non temporibus
104+
laboriosam maiores distinctio numquam, dolorum ducimus dolores sequi reprehenderit iste consectetur adipisci
105+
delectus aperiam voluptatibus! Vitae, adipisci.`;
106+
107+
class MDLView extends LitElement {
108+
static get is() {
109+
return 'mdl-view';
72110
}
73-
});
74111

75-
document.querySelector('#detailSize').addEventListener('change', (e) => {
76-
layout.detailSize = e.target.checked ? '300px' : null;
77-
});
112+
createRenderRoot() {
113+
return this;
114+
}
78115

79-
document.querySelector('#detailMinSize').addEventListener('change', (e) => {
80-
layout.detailMinSize = e.target.checked ? '300px' : null;
81-
});
116+
createDetail() {
117+
const temp = document.createElement('div');
118+
render(html`<mdl-view class="detail"></mdl-view>`, temp, { host: this });
119+
return temp.firstElementChild;
120+
}
82121

83-
document.querySelector('#masterSize').addEventListener('change', (e) => {
84-
layout.masterSize = e.target.checked ? '300px' : null;
85-
});
122+
firstUpdated() {
123+
this._mdl = this.querySelector('vaadin-master-detail-layout');
124+
this._parentMdl = this.closest('vaadin-master-detail-layout');
125+
}
86126

87-
document.querySelector('#masterMinSize').addEventListener('change', (e) => {
88-
layout.masterMinSize = e.target.checked ? '300px' : null;
89-
});
127+
openDetail() {
128+
window.mdlCount++;
129+
this._mdl._setDetail(this.createDetail());
130+
}
90131

91-
document.querySelector('#containmentViewport').addEventListener('change', (e) => {
92-
layout.containment = e.target.checked ? 'viewport' : 'layout';
93-
});
132+
openStaticDetail() {
133+
const detail = document.querySelector('#static-detail').content.firstElementChild.cloneNode(true);
134+
detail.querySelector('vaadin-button').onclick = () => {
135+
detail.closest('vaadin-master-detail-layout')._setDetail(null);
136+
};
137+
this._mdl._setDetail(detail);
138+
}
94139

95-
document.querySelector('#vertical').addEventListener('change', (e) => {
96-
layout.orientation = e.target.checked ? 'vertical' : 'horizontal';
97-
});
140+
closeDetail() {
141+
this._mdl._setDetail(null);
142+
}
98143

99-
document.querySelector('#maxWidth').addEventListener('change', (e) => {
100-
if (e.target.checked) {
101-
layout.style.maxWidth = '800px';
102-
} else {
103-
layout.style.maxWidth = '';
144+
closeParentDetail() {
145+
this._parentMdl._setDetail(null);
104146
}
105-
});
106147

107-
document.querySelector('#maxHeight').addEventListener('change', (e) => {
108-
if (e.target.checked) {
109-
layout.style.maxHeight = '600px';
110-
} else {
111-
layout.style.maxHeight = '';
148+
replaceDetail() {
149+
window.mdlCount++;
150+
const detail = this.createDetail();
151+
const prop = this._parentMdl.orientation == 'vertical' ? 'height' : 'width';
152+
if (this.style.getPropertyValue(prop) != '500px') {
153+
detail.style.setProperty(prop, '500px');
154+
} else {
155+
detail.style.setProperty(prop, '300px');
156+
}
157+
this._parentMdl._setDetail(detail);
112158
}
113-
});
114-
115-
document.querySelector('#forceOverlay').addEventListener('change', (e) => {
116-
layout.forceOverlay = e.target.checked;
117-
});
118-
119-
document.querySelector('#stack').addEventListener('change', (e) => {
120-
layout.stackOverlay = e.target.checked;
121-
});
122-
123-
document.querySelector('#set-small-detail').addEventListener('click', () => {
124-
const detail = document.createElement('detail-content');
125-
detail.style.setProperty('--detail-size', '200px');
126-
layout._setDetail(detail);
127-
});
128-
129-
document.querySelector('#set-large-detail').addEventListener('click', () => {
130-
const detail = document.createElement('detail-content');
131-
detail.style.setProperty('--detail-size', '600px');
132-
layout._setDetail(detail);
133-
});
134-
135-
document.querySelector('#clear-detail').addEventListener('click', () => {
136-
layout._setDetail(null);
137-
});
159+
160+
render() {
161+
return html`
162+
<vaadin-master-detail-layout>
163+
<div class="master">
164+
<header>
165+
<vaadin-button
166+
aria-label="close detail view"
167+
class="close-btn"
168+
theme="tertiary contrast icon"
169+
@click=${this.closeParentDetail}
170+
>
171+
<vaadin-icon icon="lumo:arrow-left"></vaadin-icon>
172+
</vaadin-button>
173+
<h3>View ${window.mdlCount}</h3>
174+
<vaadin-button
175+
aria-label="replace detail view"
176+
class="replace-btn"
177+
theme="tertiary icon"
178+
@click=${this.replaceDetail}
179+
>
180+
<vaadin-icon icon="lumo:reload">
181+
<vaadin-tooltip
182+
slot="tooltip"
183+
text="Replace with another detail view with different size"
184+
></vaadin-tooltip>
185+
</vaadin-icon>
186+
</vaadin-button>
187+
</header>
188+
<vaadin-radio-group
189+
@change=${this._configChange}
190+
class="orientation"
191+
label="Orientation"
192+
theme="vertical"
193+
value="horizontal"
194+
>
195+
<vaadin-radio-button value="horizontal" label="Horizontal"></vaadin-radio-button>
196+
<vaadin-radio-button value="vertical" label="Vertical"></vaadin-radio-button>
197+
</vaadin-radio-group>
198+
<vaadin-radio-group
199+
@change=${this._configChange}
200+
class="containment"
201+
label="Containment"
202+
theme="vertical"
203+
value="layout"
204+
>
205+
<vaadin-radio-button value="layout" label="Layout"></vaadin-radio-button>
206+
<vaadin-radio-button value="viewport" label="Viewport"></vaadin-radio-button>
207+
</vaadin-radio-group>
208+
<br />
209+
<vaadin-radio-group
210+
@change=${this._configChange}
211+
class="masterSize"
212+
label="Master Size"
213+
theme="vertical"
214+
value="auto"
215+
>
216+
<vaadin-radio-button value="auto" label="Auto"></vaadin-radio-button>
217+
<vaadin-radio-button value="250px" label="250px"></vaadin-radio-button>
218+
<vaadin-radio-button value="30%" label="30%"></vaadin-radio-button>
219+
</vaadin-radio-group>
220+
<vaadin-radio-group
221+
@change=${this._configChange}
222+
class="masterMinSize"
223+
label="Master Min Size"
224+
theme="vertical"
225+
value="none"
226+
>
227+
<vaadin-radio-button value="none" label="None"></vaadin-radio-button>
228+
<vaadin-radio-button value="250px" label="250px"></vaadin-radio-button>
229+
<vaadin-radio-button value="100%" label="100%"></vaadin-radio-button>
230+
</vaadin-radio-group>
231+
<br />
232+
<vaadin-button @click=${this.openStaticDetail}>Open Static Detail</vaadin-button>
233+
<vaadin-button @click=${this.openDetail}>Open Nested Test View</vaadin-button>
234+
<br />
235+
<vaadin-radio-group
236+
@change=${this._configChange}
237+
class="detailSize"
238+
label="Detail Size"
239+
theme="vertical"
240+
value="auto"
241+
>
242+
<vaadin-radio-button value="auto" label="Auto"></vaadin-radio-button>
243+
<vaadin-radio-button value="300px" label="300px"></vaadin-radio-button>
244+
<vaadin-radio-button value="70%" label="70%"></vaadin-radio-button>
245+
</vaadin-radio-group>
246+
<vaadin-radio-group
247+
@change=${this._configChange}
248+
class="detailMinSize"
249+
label="Detail Min Size"
250+
theme="vertical"
251+
value="none"
252+
>
253+
<vaadin-radio-button value="none" label="None"></vaadin-radio-button>
254+
<vaadin-radio-button value="400px" label="400px"></vaadin-radio-button>
255+
<vaadin-radio-button value="100%" label="100%"></vaadin-radio-button>
256+
</vaadin-radio-group>
257+
<p>${lorem}</p>
258+
</div>
259+
</vaadin-master-detail-layout>
260+
`;
261+
}
262+
263+
_configChange(e) {
264+
this._mdl[e.currentTarget.className] = e.target.value.match(/auto|none/) ? null : e.target.value;
265+
}
266+
}
267+
268+
customElements.define(MDLView.is, MDLView);
138269
</script>
139270
</body>
140271
</html>

0 commit comments

Comments
 (0)