feat(Ripple): Use 2 phased approach, prevent repetition, allow overla…

…pping ripples quasarframework#4891, quasarframework#7474
pdanpdan · Jul 22, 2020 · fccfe3c · fccfe3c
1 parent e6dbbba
commit fccfe3c
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 90 deletions.
diff --git a/ui/dev/src/pages/css/material-ripples-1.vue b/ui/dev/src/pages/css/material-ripples-1.vue
@@ -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"
@@ -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"
@@ -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
@@ -84,6 +87,17 @@
 
 <script>
 export default {
+  data () {
+    return {
+      early: false
+    }
+  },
+
+  computed: {
+    rippleBaseConfig () {
+      return this.early === true ? { early: true } : {}
+    }
+  }
 }
 </script>
 

diff --git a/ui/src/components/btn/QBtn.js b/ui/src/components/btn/QBtn.js
@@ -182,14 +182,6 @@ 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)
-
       this.$emit('touchstart', e)
     },
 
@@ -201,7 +193,6 @@ export default Vue.extend({
         document.addEventListener('mouseup', this.__onPressEnd, passiveCapture)
       }
 
-      e.qSkipRipple = this.avoidMouseRipple === true
       this.$emit('mousedown', e)
     },