fix: support title and dialogProps in default dialog container
Massimo Melina committed
Jan 8, 2023 at 12:19 UTC
948db099a924bc81391ca54df4728907b5ecf7a2
4 files changed
+19
-7
frontend/src/components.ts
+2
-1
@@ -7,12 +7,13 @@ export function Spinner() {
7
return hIcon('spinner', { className:'spinner' })
8
}
9
10
-export function Flex({ gap='1em', vert=false, children=null }) {
10
+export function Flex({ gap='1em', vert=false, children=null, ...props }) {
11
return h('div', {
12
style: {
13
display: 'flex',
14
gap,
15
flexDirection: vert ? 'column' : undefined,
16
+ ...props,
17
}
18
}, children)
19
}
frontend/src/dialog.css
+7
@@ -30,6 +30,13 @@
30
text-align: center;
31
border-radius: .8em 0;
32
}
33
+.dialog-title {
34
+ margin-top: -5px;
35
+ font-size: 110%;
36
+}
37
+.dialog-icon ~ .dialog-title {
38
+ text-align: center;
39
+}
40
.dialog-closer {
41
border-radius: 0 0.8em;
42
right: 0;
frontend/src/index.scss
+4
-3
@@ -18,7 +18,9 @@
18
body { color-scheme: dark; }
19
a { color:#8ac; }
20
.dialog-closer { background: #633 }
21
- .dialog-icon { color: #ccc; }
21
+ .dialog-icon { color: #ccc;
22
+ .icon { color: #aaa; margin-left: -1px; font-size:95%; }
23
+ }
24
.dialog-backdrop { background: #333b; }
25
}
26
}
@@ -245,8 +247,7 @@ button label {
247
padding: .2em; /* give space for focus outline */
248
}
249
248
-.dialog-confirm,
249
-.dialog-prompt {
250
+.dialog {
251
--color: var(--button-bg);
252
}
253
shared/dialogs.ts
+6
-3
@@ -8,7 +8,7 @@ export interface DialogOptions {
8
closable?: boolean,
9
onClose?: (v?:any)=> any,
10
className?: string,
11
- icon?: string | ReactNode,
11
+ icon?: string | ReactNode | FunctionComponent,
12
closableContent?: string | ReactNode,
13
reserveClosing?: true
14
noFrame?: boolean
@@ -53,14 +53,17 @@ function Dialog(d:DialogOptions) {
53
className: 'dialog',
54
onClick(ev:any){
55
ev.stopPropagation()
56
- }
56
+ },
57
+ ...d.dialogProps,
58
},
59
d.closable || d.closable===undefined
60
&& h('button', {
61
className: 'dialog-icon dialog-closer',
62
onClick() { closeDialog() }
63
}, d.closableContent),
63
- d.icon && h('div', { className: 'dialog-icon dialog-type' }, d.icon),
64
+ d.icon && h('div', { className: 'dialog-icon dialog-type' },
65
+ typeof d.icon === 'function' ? h(d.icon) : d.icon),
66
+ h('div', { className: 'dialog-title' }, d.title),
67
h('div', { className: 'dialog-content' }, h(d.Content || 'div'))
68
)
69
)