add: popover menu for setting button sheet, close #43

Disfactory · Aug 12, 2022 · cc52ec3 · cc52ec3
1 parent 60248f8
commit cc52ec3
Showing 1 changed file with 60 additions and 27 deletions.
diff --git a/src/components/DisplaySettingBottomSheet.vue b/src/components/DisplaySettingBottomSheet.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-bottom-sheet v-model="isOpen">
+  <v-menu
+    content-class="my-menu"
+    v-model="isOpen"
+    :close-on-content-click="false"
+    :nudge-width="200"
+    offset-y
+  >
     <template v-slot:activator="{ on, attrs }">
       <v-btn
         color="primary"
@@ -10,30 +16,33 @@
         顯示設定
       </v-btn>
     </template>
-    <v-list>
-      <v-subheader>地圖顯示設定</v-subheader>
-      <v-list-item>
-        <h2 class="primary--text text-button">農地範圍 •</h2>
-        <v-btn
-          text
-          x-small
-          class="primary--text"
-          :class="!isLUIMapVisable ? 'font-weight-bold' : 'font-weight-light'"
-          @click="isLUIMapVisable = false"
-        >隱藏</v-btn>
-        <v-btn
-          text
-          x-small
-          class="primary--text"
-          :class="isLUIMapVisable ? 'font-weight-bold' : 'font-weight-light'"
-          @click="isLUIMapVisable = true"
-        >顯示</v-btn>
-      </v-list-item>
-      <v-list-item>
-        <switch-map-mode-button :isInSheet="true" />
-      </v-list-item>
-    </v-list>
-  </v-bottom-sheet>
+    <v-card>
+      <v-list>
+        <v-list-item>
+          <h2 class="primary--text text-button">農地範圍 •</h2>
+          <v-btn
+            text
+            x-small
+            class="primary--text"
+            :class="!isLUIMapVisable ? 'font-weight-bold' : 'font-weight-light'"
+            @click="isLUIMapVisable = false"
+            >隱藏</v-btn
+          >
+          <v-btn
+            text
+            x-small
+            class="primary--text"
+            :class="isLUIMapVisable ? 'font-weight-bold' : 'font-weight-light'"
+            @click="isLUIMapVisable = true"
+            >顯示</v-btn
+          >
+        </v-list-item>
+        <v-list-item>
+          <switch-map-mode-button :isInSheet="true" />
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-menu>
 </template>
 
 <script lang="ts">
@@ -50,7 +59,10 @@ export default createComponent({
   },
   setup () {
     const isOpen = ref(false)
-    const mapController = inject(MainMapControllerSymbol, ref<MapFactoryController>())
+    const mapController = inject(
+      MainMapControllerSymbol,
+      ref<MapFactoryController>()
+    )
 
     const isLUIMapVisable$ = ref(false)
     const isLUIMapVisable = computed({
@@ -59,7 +71,7 @@ export default createComponent({
 
         return isLUIMapVisable$.value
       },
-      set: (value) => {
+      set: value => {
         mapController.value?.mapInstance.setLUILayerVisible(value)
         isLUIMapVisable$.value = value
       }
@@ -72,3 +84,24 @@ export default createComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.my-menu {
+  margin-top: 20px;
+  contain: initial;
+  overflow: visible;
+}
+.my-menu::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 10px;
+  transform: translateY(-100%);
+  width: 10px;
+  height: 13px;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 13px solid #fff;
+  z-index: 1;
+}
+</style>