Skip to content

Commit b31224f

Browse files
pdanpdanrstoenescu
pdanpdan
authored and
rstoenescu
committed
close quasarframework#1884 - Enhance QPullToRefresh (quasarframework#1891)
* Enhance QPullToRefresh - move height to external constant - remove max-height - add negative margin-bottom on pull-to-refresh-container and add overflow-y on pull-to-refresh (to hide the arrow when in normal position and to compensate for the negative translateY) - remove touch-pan directive when disable * Update QPullToRefresh.js
1 parent 19058d7 commit b31224f

File tree

5 files changed

+109
-44
lines changed

5 files changed

+109
-44
lines changed

‎dev/components/components/pull-to-refresh.vue‎

Lines changed: 75 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,88 @@
11
<template>
2-
<q-layout>
3-
<div class="q-toolbar" slot="header">
4-
<div class="q-toolbar-title">Pull To Refresh</div>
5-
</div>
2+
<q-layout view="lHh lpr fFf">
3+
<q-layout-header :value="header">
4+
<q-toolbar :inverted="$q.theme === 'ios'">
5+
<q-toolbar-title>Pull To Refresh - Header</q-toolbar-title>
6+
</q-toolbar>
7+
</q-layout-header>
68

7-
<div class="layout-view">
8-
<q-pull-to-refresh :handler="refresher">
9-
<div class="layout-padding bg-white">
10-
<p class="caption">
11-
Pull down to refresh on the content below.
12-
On desktop it works by dragging the content down.
13-
</p>
9+
<q-layout-footer :value="footer">
10+
<q-toolbar :inverted="$q.theme === 'ios'">
11+
<q-toolbar-title>Pull To Refresh - Footer</q-toolbar-title>
12+
</q-toolbar>
13+
</q-layout-footer>
1414

15-
<p v-for="(item, index) in items" class="caption">
16-
<q-chip square color="secondary" class="shadow-1">
17-
{{ items.length - index }}
18-
</q-chip>
19-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
20-
</p>
21-
</div>
22-
</q-pull-to-refresh>
23-
</div>
15+
<q-page-container>
16+
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
17+
<q-page padding class="bg-orange-4" :class="{ 'column no-wrap no-height': hasScroll }">
18+
<div class="bg-green-4 q-pa-md text-center" v-show="guardTop">Guarding text above QPullToRefresh</div>
19+
<component :is="scrollArea ? 'QScrollArea' : 'div'" :class="scrollClass">
20+
<q-pull-to-refresh :handler="refresher" :inline="hasScrollSimple" :disable="disable" class="overflow-hidden-y">
21+
<div class="bg-white overflow-hidden-y">
22+
<div>
23+
<p class="caption bg-yellow-6">
24+
Pull down to refresh on the content below.
25+
On desktop it works by dragging the content down.
26+
</p>
27+
28+
<p class="caption bg-yellow-6">
29+
<q-toggle v-model="header" label="Show Header" />
30+
<q-toggle v-model="footer" label="Show Footer" />
31+
<q-toggle v-model="guardTop" label="Show Top Guard" />
32+
<q-toggle v-model="guardBottom" label="Show Bottom Guard" />
33+
<q-toggle v-model="disable" label="Disable" />
34+
<q-toggle v-model="scroll" label="Scroll" />
35+
<q-toggle v-model="scrollArea" label="QScrollArea" />
36+
</p>
37+
</div>
38+
39+
<p v-for="(item, index) in items" :key="index" class="caption bg-yellow-6">
40+
<q-chip square color="secondary" class="shadow-1">
41+
{{ items.length - index }}
42+
</q-chip>
43+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
44+
</p>
45+
</div>
46+
</q-pull-to-refresh>
47+
</component>
48+
<div class="bg-green-4 q-pa-md text-center" v-show="guardBottom">Guarding text below QPullToRefresh</div>
49+
</q-page>
50+
</transition>
51+
</q-page-container>
2452
</q-layout>
2553
</template>
2654

55+
<style lang="stylus">
56+
.no-height
57+
height 0
58+
</style>
59+
2760
<script>
2861
export default {
2962
data () {
3063
return {
31-
items: [{}, {}, {}, {}, {}, {}]
64+
items: [{}, {}, {}],
65+
guardTop: true,
66+
guardBottom: true,
67+
header: true,
68+
footer: true,
69+
disable: false,
70+
scroll: false,
71+
scrollArea: false
72+
}
73+
},
74+
computed: {
75+
hasScroll () {
76+
return this.scrollArea || this.scroll
77+
},
78+
hasScrollSimple () {
79+
return this.scroll && !this.scrollArea
80+
},
81+
scrollClass () {
82+
if (this.scrollArea) {
83+
return 'col'
84+
}
85+
return this.scroll ? 'scroll' : null
3286
}
3387
},
3488
methods: {

‎src/components/pull-to-refresh/QPullToRefresh.js‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { cssTransform } from '../../utils/dom'
33
import { QIcon } from '../icon'
44
import TouchPan from '../../directives/touch-pan'
55

6+
const height = -65
7+
68
export default {
79
name: 'QPullToRefresh',
810
directives: {
@@ -29,17 +31,19 @@ export default {
2931
disable: Boolean
3032
},
3133
data () {
32-
let height = 65
33-
3434
return {
3535
state: 'pull',
36-
pullPosition: -height,
37-
height: height,
36+
pullPosition: height,
3837
animating: false,
3938
pulling: false,
4039
scrolling: false
4140
}
4241
},
42+
watch: {
43+
inline (val) {
44+
this.setScrollContainer(val)
45+
}
46+
},
4347
computed: {
4448
message () {
4549
switch (this.state) {
@@ -53,7 +57,9 @@ export default {
5357
}
5458
},
5559
style () {
56-
return cssTransform(`translateY(${this.pullPosition}px)`)
60+
const css = cssTransform(`translateY(${this.pullPosition}px)`)
61+
css.marginBottom = `${height}px`
62+
return css
5763
},
5864
messageClass () {
5965
return `text-${this.color}`
@@ -74,7 +80,7 @@ export default {
7480
this.trigger()
7581
}
7682
else if (this.state === 'pull') {
77-
this.__animateTo(-this.height)
83+
this.__animateTo(height)
7884
}
7985
return
8086
}
@@ -88,14 +94,14 @@ export default {
8894
if (this.pulling) {
8995
this.pulling = false
9096
this.state = 'pull'
91-
this.__animateTo(-this.height)
97+
this.__animateTo(height)
9298
}
9399
return true
94100
}
95101

96102
event.evt.preventDefault()
97103
this.pulling = true
98-
this.pullPosition = -this.height + Math.max(0, Math.pow(event.distance.y, 0.85))
104+
this.pullPosition = height + Math.max(0, Math.pow(event.distance.y, 0.85))
99105
this.state = this.pullPosition > this.distance ? 'pulled' : 'pull'
100106
},
101107
__animateTo (target, done, previousCall) {
@@ -120,30 +126,35 @@ export default {
120126
},
121127
trigger () {
122128
this.handler(() => {
123-
this.__animateTo(-this.height, () => {
129+
this.__animateTo(height, () => {
124130
this.state = 'pull'
125131
})
126132
})
133+
},
134+
setScrollContainer (inline) {
135+
this.$nextTick(() => {
136+
this.scrollContainer = inline ? this.$el.parentNode : getScrollTarget(this.$el)
137+
})
127138
}
128139
},
129140
mounted () {
130-
this.$nextTick(() => {
131-
this.scrollContainer = this.inline ? this.$el.parentNode : getScrollTarget(this.$el)
132-
})
141+
this.setScrollContainer(this.inline)
133142
},
134143
render (h) {
135-
return h('div', { staticClass: 'pull-to-refresh' }, [
144+
return h('div', { staticClass: 'pull-to-refresh overflow-hidden-y' }, [
136145
h('div', {
137146
staticClass: 'pull-to-refresh-container',
138147
style: this.style,
139-
directives: [{
140-
name: 'touch-pan',
141-
modifiers: {
142-
vertical: true,
143-
mightPrevent: true
144-
},
145-
value: this.__pull
146-
}]
148+
directives: this.disable
149+
? null
150+
: [{
151+
name: 'touch-pan',
152+
modifiers: {
153+
vertical: true,
154+
mightPrevent: true
155+
},
156+
value: this.__pull
157+
}]
147158
}, [
148159
h('div', {
149160
staticClass: 'pull-to-refresh-message row flex-center',

‎src/components/pull-to-refresh/pull-to-refresh.ios.styl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.pull-to-refresh
22
position relative
3-
max-height 100vh
43

54
.pull-to-refresh-message
65
height 65px

‎src/components/pull-to-refresh/pull-to-refresh.mat.styl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.pull-to-refresh
22
position relative
3-
max-height 100vh
43

54
.pull-to-refresh-message
65
height 65px

‎src/css/core/visibility.styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@
4444
overflow auto !important
4545
.overflow-hidden
4646
overflow hidden !important
47+
.overflow-hidden-y
48+
overflow-y hidden !important
4749

4850
.dimmed, .light-dimmed
4951
&:after

0 commit comments

Comments
 (0)