Skip to content

Commit 8f4fc77

Browse files
rstoenescurstoenescu
committed
refactor: quasarframework#18 Popover and Context Menu - draft until next release
1 parent 76e9f3a commit 8f4fc77

26 files changed

+741
-431
lines changed

‎dev/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ router.map({
2323
'/collapsible': { component: require('view/collapsible.vue') },
2424
'/css-elements': { component: require('view/css-elements.vue') },
2525
'/dialog': { component: require('view/dialog.vue') },
26-
'/dropdown': { component: require('view/dropdown.vue') },
2726
'/fab': { component: require('view/fab.vue') },
2827
'/flex': { component: require('view/flex.vue') },
2928
'/form': { component: require('view/form.vue') },
@@ -35,6 +34,7 @@ router.map({
3534
'/list': { component: require('view/list.vue') },
3635
'/pagination': { component: require('view/pagination.vue') },
3736
'/parallax': { component: require('view/parallax.vue') },
37+
'/popover': { component: require('view/popover.vue') },
3838
'/progress': { component: require('view/progress.vue') },
3939
'/pull-to-refresh': { component: require('view/pull-to-refresh.vue') },
4040
'/rating': { component: require('view/rating.vue') },

‎dev/views/dropdown.vue‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎dev/views/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export default {
2222
'Collapsible',
2323
'CSS Elements',
2424
'Dialog',
25-
'Dropdown',
2625
'Fab',
2726
'Flex',
2827
'Form',
@@ -34,6 +33,7 @@ export default {
3433
'Modal',
3534
'Pagination',
3635
'Parallax',
36+
'Popover',
3737
'Progress',
3838
'Pull to Refresh',
3939
'Rating',

‎dev/views/popover.vue‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<div>
3+
<div style="height: 300px;">&nbsp;</div>
4+
5+
<quasar-context-menu v-ref:context>
6+
<div class="list item-delimiter highlight">
7+
<div class="item item-link" v-for="n in 20" @click="click($refs.context)">
8+
<div class="item-content">
9+
<div class="item-label">Label</div>
10+
<div class="item-value">Value</div>
11+
</div>
12+
</div>
13+
</div>
14+
</quasar-context-menu>
15+
16+
<quasar-popover touch-position v-ref:popover1>
17+
<button slot="target" class="primary">
18+
<i>more_vert</i>
19+
</button>
20+
21+
<div class="list item-delimiter highlight">
22+
<div class="item item-link" v-for="n in 20" @click="click($refs.popover1)">
23+
<div class="item-content">
24+
<div class="item-label">Label</div>
25+
<div class="item-value">Value</div>
26+
</div>
27+
</div>
28+
</div>
29+
</quasar-popover>
30+
31+
<quasar-popover v-ref:tl class="fixed-top-left" style="top: 50px">
32+
<button slot="target" class="primary">
33+
<i class="rotate-90">trending_up</i>
34+
</button>
35+
36+
<div class="list item-delimiter highlight">
37+
<div class="item item-link" v-for="n in 20" @click="click($refs.tl)">
38+
<div class="item-content">
39+
<div class="item-label">Label</div>
40+
<div class="item-value">Value</div>
41+
</div>
42+
</div>
43+
</div>
44+
</quasar-popover>
45+
46+
<quasar-popover v-ref:tr class="fixed-top-right">
47+
<button slot="target" class="primary">
48+
<i class="rotate-180">trending_up</i>
49+
</button>
50+
51+
<div class="list item-delimiter highlight">
52+
<div class="item item-link" v-for="n in 20" @click="click($refs.tr)">
53+
<div class="item-content">
54+
<div class="item-label">Label</div>
55+
<div class="item-value">Value</div>
56+
</div>
57+
</div>
58+
</div>
59+
</quasar-popover>
60+
61+
<quasar-popover v-ref:br class="fixed-bottom-right">
62+
<button slot="target" class="primary">
63+
<i class="rotate-270">trending_up</i>
64+
</button>
65+
66+
<div class="list item-delimiter highlight">
67+
<div class="item item-link" v-for="n in 20" @click="click($refs.br)">
68+
<div class="item-content">
69+
<div class="item-label">Label</div>
70+
<div class="item-value">Value</div>
71+
</div>
72+
</div>
73+
</div>
74+
</quasar-popover>
75+
76+
<quasar-popover v-ref:bl class="fixed-bottom-left">
77+
<button slot="target" class="primary">
78+
<i>trending_up</i>
79+
</button>
80+
81+
<div class="list item-delimiter highlight">
82+
<div class="item item-link" v-for="n in 3" @click="click($refs.bl)">
83+
<div class="item-content">
84+
<div class="item-label">Label</div>
85+
<div class="item-value">Value</div>
86+
</div>
87+
</div>
88+
</div>
89+
</quasar-popover>
90+
91+
<div style="height: 1500px;">&nbsp;</div>
92+
</div>
93+
</template>
94+
95+
<script>
96+
import { Toast } from 'quasar'
97+
98+
export default {
99+
methods: {
100+
click (target) {
101+
Toast.create('clicked')
102+
if (target) {
103+
target.close()
104+
}
105+
}
106+
}
107+
}
108+
</script>

‎src/components/action-sheet/action-sheet-ios.html‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,45 @@
1-
<div class="quasar-action-sheet">
2-
<div v-if="title" class="item justify-center faded">
3-
<span class="item-value">{{{* title}}}</span>
4-
</div>
1+
<div>
2+
<div class="quasar-action-sheet">
3+
<div v-if="title" class="item justify-center faded">
4+
<span class="item-value">{{{* title}}}</span>
5+
</div>
56

6-
<div class="modal-controls modal-scroll">
7-
<div v-if="gallery" class="quasar-action-sheet-gallery row wrap items-center justify-center">
8-
<div
9-
v-for="button in buttons"
10-
class="cursor-pointer column inline items-center justify-center"
11-
@click="close(button.handler)"
12-
:class="button.classes"
13-
>
14-
<i v-if="button.icon">{{* button.icon}}</i>
15-
<img v-if="button.avatar" :src="button.avatar" class="avatar">
7+
<div class="modal-controls modal-scroll">
8+
<div v-if="gallery" class="quasar-action-sheet-gallery row wrap items-center justify-center">
9+
<div
10+
v-for="button in buttons"
11+
class="cursor-pointer column inline items-center justify-center"
12+
@click="close(button.handler)"
13+
:class="button.classes"
14+
>
15+
<i v-if="button.icon">{{* button.icon}}</i>
16+
<img v-if="button.avatar" :src="button.avatar" class="avatar">
1617

17-
<span>{{* button.label}}</span>
18+
<span>{{* button.label}}</span>
19+
</div>
1820
</div>
19-
</div>
20-
<div v-else class="list item-delimiter">
21-
<div
22-
v-for="button in buttons"
23-
class="item item-link justify-center"
24-
@click="close(button.handler)"
25-
:class="button.classes"
26-
>
27-
<i v-if="button.icon">{{* button.icon}}</i>
28-
<img v-if="button.avatar" :src="button.avatar" class="avatar">
29-
<span style="margin-left: 15px;">{{* button.label}}</span>
21+
<div v-else class="list item-delimiter">
22+
<div
23+
v-for="button in buttons"
24+
class="item item-link justify-center"
25+
@click="close(button.handler)"
26+
:class="button.classes"
27+
>
28+
<i v-if="button.icon">{{* button.icon}}</i>
29+
<img v-if="button.avatar" :src="button.avatar" class="avatar">
30+
<span style="margin-left: 15px;">{{* button.label}}</span>
31+
</div>
3032
</div>
3133
</div>
3234
</div>
33-
</div>
3435

35-
<div class="quasar-action-sheet">
36-
<div
37-
class="item item-link justify-center"
38-
@click="close(dismissButton.handler)"
39-
:class="dismissButton.classes"
40-
>
41-
<strong>{{* dismissButton.label}}</strong>
36+
<div class="quasar-action-sheet">
37+
<div
38+
class="item item-link justify-center"
39+
@click="close(dismissButton.handler)"
40+
:class="dismissButton.classes"
41+
>
42+
<strong>{{* dismissButton.label}}</strong>
43+
</div>
4244
</div>
4345
</div>

‎src/components/action-sheet/action-sheet-material.html‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,48 @@
1-
<div v-if="title" class="modal-header">
2-
{{{* title}}}
3-
</div>
1+
<div>
2+
<div v-if="title" class="modal-header">
3+
{{{* title}}}
4+
</div>
45

5-
<div class="modal-scroll">
6-
<div v-if="gallery" class="quasar-action-sheet-gallery row wrap items-center justify-center">
7-
<div
8-
v-for="button in buttons"
9-
class="cursor-pointer column inline items-center justify-center"
10-
@click="close(button.handler)"
11-
:class="button.classes"
12-
>
13-
<i v-if="button.icon">{{* button.icon}}</i>
14-
<img v-if="button.avatar" :src="button.avatar" class="avatar">
6+
<div class="modal-scroll">
7+
<div v-if="gallery" class="quasar-action-sheet-gallery row wrap items-center justify-center">
8+
<div
9+
v-for="button in buttons"
10+
class="cursor-pointer column inline items-center justify-center"
11+
@click="close(button.handler)"
12+
:class="button.classes"
13+
>
14+
<i v-if="button.icon">{{* button.icon}}</i>
15+
<img v-if="button.avatar" :src="button.avatar" class="avatar">
1516

16-
<span>{{* button.label}}</span>
17+
<span>{{* button.label}}</span>
18+
</div>
19+
</div>
20+
<div v-else class="list inset">
21+
<div
22+
v-for="button in buttons"
23+
class="item item-link"
24+
@click="close(button.handler)"
25+
:class="button.classes"
26+
>
27+
<i v-if="button.icon">{{* button.icon}}</i>
28+
<img v-if="button.avatar" :src="button.avatar" class="avatar">
29+
<div class="item-content">
30+
{{* button.label}}
31+
</div>
32+
</div>
1733
</div>
1834
</div>
19-
<div v-else class="list inset">
35+
36+
<div class="list inset">
2037
<div
21-
v-for="button in buttons"
2238
class="item item-link"
23-
@click="close(button.handler)"
24-
:class="button.classes"
39+
@click="close(dismissButton.handler)"
40+
:class="dismissButton.classes"
2541
>
26-
<i v-if="button.icon">{{* button.icon}}</i>
27-
<img v-if="button.avatar" :src="button.avatar" class="avatar">
42+
<i v-if="dismissButton.icon">{{* dismissButton.icon}}</i>
2843
<div class="item-content">
29-
{{* button.label}}
44+
{{* dismissButton.label}}
3045
</div>
3146
</div>
3247
</div>
3348
</div>
34-
35-
<div class="list inset">
36-
<div
37-
class="item item-link"
38-
@click="close(dismissButton.handler)"
39-
:class="dismissButton.classes"
40-
>
41-
<i v-if="dismissButton.icon">{{* dismissButton.icon}}</i>
42-
<div class="item-content">
43-
{{* dismissButton.label}}
44-
</div>
45-
</div>
46-
</div>

0 commit comments

Comments
 (0)