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

…orce touchPosition on contextMenu in QMenu ref quasarframework#3665, ref quasarframework#3890
pdanpdan · Apr 16, 2019 · 8061f34 · 8061f34
1 parent dd0eaba
commit 8061f34
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 8 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/menu.vue b/quasar/dev/components/components/menu.vue
@@ -354,7 +354,7 @@
             Menu in menu
           </q-card-section>
           <q-img src="https://cdn.quasar-framework.org/img/parallax1.jpg" style="height: 100px">
-            <q-menu touch-position>
+            <q-menu touch-position :context-menu="contextMenu">
               <q-list>
                 <q-item
                   v-close-popup

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
@@ -54,6 +54,7 @@ export default Vue.extend({
     },
 
     touchPosition: Boolean,
+    touchPositionEvent: Object,
 
     maxHeight: {
       type: String,
@@ -141,8 +142,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 && (evt !== void 0 || this.touchPositionEvent !== void 0)) {
+          const pos = position(evt || this.touchPositionEvent)
           this.absoluteOffset = { left: pos.left - left, top: pos.top - top }
         }
         else {

diff --git a/quasar/src/components/menu/QMenu.json b/quasar/src/components/menu/QMenu.json
@@ -61,6 +61,12 @@
       "category": "behavior"
     },
 
+    "touch-position-event": {
+      "type": "Object",
+      "desc": "The event to be used for touch position as if the target of the menu was either clicked or touched",
+      "category": "behavior"
+    },
+
     "persistent": {
       "type": "Boolean",
       "desc": "Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key",

diff --git a/quasar/src/components/popup-proxy/QPopupProxy.js b/quasar/src/components/popup-proxy/QPopupProxy.js
@@ -17,7 +17,9 @@ export default Vue.extend({
     breakpoint: {
       type: [String, Number],
       default: 450
-    }
+    },
+
+    touchPosition: Boolean
   },
 
   data () {
@@ -48,6 +50,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)
 
@@ -90,6 +94,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,12 @@
       "default": 450,
       "examples": [ 992, ":breakpoint=\"1024\"" ],
       "category": "behavior"
+    },
+
+    "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",
+      "category": "behavior"
     }
   },