feat(quasar): Add touchPosition processing to QPopupProxy and don't f…

…orce touchPosition on contextMenu in QMenu ref quasarframework#3665
pdanpdan · Mar 27, 2019 · 57193ec · 57193ec
1 parent 06d41f3
commit 57193ec
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 6 deletions.
diff --git a/docs/src/examples/QPopupProxy/ContextMenu.vue b/docs/src/examples/QPopupProxy/ContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md">
     <q-btn push color="purple" label="Handles right-click">
-      <q-popup-proxy context-menu>
+      <q-popup-proxy touch-position context-menu>
         <q-banner>
           <template v-slot:avatar>
             <q-icon name="signal_wifi_off" color="primary" />

diff --git a/quasar/dev/components/components/menu-test.vue b/quasar/dev/components/components/menu-test.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row" style="padding: 1500px 0; width: 2000px">
     <div class="col" style="height:2000px; width:100px; background-color:red;">
-      <q-menu context-menu>
+      <q-menu touch-position context-menu>
         <q-list link separator style="min-width: 150px; max-height: 300px;">
           <q-item v-close-popup>
             <q-item-section>Test</q-item-section>
@@ -11,7 +11,7 @@
     </div>
 
     <div class="col" style="margin-top: 500px; height:2000px; width:100px; background-color:red;">
-      <q-menu context-menu>
+      <q-menu touch-position context-menu>
         <q-list link separator style="min-width: 150px; max-height: 300px;">
           <q-item v-close-popup>
             <q-item-section>Test</q-item-section>
@@ -21,7 +21,7 @@
     </div>
 
     <div class="col" style="margin-bottom: 500px; height:2000px; width:100px; background-color:red;">
-      <q-menu context-menu>
+      <q-menu touch-position context-menu>
         <q-list link separator style="min-width: 150px; max-height: 300px;">
           <q-item v-close-popup>
             <q-item-section>Test</q-item-section>

diff --git a/quasar/dev/components/components/popup-proxy.vue b/quasar/dev/components/components/popup-proxy.vue
@@ -23,6 +23,24 @@
         </q-popup-proxy>
       </div>
 
+      <div class="popup-surface-test">
+        <div>Handles click - touch position</div>
+
+        <q-popup-proxy touch-position>
+          <q-banner>
+            <q-icon slot="avatar" name="signal_wifi_off" color="primary" />
+
+            <input v-model="text">
+            You have lost connection to the internet. This app is offline.
+
+            <q-btn label="Close" v-close-popup />
+            <div>Popup text.</div>
+
+            <q-btn slot="action" flat color="primary" label="close" v-close-popup />
+          </q-banner>
+        </q-popup-proxy>
+      </div>
+
       <div class="popup-surface-test">
         <div>Handles right-click (context)</div>
 
@@ -40,6 +58,23 @@
         </q-popup-proxy>
       </div>
 
+      <div class="popup-surface-test">
+        <div>Handles right-click (context) - touch-position</div>
+
+        <q-popup-proxy context-menu touch-position>
+          <q-banner>
+            <q-icon slot="avatar" name="signal_wifi_off" color="primary" />
+
+            <input v-model="text">
+            You have lost connection to the internet. This app is offline.
+            <q-btn label="Close" v-close-popup />
+            <div>Popup text.</div>
+
+            <q-btn slot="action" flat color="primary" label="close" v-close-popup />
+          </q-banner>
+        </q-popup-proxy>
+      </div>
+
       <div class="q-mt-xl">
         <q-btn @click="dialog = true" label="Dialog" />
         <q-dialog v-model="dialog">

diff --git a/quasar/src/components/menu/QMenu.js b/quasar/src/components/menu/QMenu.js
@@ -45,6 +45,8 @@ export default Vue.extend({
     },
     noParentEvent: Boolean,
 
+    touchPositionEvent: {},
+
     touchPosition: Boolean,
     persistent: Boolean,
     autoClose: Boolean,
@@ -120,8 +122,8 @@ export default Vue.extend({
       this.timer = setTimeout(() => {
         const { top, left } = this.anchorEl.getBoundingClientRect()
 
-        if (this.touchPosition || this.contextMenu) {
-          const pos = position(evt)
+        if (this.touchPosition) {
+          const pos = position(evt || this.touchPositionEvent)
           this.absoluteOffset = { left: pos.left - left, top: pos.top - top }
         }
         else {

diff --git a/quasar/src/components/popup-proxy/QPopupProxy.js b/quasar/src/components/popup-proxy/QPopupProxy.js
@@ -20,6 +20,8 @@ export default Vue.extend({
       default: 450
     },
 
+    touchPosition: Boolean,
+
     disable: Boolean
   },
 
@@ -60,6 +62,8 @@ export default Vue.extend({
 
       const breakpoint = parseInt(this.breakpoint, 10)
 
+      this.touchPositionEvent = this.touchPosition === true ? evt : void 0
+
       this.showing = true
       this.$emit('input', true)
 
@@ -104,6 +108,11 @@ export default Vue.extend({
       )
     ) ? { cover: true, maxHeight: '99vh' } : {}
 
+    if (this.touchPosition === true && this.touchPositionEvent !== void 0 && this.type === 'menu') {
+      props.touchPosition = this.touchPosition
+      props.touchPositionEvent = this.touchPositionEvent
+    }
+
     const data = {
       props: Object.assign(props, this.$attrs, {
         value: this.showing

diff --git a/quasar/src/components/popup-proxy/QPopupProxy.json b/quasar/src/components/popup-proxy/QPopupProxy.json
@@ -14,6 +14,11 @@
       "examples": [ 992, ":breakpoint=\"1024\"" ]
     },
 
+    "touch-position": {
+      "type": "Boolean",
+      "desc": "Allows for the target position to be set by the mouse position, when in menu mode and the target of the menu is either clicked or touched"
+    },
+
     "disable": {
       "extends": "disable"
     }