fix(icons): fix close icon

Link Dialog Modal Close Button is not using the specified icon library fix #130
iliyaZelenko · Feb 19, 2020 · b6e29cd · b6e29cd
1 parent 8a0d3c3
commit b6e29cd
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/demo/main.js b/demo/main.js
@@ -49,7 +49,7 @@ MAIN_MODULE.then(({ TiptapVuetifyPlugin }) => {
   })
   Vue.use(TiptapVuetifyPlugin, {
     vuetify,
-    iconsGroup: 'mdiSvg' // VuetifyIconsGroups (fa, md, mdi, mdiSvg)
+    iconsGroup: 'mdi' // VuetifyIconsGroups (fa, md, mdi, mdiSvg)
   })
 
   Vue.config.productionTip = false

diff --git a/demo/pages/Index.vue b/demo/pages/Index.vue
@@ -4,12 +4,12 @@
     min-height="500"
     max-height="600"
     :editor-properties="editorProperties"
+    output-format="json"
    -->
     <tiptap-vuetify
       v-model="content"
       :extensions="extensions"
       placeholder="Write something …"
-      output-format="json"
       @keydown="onkeydown"
     />
 

diff --git a/plan.txt b/plan.txt
@@ -1,5 +1,5 @@
-TODO: не включать не нужные иконки в бандл. Например, позволять пользователю импортировать нужные ему иконки, но не забыть что сторонние плагины должны иметь возможность включать иконки.
-
+TODO идея по тому что ниже: импортировать иконки из @mdi/js если используется mdiSvg, только тогда. У пользователя должен быть установлен @mdi/js.
+TODO не включать не нужные иконки в бандл. Например, позволять пользователю импортировать нужные ему иконки, но не забыть что сторонние плагины должны иметь возможность включать иконки.
 Написать гайд как добавлять свои расширения и менять уже существующие.
 
 Важно:

diff --git a/src/configs/theme.ts b/src/configs/theme.ts
@@ -1,11 +1,27 @@
+import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
+
 export const enum VuetifyIconsGroups {
   // default icons in vuetify (official material design icons)
   md = 'md',
   mdi = 'mdi',
   fa = 'fa',
+  /*
+    Для получения mdiSvg иконки, можно в RunKit запустить код:
+    const js = require("@mdi/js")
+    console.log(js.mdiClose)
+   */
   mdiSvg = 'mdiSvg'
 }
 
 export default {
   defaultIconsGroup: VuetifyIconsGroups.md
 }
+
+export const COMMON_ICONS = {
+  close: {
+    [VuetifyIconsGroups.md]: new VuetifyIcon('close'),
+    [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-times'),
+    [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-close'),
+    [VuetifyIconsGroups.mdiSvg]: new VuetifyIcon('M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
+  }
+}
diff --git a/src/extensions/nativeExtensions/image/ImageWindow.vue b/src/extensions/nativeExtensions/image/ImageWindow.vue
@@ -15,7 +15,7 @@
           icon
           @click="close"
         >
-          <v-icon>close</v-icon>
+          <v-icon>{{ COMMON_ICONS.close[$tiptapVuetify.iconsGroup] }}</v-icon>
         </v-btn>
       </v-card-title>
       <v-card-text>
@@ -93,6 +93,7 @@ import { VRow, VCol, VImg, VDialog, VCard, VCardTitle, VCardText, VCardActions,
 import I18nMixin from '~/mixins/I18nMixin'
 import ImageUploadArea from '~/extensions/nativeExtensions/image/ImageUploadArea.vue'
 import { VExpandTransition } from 'vuetify/lib/components/transitions'
+import { COMMON_ICONS } from '~/configs/theme'
 
 export const PROPS = {
   VALUE: 'value' as const,
@@ -129,6 +130,8 @@ export default class ImageWindow extends mixins(I18nMixin) {
   })
   readonly [PROPS.EDITOR]: any
 
+  readonly COMMON_ICONS = COMMON_ICONS
+
   form: {
     src: null | string
   } = {

diff --git a/src/extensions/nativeExtensions/link/LinkWindow.vue b/src/extensions/nativeExtensions/link/LinkWindow.vue
@@ -15,7 +15,7 @@
           icon
           @click="close"
         >
-          <v-icon>close</v-icon>
+          <v-icon>{{ COMMON_ICONS.close[$tiptapVuetify.iconsGroup] }}</v-icon>
         </v-btn>
       </v-card-title>
       <v-card-text>
@@ -57,6 +57,7 @@ import { mixins } from 'vue-class-component'
 import { Component, Prop } from 'vue-property-decorator'
 import { VDialog, VCard, VCardTitle, VCardText, VCardActions, VBtn, VSpacer, VIcon, VTextField } from 'vuetify/lib'
 import I18nMixin from '~/mixins/I18nMixin'
+import { COMMON_ICONS } from '~/configs/theme'
 
 export const PROPS = {
   VALUE: 'value' as const,
@@ -99,6 +100,8 @@ export default class LinkWindow extends mixins(I18nMixin) {
   })
   readonly [PROPS.HREF]: null | string
 
+  readonly COMMON_ICONS = COMMON_ICONS
+
   form = {
     href: this[PROPS.HREF],
     blank: false