Skip to content

Commit e1baa6f

Browse files
jounijouni
committed
dialog base styles
1 parent 46ef96e commit e1baa6f

File tree

3 files changed

+317
-213
lines changed

3 files changed

+317
-213
lines changed

‎dev/dialog.html

Lines changed: 104 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -7,108 +7,135 @@
77
<title>Dialog</title>
88

99
<script type="module">
10-
import './common.js'; // A separate <script type="module"> for this import crashes Safari often
10+
import './common.js';
1111
import '@vaadin/dialog';
1212
import '@vaadin/button';
13+
import '@vaadin/checkbox-group';
14+
import '@vaadin/checkbox';
1315
import '@vaadin/icon';
14-
import '@vaadin/vaadin-lumo-styles/lumo.css';
16+
import '@vaadin/icons';
1517
</script>
16-
</head>
1718

18-
<body>
19-
<vaadin-dialog></vaadin-dialog>
19+
<style>
20+
.content {
21+
display: grid;
22+
gap: 1rem;
23+
justify-items: start;
24+
max-width: 35em;
25+
}
2026

21-
<vaadin-button>Open dialog 1</vaadin-button>
27+
body > .content > div:first-child {
28+
display: none;
29+
}
30+
</style>
2231

2332
<script type="module">
24-
const dialog1 = document.querySelector('vaadin-dialog');
25-
dialog1.headerTitle = 'Title';
26-
dialog1.draggable = true;
27-
dialog1.resizable = true;
28-
29-
dialog1.renderer = (root) => {
30-
if (root.firstChild) {
31-
return;
32-
}
33-
34-
const container = document.createElement('div');
35-
container.style.maxWidth = '40em';
36-
container.style.minWidth = '20em';
37-
root.appendChild(container);
38-
39-
// Second dialog
40-
const dialog2 = document.createElement('vaadin-dialog');
41-
dialog2.renderer = (root2) => {
42-
if (root2.firstChild) {
33+
const defaultOptions = ['title', 'header', 'footer', 'modal', 'resizable', 'draggable'];
34+
document.querySelector('vaadin-checkbox-group').value = defaultOptions;
35+
36+
const openDialog = (e) => {
37+
const dialog = document.createElement('vaadin-dialog');
38+
39+
const scope = e.target.closest('div.content');
40+
const hasTitle = scope.querySelector('[value="title"]').checked;
41+
const hasHeader = scope.querySelector('[value="header"]').checked;
42+
const hasFooter = scope.querySelector('[value="footer"]').checked;
43+
const isModal = scope.querySelector('[value="modal"]').checked;
44+
const hasWidth = scope.querySelector('[value="width"]').checked;
45+
const hasHeight = scope.querySelector('[value="height"]').checked;
46+
const isResizable = scope.querySelector('[value="resizable"]').checked;
47+
const isDraggable = scope.querySelector('[value="draggable"]').checked;
48+
49+
dialog.renderer = (root) => {
50+
if (root.firstChild) {
4351
return;
4452
}
45-
46-
// Close second dialog
47-
const btnClose2 = document.createElement('vaadin-button');
48-
btnClose2.textContent = 'Close dialog 2';
49-
btnClose2.addEventListener('click', () => {
50-
dialog2.opened = false;
51-
});
52-
53-
root2.appendChild(btnClose2);
53+
root.append(scope.cloneNode(true));
54+
root.querySelector('vaadin-checkbox-group').value = defaultOptions;
55+
root.querySelector('vaadin-button').addEventListener('click', openDialog);
5456
};
5557

56-
container.appendChild(dialog2);
58+
if (hasTitle) {
59+
dialog.headerTitle = 'Dialog Title';
60+
}
5761

58-
// Open second dialog
59-
const btnOpen2 = document.createElement('vaadin-button');
60-
btnOpen2.textContent = 'Open dialog 2';
61-
btnOpen2.addEventListener('click', () => {
62-
dialog2.opened = true;
63-
});
62+
if (hasHeader) {
63+
dialog.headerRenderer = (root) => {
64+
if (root.firstChild) {
65+
return;
66+
}
67+
const closeBtn = document.createElement('vaadin-button');
68+
closeBtn.innerHTML = '<vaadin-icon icon="vaadin:close" aria-label="close dialog"></vaadin-icon>';
69+
closeBtn.addEventListener('click', () => {
70+
dialog.opened = false;
71+
});
72+
73+
const text = document.createElement('span');
74+
text.textContent = 'Header content';
75+
76+
root.append(text, closeBtn);
77+
};
78+
}
6479

65-
const text = document.createElement('p');
66-
text.textContent =
67-
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur recusandae laudantium.';
68-
text.style.marginTop = '0';
80+
if (hasFooter) {
81+
dialog.footerRenderer = (root) => {
82+
if (root.firstChild) {
83+
return;
84+
}
85+
const button = document.createElement('vaadin-button');
86+
button.textContent = 'Action';
87+
button.setAttribute('theme', 'primary');
6988

70-
container.append(text, btnOpen2);
71-
};
89+
const button2 = document.createElement('vaadin-button');
90+
button2.textContent = 'Action';
7291

73-
dialog1.headerRenderer = (root) => {
74-
if (root.firstChild) {
75-
return;
76-
}
77-
const button = document.createElement('vaadin-button');
78-
button.innerHTML = '<vaadin-icon icon="lumo:cross" aria-label="close dialog"></vaadin-icon>';
79-
button.theme = 'tertiary-inline icon';
80-
button.addEventListener('click', () => {
81-
dialog1.opened = false;
82-
});
92+
const text = document.createElement('span');
93+
text.textContent = 'Footer content';
8394

84-
const text = document.createElement('span');
85-
text.textContent = 'Header content';
95+
root.append(text, button2, button);
96+
};
97+
}
8698

87-
root.append(text, button);
88-
};
99+
if (hasWidth) {
100+
dialog.width = '300px';
101+
}
89102

90-
dialog1.footerRenderer = (root) => {
91-
if (root.firstChild) {
92-
return;
103+
if (hasHeight) {
104+
dialog.height = '180px';
93105
}
94-
const button = document.createElement('vaadin-button');
95-
button.textContent = 'Action';
96-
button.theme = 'primary';
97106

98-
const button2 = document.createElement('vaadin-button');
99-
button2.textContent = 'Action';
107+
dialog.modeless = !isModal;
108+
dialog.resizable = isResizable;
109+
dialog.draggable = isDraggable;
100110

101-
const text = document.createElement('span');
102-
text.textContent = 'Footer content';
111+
document.body.append(dialog);
112+
dialog.opened = true;
103113

104-
root.append(text, button2, button);
114+
dialog.addEventListener('closed', (e) => {
115+
dialog.parentNode.removeChild(dialog);
116+
});
105117
};
106118

107-
// Open first dialog
108-
const btnOpen1 = document.querySelector('vaadin-button');
109-
btnOpen1.addEventListener('click', () => {
110-
dialog1.opened = true;
111-
});
119+
document.querySelector('vaadin-button').addEventListener('click', openDialog);
112120
</script>
121+
</head>
122+
123+
<body>
124+
<div class="content">
125+
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur recusandae laudantium.</div>
126+
127+
<vaadin-checkbox-group label="Features" theme="horizontal">
128+
<vaadin-checkbox value="title" label="Title"></vaadin-checkbox>
129+
<vaadin-checkbox value="header" label="Header"></vaadin-checkbox>
130+
<vaadin-checkbox value="footer" label="Footer"></vaadin-checkbox>
131+
<vaadin-checkbox value="modal" label="Modal"></vaadin-checkbox>
132+
<vaadin-checkbox value="width" label="Width (300px)"></vaadin-checkbox>
133+
<vaadin-checkbox value="height" label="Width (280px)"></vaadin-checkbox>
134+
<vaadin-checkbox value="resizable" label="Resizable"></vaadin-checkbox>
135+
<vaadin-checkbox value="draggable" label="Draggable"></vaadin-checkbox>
136+
</vaadin-checkbox-group>
137+
138+
<vaadin-button>Open Dialog</vaadin-button>
139+
</div>
113140
</body>
114141
</html>

0 commit comments

Comments
 (0)