From 013b2173fdce47244ae95a41cfedb28f241cefeb Mon Sep 17 00:00:00 2001
From: Jacob Lee <43327024+DesnLee@users.noreply.github.com>
Date: Fri, 24 Jun 2022 22:15:06 +0800
Subject: [PATCH] Fix: fix the issue that speed dial auto-adaptation theme does
 not work and is overwritten (#130)

---
 web/src/App.vue                  | 10 ++++-
 web/src/components/FloatMenu.vue | 64 +++++++++++++++-----------------
 web/src/store/index.js           |  8 +++-
 web/src/views/SubEditor.vue      | 24 ++++++++----
 4 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 9638852..1ab3118 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -4,7 +4,7 @@
     <v-main>
       <router-view></router-view>
     </v-main>
-    <BottomNav></BottomNav>
+    <BottomNav ref="bottomNavBar"></BottomNav>
     <v-snackbar :value="successMessage" app bottom color="success" elevation="20">
       {{ successMessage }}
     </v-snackbar>
@@ -66,6 +66,12 @@ export default {
     }
   },
 
+  mounted (){
+    const bottomNavBar = this.$refs.bottomNavBar.$el;
+    const height = bottomNavBar.offsetHeight || bottomNavBar.clientHeight;
+    this.$store.commit("SET_BOTTOM_NAVBAR_HEIGHT", height);
+  },
+
   computed: {
     successMessage() {
       return this.$store.state.successMessage;
@@ -104,4 +110,4 @@ export default {
 <style lang="scss">
 @import "./assets/css/app";
 @import "./assets/css/general.css";
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/FloatMenu.vue b/web/src/components/FloatMenu.vue
index 1b752c7..5b0524f 100644
--- a/web/src/components/FloatMenu.vue
+++ b/web/src/components/FloatMenu.vue
@@ -1,23 +1,19 @@
 <template>
+  <div class="float-menu-switch-wrapper" ref = "floatMenuSwitch">
   <v-speed-dial
-    class="float-menu-switch"
-    v-model="fab"
-    :top="top"
-    :bottom="bottom"
-    :right="right"
-    :left="left"
-    :direction="direction"
-    :open-on-hover="hover"
-    :transition="transition"
+                v-model="fab"
+                :direction="direction"
+                :transition="transition"
   >
     <template v-slot:activator>
-      <v-btn v-model="fab" color="primary" dark fab>
+      <v-btn v-model="fab" color="primary" fab>
         <v-icon v-if="fab"> mdi-close</v-icon>
         <v-icon v-else> mdi-gesture-double-tap</v-icon>
       </v-btn>
     </template>
     <slot></slot>
   </v-speed-dial>
+  </div>
 </template>
 <script>
 export default {
@@ -29,38 +25,38 @@ export default {
       fling: false,
       hover: false,
       tabs: null,
-      top: false,
-      right: true,
-      bottom: true,
-      left: false,
       transition: "scale-transition",
     };
   },
-  watch: {
-    top(val) {
-      this.bottom = !val;
-    },
-    right(val) {
-      this.left = !val;
-    },
-    bottom(val) {
-      this.top = !val;
-    },
-    left(val) {
-      this.right = !val;
+
+  updated (){
+    const floatMenuSwitch = this.$refs.floatMenuSwitch;
+    console.log(floatMenuSwitch);
+    floatMenuSwitch.style.bottom = 2*this.bottomNavBarHeight + "px";
+  },
+
+  computed : {
+    bottomNavBarHeight (){
+      return this.$store.state.bottomNavBarHeight;
     },
   },
 };
 </script>
 <style lang="scss" scoped>
-.float-menu-switch {
-  position: fixed;
-  bottom: 80px;
-  right: 20px;
-  > .v-btn {
-    width: 40px;
-    height: 40px;
-  }
+  .float-menu-switch-wrapper {
+    position : fixed;
+    right: 16px;;
+    z-index  : 99;
+
+    .v-speed-dial > button.v-btn.v-btn--round {
+        margin-right : 0;
+        width        : 40px;
+        height       : 40px;
+      }
+
+      ::v-deep .v-speed-dial__list button.theme--light.v-btn {
+        margin-right : 0;
+      }
 }
 
 /* This is for documentation purposes and will not be needed in your application */
diff --git a/web/src/store/index.js b/web/src/store/index.js
index 65649e1..0609198 100644
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@@ -10,6 +10,8 @@ const store = new Vuex.Store({
         clipboard: "",
         isLoading: false,
 
+        bottomNavBarHeight: 0,
+
         successMessage: "",
         errorMessage: "",
         snackbarTimer: "",
@@ -30,6 +32,10 @@ const store = new Vuex.Store({
             state.title = title;
         },
 
+        SET_BOTTOM_NAVBAR_HEIGHT (state, height){
+            state.bottomNavBarHeight = height;
+        },
+
         SET_LOADING(state, loading) {
             state.isLoading = loading;
         },
@@ -127,4 +133,4 @@ const store = new Vuex.Store({
     getters: {}
 })
 
-export default store;
\ No newline at end of file
+export default store;
diff --git a/web/src/views/SubEditor.vue b/web/src/views/SubEditor.vue
index 4b813e5..d18835b 100644
--- a/web/src/views/SubEditor.vue
+++ b/web/src/views/SubEditor.vue
@@ -1,10 +1,10 @@
 <template>
   <v-container>
-    <FloatMenu>
-      <v-btn fab dark small color="#ffffff" @click.stop="dialog = true">
+    <FloatMenu class="floatActionBtn">
+      <v-btn fab small @click.stop="dialog = true">
         <v-icon color="purple lighten-1">mdi-plus-circle</v-icon>
       </v-btn>
-      <v-btn fab dark small color="#ffffff" @click="save">
+      <v-btn fab small @click="save">
         <v-icon color="teal lighten-1">mdi-content-save</v-icon>
       </v-btn>
     </FloatMenu>
@@ -161,15 +161,15 @@
       </v-form>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn text small color="#707277" @click = "save" >
+        <v-btn text small @click = "save" class="fixedActionBtn">
           <v-icon>mdi-content-save</v-icon>
           保存
         </v-btn>
-        <v-btn text small color = "#707277" @click.stop = "showShareDialog = true">
+        <v-btn text small @click.stop = "showShareDialog = true" class = "fixedActionBtn">
           <v-icon>mdi-file-import</v-icon>
           导入
         </v-btn>
-        <v-btn text small color = "#707277" @click = "share">
+        <v-btn text small @click = "share" class = "fixedActionBtn">
           <v-icon>mdi-share-circle</v-icon>
           分享
         </v-btn>
@@ -374,6 +374,7 @@ const AVAILABLE_PROCESSORS = {
 
 export default {
   props: {
+
     isCollection: {
       type: Boolean,
       default() {
@@ -735,8 +736,17 @@ function uuidv4() {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .invert {
   filter: invert(100%);
 }
+.fixedActionBtn{
+  &.theme--dark{
+    color: #ffffffcc;
+  }
+
+  &.theme--light {
+    color : #00000099;
+  }
+}
 </style>