feat(position engine): improve positioning quasarframework#8175, quas…

…arframework#8191, quasarframework#8343, quasarframework#8554, quasarframework#10583, quasarframework#12414
pdanpdan · Mar 21, 2023 · 4faefe2 · 4faefe2
1 parent 2ab9657
commit 4faefe2
Show file tree

Hide file tree

Showing 30 changed files with 1,519 additions and 388 deletions.
diff --git a/ui/dev/src/index.template.html b/ui/dev/src/index.template.html
@@ -5,7 +5,7 @@
     <meta name="description" content="<%= productDescription %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
     <link rel="icon" href="https://cdn.quasar.dev/img/quasar-logo.png" type="image/x-icon">
   </head>

diff --git a/ui/dev/src/pages/components/menu-2-nested-divs.vue b/ui/dev/src/pages/components/menu-2-nested-divs.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="q-layout-padding text-white">
+    <div class="bg-green-9 q-pa-sm" style="width: 300px; height: 180px;">
+      Click Here
+
+      <q-menu touch-position>
+        <q-list dense style="min-width: 250px" class="bg-grey text-white">
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 1</q-item-section>
+          </q-item>
+
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 2</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+
+      <div class="bg-blue-9 q-pa-sm q-mt-md" style="width: 50%; height: 50%;">
+        Click Here
+
+        <q-menu touch-position>
+          <q-list dense style="min-width: 100px">
+            <q-item clickable>
+              <q-item-section>Menu Item 1</q-item-section>
+            </q-item>
+
+            <q-item clickable v-close-popup>
+              <q-item-section>Close</q-item-section>
+            </q-item>
+          </q-list>
+
+          <q-btn class="full-width" flat label="Menu">
+            <q-menu>
+              <q-list>
+                <q-item v-for="n in 5" :key="n" v-close-popup clickable>
+                  <q-item-section>Menu Item {{ n }}</q-item-section>
+                </q-item>
+
+                <q-item clickable>
+                  <q-item-section>Submenu Label</q-item-section>
+                  <q-item-section side>
+                    <q-icon name="keyboard_arrow_right" />
+                  </q-item-section>
+
+                  <q-menu anchor="top right" self="top left">
+                    <q-list>
+                      <q-item v-for="n in 5" :key="n" v-close-popup clickable>
+                        <q-item-section>Menu Item {{ n }}</q-item-section>
+                      </q-item>
+
+                      <q-item clickable v-close-popup="2">
+                        <q-item-section>Close</q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-menu>
+      </div>
+    </div>
+
+    <div class="bg-green-9 q-pa-sm q-mt-xl" style="width: 300px; height: 180px;">
+      ContextMenu Here
+
+      <q-menu touch-position context-menu>
+        <q-list dense style="min-width: 250px" class="bg-grey text-white">
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 1</q-item-section>
+          </q-item>
+
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 2</q-item-section>
+          </q-item>
+
+          <q-item clickable v-close-popup>
+            <q-item-section>Menu Item 3</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+
+      <div class="bg-blue-9 q-pa-sm q-mt-md" style="width: 50%; height: 50%;">
+        ContextMenu Here
+
+        <q-menu touch-position context-menu>
+          <q-list dense style="min-width: 100px">
+            <q-item clickable>
+              <q-item-section>Menu Item 1</q-item-section>
+            </q-item>
+
+            <q-item clickable v-close-popup>
+              <q-item-section>Close</q-item-section>
+            </q-item>
+          </q-list>
+
+          <q-btn class="full-width" flat label="Menu">
+            <q-menu>
+              <q-list>
+                <q-item v-for="n in 5" :key="n" v-close-popup clickable>
+                  <q-item-section>Menu Item {{ n }}</q-item-section>
+                </q-item>
+
+                <q-item clickable>
+                  <q-item-section>Submenu Label</q-item-section>
+                  <q-item-section side>
+                    <q-icon name="keyboard_arrow_right" />
+                  </q-item-section>
+
+                  <q-menu anchor="top right" self="top left">
+                    <q-list>
+                      <q-item v-for="n in 5" :key="n" v-close-popup clickable>
+                        <q-item-section>Menu Item {{ n }}</q-item-section>
+                      </q-item>
+
+                      <q-item clickable v-close-popup="2">
+                        <q-item-section>Close</q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-menu>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  }
+}
+</script>