Skip to content

Commit 4872daf

Browse files
rstoenescurstoenescu
committed
feat: Finalize Dialogs
1 parent d1f008f commit 4872daf

File tree

7 files changed

+90
-51
lines changed

7 files changed

+90
-51
lines changed

‎dev/components/global/dialog.vue‎

Lines changed: 70 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,36 @@
44
<q-dialog
55
v-model="showDialog"
66
ref="dialog"
7-
title="The title"
8-
message="The message"
9-
@show="onShow"
10-
@hide="onHide"
7+
stack-buttons
118
@cancel="onCancel"
129
@ok="onOk"
10+
@show="onShow"
11+
@hide="onHide"
1312
>
14-
<!-- <template slot="buttons" slot-scope="props">
15-
<q-btn flat label="Cancel" @click="props.cancel(onCancel)" />
16-
<q-btn flat label="OK" @click="props.ok(onOK)" />
17-
</template> -->
13+
<!-- This or use "title" prop on <q-dialog> -->
14+
<span slot="title">Favorite Superhero</span>
15+
16+
<!-- This or use "message" prop on <q-dialog> -->
17+
<span slot="message">What is your superhero of choice?</span>
18+
19+
<div slot="body">
20+
<q-field
21+
icon="account_circle"
22+
helper="We need your name so we can send you to the movies."
23+
label="Your name"
24+
:label-width="3"
25+
:error="nameError"
26+
>
27+
<q-input v-model="name" />
28+
</q-field>
29+
</div>
30+
31+
<template slot="buttons" slot-scope="props">
32+
<q-btn color="primary" label="Choose Superman" @click="choose(props.ok, 'Superman')" />
33+
<q-btn color="black" label="Choose Batman" @click="choose(props.ok, 'Batman')" />
34+
<q-btn color="negative" label="Choose Spiderman" @click="choose(props.ok, 'Spiderman')" />
35+
<q-btn flat label="No thanks" @click="props.cancel()" />
36+
</template>
1837
</q-dialog>
1938

2039
{{ showDialog }}
@@ -30,29 +49,44 @@
3049

3150
<script>
3251
export default {
33-
data () {
34-
return {
35-
showDialog: false
36-
}
37-
},
3852
methods: {
53+
openSpecialPosition (position) {
54+
this.$q.dialog({
55+
title: 'Positioned',
56+
message: `This dialog appears from ${position}.`,
57+
position
58+
})
59+
},
3960
toggle () {
4061
this.$refs.dialog.show()
4162
},
4263
toggle2 () {
4364
this.showDialog = !this.showDialog
4465
},
45-
onOk (data) {
46-
console.log('>>> onOK', data)
66+
onOk () {
67+
console.log('ok')
4768
},
48-
onCancel (data) {
49-
console.log('>>> onCancel', data)
69+
onCancel () {
70+
console.log('cancel')
5071
},
51-
onHide (data) {
52-
console.log('>>> onHide', data)
72+
onShow () {
73+
console.log('show')
5374
},
54-
onShow (data) {
55-
console.log('>>> onShow', data)
75+
onHide () {
76+
console.log('hide')
77+
},
78+
async choose (okFn, hero) {
79+
if (this.name.length === 0) {
80+
this.error = true
81+
this.$q.dialog({
82+
title: 'Please specify your name!',
83+
message: `Can't buy tickets without knowing your name.`
84+
})
85+
}
86+
else {
87+
await okFn()
88+
this.$q.notify(`Ok ${this.name}, going with ${hero}`)
89+
}
5690
},
5791
adHoc () {
5892
this.$q.dialog({
@@ -106,6 +140,21 @@ export default {
106140
console.log('>>> Cancel')
107141
})
108142
}
143+
},
144+
watch: {
145+
name (val) {
146+
const err = val.length === 0
147+
if (this.nameError !== err) {
148+
this.nameError = err
149+
}
150+
}
151+
},
152+
data () {
153+
return {
154+
showDialog: false,
155+
name: '',
156+
nameError: false
157+
}
109158
}
110159
}
111160
</script>

‎src/components/datetime/QDatetime.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,7 @@ export default {
179179
color: this.color,
180180
flat: true,
181181
label: this.cancelLabel || this.$q.i18n.label.cancel,
182-
waitForRipple: true,
183-
dense: true
182+
waitForRipple: true
184183
},
185184
on: { click: this.hide }
186185
}),
@@ -190,8 +189,7 @@ export default {
190189
color: this.color,
191190
flat: true,
192191
label: this.okLabel || this.$q.i18n.label.set,
193-
waitForRipple: true,
194-
dense: true
192+
waitForRipple: true
195193
},
196194
on: {
197195
click: () => {

‎src/components/dialog/QDialog.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,22 @@ export default {
4141
if (msg) {
4242
child.push(
4343
h('div', {
44-
staticClass: 'modal-body modal-scroll'
44+
staticClass: 'modal-body modal-message modal-scroll'
4545
}, [ msg ])
4646
)
4747
}
4848

49-
child.push(
50-
h(
51-
'div',
52-
{ staticClass: 'modal-body modal-scroll' },
53-
this.hasForm
54-
? (this.prompt ? this.__getPrompt(h) : this.__getOptions(h))
55-
: [ this.$slots.default ]
49+
if (this.hasForm || this.$slots.body) {
50+
child.push(
51+
h(
52+
'div',
53+
{ staticClass: 'modal-body modal-scroll' },
54+
this.hasForm
55+
? (this.prompt ? this.__getPrompt(h) : this.__getOptions(h))
56+
: [ this.$slots.body ]
57+
)
5658
)
57-
)
59+
}
5860

5961
if (this.$scopedSlots.buttons) {
6062
child.push(

‎src/components/modal/modal.ios.styl‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,9 @@ maximized-modal()
7070

7171
.modal-body
7272
padding $modal-body-padding
73-
.modal-slim-body
74-
padding $modal-slim-body-padding
75-
.modal-body, .modal-slim-body
76-
text-align $modal-body-text-align
7773
color $modal-body-color
74+
.modal-message
75+
text-align center
7876

7977
.small-modal-scroll, .modal-scroll, .big-modal-scroll
8078
overflow auto

‎src/components/modal/modal.mat.styl‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,6 @@ maximized-modal()
6868

6969
.modal-body
7070
padding $modal-body-padding
71-
.modal-slim-body
72-
padding $modal-slim-body-padding
73-
.modal-body, .modal-slim-body
74-
text-align $modal-body-text-align
7571
color $modal-body-color
7672

7773
.small-modal-scroll, .modal-scroll, .big-modal-scroll

‎src/css/variables.ios.styl‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -148,12 +148,10 @@ $modal-max-width ?= 1000px
148148
$modal-height ?= 80vh
149149
$modal-max-height ?= 1000px
150150
$modal-header-font-size ?= 1.3rem
151-
$modal-header-padding ?= 20px 16px 7px
151+
$modal-header-padding ?= 20px 16px 10px
152152
$modal-header-text-align ?= center
153-
$modal-body-text-align ?= left
154153
$modal-body-color ?= black
155-
$modal-body-padding ?= 0 16px 21px
156-
$modal-slim-body-padding ?= 0 16px 16px 16px
154+
$modal-body-padding ?= 10px 16px 21px
157155
$modal-scroll-size ?= 240px
158156
$modal-buttons-padding ?= 0
159157
$modal-border-radius ?= 13px

‎src/css/variables.mat.styl‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -150,14 +150,12 @@ $modal-max-width ?= 1000px
150150
$modal-height ?= 80vh
151151
$modal-max-height ?= 1000px
152152
$modal-header-font-size ?= 1.6rem
153-
$modal-header-padding ?= 24px 24px 20px 24px
153+
$modal-header-padding ?= 24px 24px 10px 24px
154154
$modal-header-text-align ?= left
155-
$modal-body-text-align ?= left
156155
$modal-body-color ?= rgba(0, 0, 0, .5)
157-
$modal-body-padding ?= 5px 24px 24px 24px
158-
$modal-slim-body-padding ?= 0 24px
156+
$modal-body-padding ?= 10px 24px
159157
$modal-scroll-size ?= 240px
160-
$modal-buttons-padding ?= 8px
158+
$modal-buttons-padding ?= 22px 8px 8px
161159

162160
$label-offset ?= 8px
163161

0 commit comments

Comments
 (0)