feat: table menu

donotebase · Apr 13, 2020 · 42be4b4 · 42be4b4
1 parent 4562311
commit 42be4b4
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 2 deletions.
diff --git a/src/lib/components/buttons/OTableGroup.vue b/src/lib/components/buttons/OTableGroup.vue
@@ -0,0 +1,50 @@
+<template>
+  <section class="row o-table-group">
+    <o-menubar-btn icon="mdi-table-remove" tooltip="Remove Table" @click.native="commands.deleteTable" />
+
+    <q-separator />
+    <o-menubar-btn icon="mdi-table-column-plus-before" @click.native="commands.addColumnBefore" />
+    <o-menubar-btn icon="mdi-table-column-plus-after" @click.native="commands.addColumnAfter" />
+    <o-menubar-btn icon="mdi-table-column-remove" @click.native="commands.deleteColumn" />
+
+    <q-separator />
+    <o-menubar-btn icon="mdi-table-row-plus-before" @click.native="commands.addRowBefore" />
+    <o-menubar-btn icon="mdi-table-row-plus-after" @click.native="commands.addRowAfter" />
+    <o-menubar-btn icon="mdi-table-row-remove" @click.native="commands.deleteRow" />
+
+    <q-separator />
+    <o-menubar-btn icon="mdi-table-merge-cells" @click.native="commands.toggleCellMerge" />
+  </section>
+</template>
+
+<script>
+import OMenubarBtn from './OMenubarBtn'
+export default {
+  name: 'o-table-group',
+  data () {
+    return {
+    }
+  },
+  props: {
+    commands: {
+      type: Object
+    },
+    isActive: {
+      type: Object
+    }
+  },
+  components: {
+    OMenubarBtn
+  },
+  methods: {
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="stylus">
+  .o-table-group {
+    height 40px
+  }
+</style>
diff --git a/src/lib/components/menubars/OEditorMenuBar.vue b/src/lib/components/menubars/OEditorMenuBar.vue
@@ -1,7 +1,23 @@
 <template>
   <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, getMarkAttrs, focused }">
     <section class="row col-12 justify-between items-center bg-light tiptap-menubar">
-      <div class="row q-px-xs menubar is-hidden" :class="{ 'is-focused': focused }">
+
+      <!-- Table -->
+      <div class="row q-px-xs menubar is-hidden" :class="{ 'is-focused': focused }" v-if="isActive.table()">
+        <template v-for="(item, index) of tableToolbar">
+          <o-simple-command-btn :name="item" :commands="commands" :is-active="isActive" :key="index" v-if="isSimpleCommand(item)" />
+          <q-separator vertical inset :key="index" v-else-if="item==='separator'" />
+          <o-table-group :commands="commands" :is-active="isActive" :key="index" v-else-if="item==='table'" />
+
+          <o-fore-color-dropdown :commands="commands" :get-mark-attrs="getMarkAttrs" :key="index" v-else-if="item==='fore-color'" />
+          <o-back-color-dropdown :commands="commands" :key="index" v-else-if="item==='back-color'" />
+          <o-font-family-dropdown :commands="commands" :key="index" v-else-if="item==='font-family'" />
+          <o-align-dropdown :commands="commands" :key="index" v-else-if="item==='align-dropdown'" />
+        </template>
+      </div>
+
+      <!-- Normal -->
+      <div class="row q-px-xs menubar is-hidden" :class="{ 'is-focused': focused }" v-else>
         <template v-for="(item, index) of toolbar">
           <o-simple-command-btn :name="item" :commands="commands" :is-active="isActive" :key="index" v-if="isSimpleCommand(item)" />
           <q-separator vertical inset :key="index" v-else-if="item==='separator'" />
@@ -37,6 +53,7 @@ import OHeadingList from 'src/lib/components/buttons/OHeadingList'
 import OAddMoreBtn from 'src/lib/components/buttons/OAddMoreBtn'
 import OPhotoBtn from 'src/lib/components/buttons/OPhotoBtn'
 import OTableBtn from 'src/lib/components/buttons/OTableBtn'
+import OTableGroup from 'src/lib/components/buttons/OTableGroup'
 
 import OMenubarBtn from 'src/lib/components/buttons/OMenubarBtn'
 import OSimpleCommandBtn from 'src/lib/components/buttons/OSimpleCommandBtn'
@@ -63,6 +80,20 @@ export default {
         'indent',
         'outdent',
       ],
+      tableToolbar: [
+        'bold',
+        'italic',
+        'strike',
+        'underline',
+        'separator',
+        'font-family',
+        'fore-color',
+        'back-color',
+        'separator',
+        'align-dropdown',
+        'separator',
+        'table'
+      ],
       pageView: 'page',
       menu: {
         add: false
@@ -97,7 +128,8 @@ export default {
     OHeadingList,
     OAddMoreBtn,
     OPhotoBtn,
-    OTableBtn
+    OTableBtn,
+    OTableGroup
   },
   methods: {
     isSimpleCommand (item) {