Skip to content

Commit

Permalink
feat(Ripple): Use 2 phased approach, prevent repetition, allow overla…
Browse files Browse the repository at this point in the history
  • Loading branch information
pdanpdan committed Sep 4, 2023
1 parent c6f6d4a commit 2cb87dd
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 115 deletions.
40 changes: 27 additions & 13 deletions ui/dev/src/pages/css/material-ripples-1.vue
Original file line number Diff line number Diff line change
@@ -1,42 +1,45 @@
<template>
<div class="docs-ripple row justify-center">
<div style="width: 500px; max-width: 90vw;">
<div style="width: 500px; max-width: 90vw; padding: 70vh 0">
<p class="caption">
<span class="desktop-only">Click</span>
<span class="mobile-only">Tap</span>
on the area below to see it in action.
</p>
<q-toggle v-model="early" label="Trigger early" />

<div
v-ripple
v-ripple="rippleBaseConfig"
tabindex="0"
class="relative-position ripple-example bg-white text-black"
style="height: 150px;"
/>
class="relative-position ripple-example bg-white text-black flex flex-center"
style="height: 150px; border-radius: 50px"
>
<div class="q-pa-xl bg-grey-2">Touch target test</div>
</div>

<div
v-ripple
v-ripple="rippleBaseConfig"
tabindex="0"
class="relative-position ripple-example bg-primary"
style="height: 150px"
/>

<div
v-ripple
v-ripple="rippleBaseConfig"
tabindex="0"
class="relative-position ripple-example bg-white text-black"
style="height: 50px"
/>

<div
v-ripple
v-ripple="rippleBaseConfig"
tabindex="0"
class="relative-position ripple-example bg-cyan"
style="height: 50px"
/>

<div
v-ripple:primary
v-ripple:primary="rippleBaseConfig"
tabindex="0"
class="relative-position ripple-example bg-white text-black"
style="height: 50px"
Expand All @@ -45,7 +48,7 @@
</div>

<div
v-ripple="{ color: 'yellow' }"
v-ripple="{ ...rippleBaseConfig, color: 'yellow' }"
tabindex="0"
class="relative-position ripple-example bg-cyan"
style="height: 50px"
Expand All @@ -56,23 +59,23 @@
<div class="row items-center justify-around q-mt-md">
<div
tabindex="0"
v-ripple.center
v-ripple.center="rippleBaseConfig"
class="relative-position ripple-example bg-white text-black ripple-round"
>
Center
</div>

<div
tabindex="0"
v-ripple
v-ripple="rippleBaseConfig"
class="relative-position ripple-example bg-white text-black ripple-round"
>
Touch point
</div>

<div
tabindex="0"
v-ripple.center
v-ripple.center="rippleBaseConfig"
class="q-ml-sm relative-position ripple-example bg-cyan ripple-round"
>
Center
Expand All @@ -84,6 +87,17 @@

<script>
export default {
data () {
return {
early: false
}
},
computed: {
rippleBaseConfig () {
return this.early === true ? { early: true } : {}
}
}
}
</script>

Expand Down
9 changes: 0 additions & 9 deletions ui/src/components/btn/QBtn.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,18 +166,9 @@ export default Vue.extend({
target.addEventListener('touchend', this.__onPressEnd, passiveCapture)
}
}

// avoid duplicated mousedown event
// triggering another early ripple
this.avoidMouseRipple = true
clearTimeout(this.mouseTimer)
this.mouseTimer = setTimeout(() => {
this.avoidMouseRipple = false
}, 200)
},

__onMousedown (e) {
e.qSkipRipple = this.avoidMouseRipple === true
this.$emit('mousedown', e)

if (mouseTarget !== this.$el) {
Expand Down
Loading

0 comments on commit 2cb87dd

Please sign in to comment.