Skip to content

Commit db5efea

Browse files
rstoenescurstoenescu
committed
refactor: Popover - simplify logic; no anchor-ref necessary anymore
Just place <quasar-popover> inside the anchor DOM element or component. Popover won't inherit CSS from anchor since it will be injected as a direct child of document body.
1 parent b0aa66c commit db5efea

File tree

14 files changed

+165
-213
lines changed

14 files changed

+165
-213
lines changed

‎dev/components/components/context-menu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<div class="layout-padding" style="margin-bottom: 1000px;">
3+
<div class="layout-padding" style="padding-bottom: 1000px;">
44
<p class="caption">
55
<span class="desktop-only">
66
Right click anywhere on the Page below (not on header though).

‎dev/components/components/popover.vue‎

Lines changed: 79 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,53 +8,57 @@
88
</p>
99

1010
<div>
11-
<button ref="target1" class="primary">
11+
<button class="primary">
1212
<i>assignment</i>
13-
</button>
14-
<quasar-popover anchor-ref="target1" ref="popover1">
15-
<div class="list highlight" style="min-width: 150px; max-height: 500px;">
16-
<div
17-
class="item item-link two-lines item-delimiter"
18-
v-for="n in 20"
19-
@click="showToast(), $refs.popover1.close()"
20-
>
21-
<div class="item-content">
22-
<div>Label</div>
23-
<div>Value</div>
13+
14+
<quasar-popover ref="popover1">
15+
<div class="list highlight" style="min-width: 150px; max-height: 500px;">
16+
<div
17+
class="item item-link two-lines item-delimiter"
18+
v-for="n in 20"
19+
@click="showToast(), $refs.popover1.close()"
20+
>
21+
<div class="item-content">
22+
<div>Label</div>
23+
<div>Value</div>
24+
</div>
2425
</div>
2526
</div>
26-
</div>
27-
</quasar-popover>
27+
</quasar-popover>
28+
</button>
2829

2930
<button ref="target4" class="negative">
3031
Disabled Popover
32+
33+
<quasar-popover disable>
34+
This Popover content won't be shown because of "disable"
35+
</quasar-popover>
3136
</button>
32-
<quasar-popover anchor-ref="target4" disable>
33-
This Popover content won't be shown because of "disable"
34-
</quasar-popover>
3537

3638
<div class="card" style="margin-top: 75px">
3739
<div class="card-title bg-primary text-center">
38-
<button ref="target2" class="orange push">Tap</button>
39-
</div>
40-
<quasar-popover
41-
anchor-ref="target2"
42-
ref="popover2"
43-
:anchor-origin="anchorOrigin"
44-
:target-origin="targetOrigin"
45-
>
46-
<div class="list highlight" style="min-width: 100px">
47-
<div
48-
class="item item-link item-delimiter"
49-
v-for="n in 3"
50-
@click="showToast(), $refs.popover2.close()"
40+
<button class="orange push">
41+
Tap
42+
43+
<quasar-popover
44+
ref="popover2"
45+
:anchor-origin="anchorOrigin"
46+
:target-origin="targetOrigin"
5147
>
52-
<div class="item-content">
53-
Label
48+
<div class="list highlight" style="min-width: 100px">
49+
<div
50+
class="item item-link item-delimiter"
51+
v-for="n in 3"
52+
@click="showToast(), $refs.popover2.close()"
53+
>
54+
<div class="item-content">
55+
Label
56+
</div>
57+
</div>
5458
</div>
55-
</div>
56-
</div>
57-
</quasar-popover>
59+
</quasar-popover>
60+
</button>
61+
</div>
5862

5963
<p class="caption text-center">Configure the Popover for button above.</p>
6064
<div class="card-content group row sm-column">
@@ -133,7 +137,7 @@
133137
</div>
134138

135139
<br><br>
136-
<div style="margin-bottom: 700px;">
140+
<span>
137141
<img ref="target3" :src="'statics/map.png'" class="responsive">
138142
<quasar-popover anchor-ref="target3" ref="popover3" touch-position>
139143
<div class="list highlight" style="min-width: 200px; max-height: 300px;">
@@ -149,53 +153,58 @@
149153
</div>
150154
</div>
151155
</quasar-popover>
152-
</div>
156+
</span>
153157

154-
<button ref="target5" class="secondary absolute-top-right" style="top: 10px; right: 10px; right: 16px;">
158+
<div style="margin-bottom: 700px;"></div>
159+
160+
<button class="secondary absolute-top-right" style="top: 10px; right: 10px; right: 16px;">
155161
<i>directions</i>
156-
</button>
157-
<quasar-popover anchor-ref="target5" ref="popover5">
158-
<img
162+
163+
<quasar-popover ref="popover5">
164+
<img
159165
:src="'statics/map.png'"
160166
style="height: 150px; width: 200px;"
161167
@click="showToast(), $refs.popover5.close()">
162-
</quasar-popover>
168+
</quasar-popover>
169+
</button>
163170

164-
<button ref="target6" class="tertiary absolute-bottom-right" style="bottom: 10px; right: 16px;">
171+
<button class="tertiary absolute-bottom-right" style="bottom: 10px; right: 16px;">
165172
<i>plus_one</i>
173+
174+
<quasar-popover ref="popover6">
175+
<div class="group" style="width: 200px; height: 50px; text-align: center;">
176+
<button class="primary clear" @click="showToast(), $refs.popover6.close()">
177+
<i>thumb_up</i>
178+
</button>
179+
<button class="primary clear" @click="showToast(), $refs.popover6.close()">
180+
<i>thumb_down</i>
181+
</button>
182+
<button class="secondary clear" @click="showToast(), $refs.popover6.close()">
183+
<i>share</i>
184+
</button>
185+
</div>
186+
</quasar-popover>
166187
</button>
167-
<quasar-popover anchor-ref="target6" ref="popover6">
168-
<div class="group" style="width: 200px; height: 50px; text-align: center;">
169-
<button class="primary clear" @click="showToast(), $refs.popover6.close()">
170-
<i>thumb_up</i>
171-
</button>
172-
<button class="primary clear" @click="showToast(), $refs.popover6.close()">
173-
<i>thumb_down</i>
174-
</button>
175-
<button class="secondary clear" @click="showToast(), $refs.popover6.close()">
176-
<i>share</i>
177-
</button>
178-
</div>
179-
</quasar-popover>
180188
</div>
181189

182-
<button ref="target7" class="primary absolute-bottom-left" style="bottom: 10px; left: 10px;">
190+
<button class="primary absolute-bottom-left" style="bottom: 10px; left: 10px;">
183191
<i>menu</i>
184-
</button>
185-
<quasar-popover anchor-ref="target7" ref="popover7">
186-
<div class="list highlight" style="min-width: 150px">
187-
<div
188-
class="item item-link two-lines item-delimiter"
189-
v-for="n in 20"
190-
@click="showToast(), $refs.popover7.close()"
191-
>
192-
<div class="item-content">
193-
<div>Label</div>
194-
<div>Value</div>
192+
193+
<quasar-popover ref="popover7">
194+
<div class="list highlight" style="min-width: 150px">
195+
<div
196+
class="item item-link two-lines item-delimiter"
197+
v-for="n in 20"
198+
@click="showToast(), $refs.popover7.close()"
199+
>
200+
<div class="item-content">
201+
<div>Label</div>
202+
<div>Value</div>
203+
</div>
195204
</div>
196205
</div>
197-
</div>
198-
</quasar-popover>
206+
</quasar-popover>
207+
</button>
199208
</div>
200209
</div>
201210
</template>

‎dev/components/css/list.vue‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -288,25 +288,26 @@
288288
<div>Brunch this weekend?</div>
289289
</div>
290290
<div class="item-secondary">
291-
<i ref="target">
291+
<i>
292292
more_vert
293293
</i>
294+
295+
<quasar-popover ref="popover">
296+
<div class="list">
297+
<div class="item item-link" @click="$refs.popover.close()">
298+
<div class="item-content">Reply</div>
299+
</div>
300+
<div class="item item-link" @click="$refs.popover.close()">
301+
<div class="item-content">Forward</div>
302+
</div>
303+
<div class="item item-link" @click="$refs.popover.close()">
304+
<div class="item-content">Delete</div>
305+
</div>
306+
</div>
307+
</quasar-popover>
294308
</div>
295309
</div>
296310
</div>
297-
<quasar-popover ref="popover" anchor-ref="target">
298-
<div class="list">
299-
<div class="item item-link" @click="$refs.popover.close()">
300-
<div class="item-content">Reply</div>
301-
</div>
302-
<div class="item item-link" @click="$refs.popover.close()">
303-
<div class="item-content">Forward</div>
304-
</div>
305-
<div class="item item-link" @click="$refs.popover.close()">
306-
<div class="item-content">Delete</div>
307-
</div>
308-
</div>
309-
</quasar-popover>
310311

311312
<div class="list" style="max-width: 400px">
312313
<div class="item">

‎dev/components/web-tests/fast-test.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,5 @@
1212
</template>
1313

1414
<script>
15-
export default {
16-
data () {
17-
return {
18-
model: ''
19-
}
20-
}
21-
}
15+
export default {}
2216
</script>

‎src/vue-components/context-menu/ContextMenuDesktop.vue‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
<template>
2-
<quasar-popover ref="popover" @close="__cleanup()">
2+
<quasar-popover ref="popover" :anchor-click="false">
33
<slot></slot>
44
</quasar-popover>
55
</template>
66

77
<script>
8-
import Utils from '../../utils'
9-
108
export default {
119
props: {
1210
disable: Boolean
@@ -16,24 +14,14 @@ export default {
1614
this.$refs.popover.close()
1715
},
1816
__open (event) {
19-
if (this.disable) {
20-
return
17+
if (!this.disable) {
18+
this.$refs.popover.open(event)
2119
}
22-
this.$refs.popover.open(event)
23-
this.$nextTick(() => {
24-
this.scrollTarget = Utils.dom.getScrollTarget(this.target)
25-
this.scrollTarget.addEventListener('scroll', this.close)
26-
})
27-
},
28-
__cleanup () {
29-
this.scrollTarget.removeEventListener('scroll', this.close)
3020
}
3121
},
3222
mounted () {
33-
this.$nextTick(() => {
34-
this.target = this.$el.parentNode
35-
this.target.addEventListener('contextmenu', this.__open)
36-
})
23+
this.target = this.$refs.popover.$el.parentNode
24+
this.target.addEventListener('contextmenu', this.__open)
3725
},
3826
beforeDestroy () {
3927
this.target.removeEventListener('contexmenu', this.handler)

‎src/vue-components/datetime/DatetimeDesktop.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<template>
2-
<div class="quasar-datetime-desktop">
3-
<div ref="target" class="cursor-pointer textfield caret" :class="{disabled: disable, readonly: readonly}">
4-
<div v-html="label"></div>
5-
</div>
6-
<quasar-popover ref="popover" anchor-ref="target" :disable="disable || readonly">
2+
<div class="quasar-datetime-desktop cursor-pointer textfield caret" :class="{disabled: disable, readonly: readonly}">
3+
<div v-html="label"></div>
4+
5+
<quasar-popover ref="popover" :disable="disable || readonly">
76
<quasar-inline-datetime v-model="model" :type="type"></quasar-inline-datetime>
87
</quasar-popover>
98
</div>

‎src/vue-components/datetime/datetime.ios.styl‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212

1313
.quasar-datetime-desktop
1414
display inline-block
15-
&.has-error > .textfield
16-
border $textfield-border-size $textfield-border-style $has-error !important
1715

1816
.quasar-datetime-content
1917
height 200px

‎src/vue-components/datetime/datetime.mat.styl‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ $datetime-color ?= $primary
99

1010
.quasar-datetime-desktop
1111
display inline-block
12-
&.has-error > .textfield
13-
border-bottom $textfield-border-size $textfield-border-style $has-error !important
1412

1513
.quasar-datetime-header
1614
color opposite-non-color($datetime-color)

0 commit comments

Comments
 (0)