fix(list): list dropdown menu

donotebase · May 1, 2020 · 6e940ca · 6e940ca
1 parent b5c1406
commit 6e940ca
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 4 deletions.
diff --git a/src/components/buttons/OListDropdown.vue b/src/components/buttons/OListDropdown.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <q-btn-dropdown :icon="currentItem.icon" menu-anchor="bottom left" menu-self="top left" :menu-offset="[20, 0]"
+                    class="o-list-dropdown" content-class="o-menu" @click="selectCurrent" split flat>
+      <q-list class="o-heading-list">
+        <q-item v-for="(item, index) in list" :key="index"
+                :class="{ 'is-active': item.isActive }"
+                @click.native="select(item)" clickable v-close-popup>
+          <q-item-section side>
+            <q-icon :name="item.icon" />
+          </q-item-section>
+          <q-item-section>{{item.label}}</q-item-section>
+          <q-item-section side>
+            <q-icon name="mdi-check" class="checked" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+    <q-tooltip>{{$o.lang.editor.list}}</q-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'o-list-dropdown',
+  data () {
+    return {
+      current: 'bullet_list'
+    }
+  },
+  props: {
+    editor: {
+      type: Object
+    },
+    commands: {
+      type: Object
+    },
+    isActive: {
+      type: Object
+    },
+  },
+  components: {
+  },
+  methods: {
+    selectCurrent () {
+      this.select(this.currentItem)
+    },
+    select (item) {
+      this.current = item.value
+      item.command()
+    }
+  },
+  computed: {
+    list () {
+      return [
+        { label: this.$o.lang.editor.unorderedList, value: 'bullet_list', icon: 'format_list_bulleted', isActive: this.isActive.bullet_list(), command: this.commands.bullet_list },
+        { label: this.$o.lang.editor.orderedList, value: 'ordered_list', icon: 'format_list_numbered', isActive: this.isActive.ordered_list(), command: this.commands.ordered_list },
+        { label: this.$o.lang.editor.todoList, value: 'todo_list', icon: 'mdi-check-box-outline', isActive: this.isActive.todo_list(), command: this.commands.todo_list },
+      ]
+    },
+    currentItem () {
+      for (let item of this.list) {
+        if (this.current === item.value) {
+          return item
+        }
+      }
+      return { label: this.$o.lang.editor.unorderedList, value: 'bullet_list', icon: 'format_list_bulleted', isActive: this.isActive.bullet_list(), command: this.commands.bullet_list }
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+  .o-list-dropdown {
+    .q-btn-dropdown__arrow {
+      margin-left 0
+    }
+
+    .q-btn:first-child {
+      padding 0 2px 0 4px
+    }
+    .q-btn:last-child {
+      padding 0 0px 0 2px
+    }
+    .q-btn-dropdown__arrow-container {
+      border none
+    }
+  }
+</style>
diff --git a/src/components/menubars/OEditorMenuBar.vue b/src/components/menubars/OEditorMenuBar.vue
@@ -79,6 +79,7 @@ import OAlignGroup from 'src/components/buttons/OAlignGroup'
 import OLineHeightDropdown from 'src/components/buttons/OLineHeightDropdown'
 import OHeadingDropdown from 'src/components/buttons/OHeadingDropdown'
 import OHeadingList from 'src/components/buttons/OHeadingList'
+import OListDropdown from 'src/components/buttons/OListDropdown'
 
 import OAddMoreBtn from 'src/components/buttons/OAddMoreBtn'
 import OPhotoBtn from 'src/components/buttons/OPhotoBtn'
@@ -123,6 +124,7 @@ export default {
     OLineHeightDropdown,
     OHeadingDropdown,
     OHeadingList,
+    OListDropdown,
     OAddMoreBtn,
     OPhotoBtn,
     OLinkBtn,

diff --git a/src/data/editor.js b/src/data/editor.js
@@ -17,6 +17,7 @@ export const CommandComponents = {
   'align-dropdown': 'o-align-dropdown',
   'align-group': 'o-align-group',
   'line-height': 'o-line-height-dropdown',
+  'list-dropdown': 'o-list-dropdown',
   heading: 'o-heading-dropdown',
   link: 'o-link-btn',
   photo: 'o-photo-btn',

diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
@@ -18,6 +18,7 @@ export default {
     italic: 'Italic',
     strikethrough: 'Strikethrough',
     underline: 'Underline',
+    list: 'List',
     unorderedList: 'Unordered List',
     orderedList: 'Ordered List',
     todoList: 'Todo List',

diff --git a/src/i18n/pl/index.js b/src/i18n/pl/index.js
@@ -20,6 +20,7 @@ export default {
     underline: 'Podkreślenie',
     unorderedList: 'Lista wypunktowana',
     orderedList: 'Lista numerowana',
+    list: 'List',
     todoList: 'Lista rzeczy do zrobienia',
     subscript: 'Indeks dolny',
     superscript: 'Indeks górny',

diff --git a/src/i18n/zh-hans/index.js b/src/i18n/zh-hans/index.js
@@ -18,6 +18,7 @@ export default {
     italic: '斜体',
     strikethrough: '删除线',
     underline: '下划线',
+    list: '列表',
     unorderedList: '无序列表',
     orderedList: '有序列表',
     todoList: '任务列表',

diff --git a/src/pages/examples/basic.vue b/src/pages/examples/basic.vue
@@ -85,13 +85,11 @@ export default {
           'line-height',
           'separator',
           'horizontal',
-          'bullet_list',
-          'ordered_list',
-          'todo_list',
+          'list-dropdown',
           'separator',
           'blockquote',
           'code_block',
-          'link',
+          // 'link',
           OLinkBtn, // use custom component
           'photo',
           'table',