ayanova/src/components/wiki-control.vue

@@ -47,7 +47,6 @@
               <v-icon>fa-strikethrough</v-icon></v-btn
             >
 
-            <!-- <v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn> -->
             <v-menu offset-y>
               <template v-slot:activator="{ on }">
                 <v-btn depressed tile v-on="on">
@@ -103,9 +102,71 @@
             <v-btn depressed tile @click="clickTask">
               <v-icon>fa-check-square</v-icon></v-btn
             >
-            <v-btn depressed tile class="ml-1">
-              <v-icon>fa-table</v-icon></v-btn
-            >
+
+            <v-menu :close-on-content-click="false" offset-y>
+              <template v-slot:activator="{ on }">
+                <v-btn depressed tile class="ml-1" v-on="on">
+                  <v-icon>fa-table</v-icon>
+                </v-btn>
+              </template>
+              <v-card>
+                <!-- <v-list>
+                  <v-list-item>
+                    <v-list-item-avatar>
+                      <img
+                        src="https://cdn.vuetifyjs.com/images/john.jpg"
+                        alt="John"
+                      />
+                    </v-list-item-avatar>
+
+                    <v-list-item-content>
+                      <v-list-item-title>John Leider</v-list-item-title>
+                      <v-list-item-subtitle
+                        >Founder of Vuetify.js</v-list-item-subtitle
+                      >
+                    </v-list-item-content>
+
+                    <v-list-item-action>
+                      <v-btn icon>
+                        <v-icon>fa-heart</v-icon>
+                      </v-btn>
+                    </v-list-item-action>
+                  </v-list-item>
+                </v-list>
+
+                <v-divider></v-divider>
+
+                <v-list>
+                  <v-list-item>
+                    <v-list-item-action>
+                      <v-slider vertical color="purple"></v-slider>
+                    </v-list-item-action>
+                    <v-list-item-title>rows</v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item>
+                    <v-list-item-action>
+                      <v-slider color="purple"></v-slider>
+                    </v-list-item-action>
+                    <v-list-item-title>columns</v-list-item-title>
+                  </v-list-item>
+                </v-list> -->
+
+                <v-card-title>Table</v-card-title>
+                <div>
+                  <v-slider vertical color="purple"></v-slider>
+                  <v-slider color="purple"></v-slider>
+                </div>
+
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+
+                  <v-btn text @click="menu = false">Cancel</v-btn>
+                  <v-btn color="primary" text @click="menu = false">Save</v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-menu>
+
             <v-btn depressed tile> <v-icon>fa-link</v-icon></v-btn>
             <v-btn depressed tile> <v-icon>fa-image</v-icon></v-btn>
             <v-btn depressed tile class="ml-1" @click="clickCode">
@@ -204,7 +265,6 @@ export default {
     },
     getSelectedRange(forceBlock) {
       let bodyTextArea = this.$refs.editArea.$el.querySelector("textarea");
-     // debugger;
       this.selection.start = bodyTextArea.selectionStart;
       this.selection.end = bodyTextArea.selectionEnd;