feat(QEditor) Allow icon overrides. Fixes quasarframework#5163 (quasarframework#5164)

webnoob · rstoenescu · commit 5c903036b4dc · 2019-09-26T21:46:42.000+03:00
* feat (ui): QSlider / QRange allow null value quasarframework#4637 * Update Null.vue * Update Null.vue * Update QSlider.js * feat (QEditor): Allow header and size icons to be overridden. Fixes: 5163 * chore (git): Fix merged file issues. * chore (git): Fix merged file issues. * Update quasar-icon-sets.md
diff --git a/docs/src/pages/options/quasar-icon-sets.md b/docs/src/pages/options/quasar-icon-sets.md
@@ -51,7 +51,7 @@ framework: {
 This will enable you to use both Ionicons & Fontawesome in your app, and all Quasar components will display Fontawesome icons.
 
 #### Changing Icon Set Dynamically
-Quasar Icon Set is reactive, so all components will update properly if you change the $q.iconSet object. Here is a example:
+Quasar Icon Set is reactive, so all components will update properly if you change the $q.iconSet object. Here is an example:
 
 ```js
 methods: {
@@ -61,6 +61,17 @@ methods: {
 }
 ```
 
+#### Changing a Specific Icon Dynamically
+If you want to change a specific icon to another, you can. Here is an example:
+
+```js
+methods: {
+  changeQEditorHeaderIcon () {
+    this.$q.iconSet.editor.header1 = 'fas fa-font'
+  }
+}
+```
+
 ### UMD Way
 Include the Quasar Icon Set tag for your Quasar version and also tell Quasar to use it. Example:
 
diff --git a/ui/icon-set/mdi-v3.js b/ui/icon-set/mdi-v3.js
@@ -68,8 +68,21 @@ export default {
     undo: 'mdi-undo',
     redo: 'mdi-redo',
     header: 'mdi-format-size',
+    header1: 'mdi-format-header-1',
+    header2: 'mdi-format-header-2',
+    header3: 'mdi-format-header-3',
+    header4: 'mdi-format-header-4',
+    header5: 'mdi-format-header-5',
+    header6: 'mdi-format-header-6',
     code: 'mdi-code-tags',
     size: 'mdi-format-size',
+    size1: 'mdi-numeric-1-box',
+    size2: 'mdi-numeric-2-box',
+    size3: 'mdi-numeric-3-box',
+    size4: 'mdi-numeric-4-box',
+    size5: 'mdi-numeric-5-box',
+    size6: 'mdi-numeric-6-box',
+    size7: 'mdi-numeric-7-box',
     font: 'mdi-format-font'
   },
   expansionItem: {
diff --git a/ui/icon-set/mdi-v4.js b/ui/icon-set/mdi-v4.js
@@ -68,8 +68,21 @@ export default {
     undo: 'mdi-undo',
     redo: 'mdi-redo',
     header: 'mdi-format-size',
+    header1: 'mdi-format-header-1',
+    header2: 'mdi-format-header-2',
+    header3: 'mdi-format-header-3',
+    header4: 'mdi-format-header-4',
+    header5: 'mdi-format-header-5',
+    header6: 'mdi-format-header-6',
     code: 'mdi-code-tags',
     size: 'mdi-format-size',
+    size1: 'mdi-numeric-1-box',
+    size2: 'mdi-numeric-2-box',
+    size3: 'mdi-numeric-3-box',
+    size4: 'mdi-numeric-4-box',
+    size5: 'mdi-numeric-5-box',
+    size6: 'mdi-numeric-6-box',
+    size7: 'mdi-numeric-7-box',
     font: 'mdi-format-font'
   },
   expansionItem: {
diff --git a/ui/src/components/editor/QEditor.js b/ui/src/components/editor/QEditor.js
@@ -124,22 +124,22 @@ export default Vue.extend({
         undo: { type: 'no-state', cmd: 'undo', icon: i.undo, tip: e.undo, key: 90 },
         redo: { type: 'no-state', cmd: 'redo', icon: i.redo, tip: e.redo, key: 89 },
 
-        h1: { cmd: 'formatBlock', param: 'H1', icon: i.header, tip: e.header1, htmlTip: `<h1 class="q-ma-none">${e.header1}</h1>` },
-        h2: { cmd: 'formatBlock', param: 'H2', icon: i.header, tip: e.header2, htmlTip: `<h2 class="q-ma-none">${e.header2}</h2>` },
-        h3: { cmd: 'formatBlock', param: 'H3', icon: i.header, tip: e.header3, htmlTip: `<h3 class="q-ma-none">${e.header3}</h3>` },
-        h4: { cmd: 'formatBlock', param: 'H4', icon: i.header, tip: e.header4, htmlTip: `<h4 class="q-ma-none">${e.header4}</h4>` },
-        h5: { cmd: 'formatBlock', param: 'H5', icon: i.header, tip: e.header5, htmlTip: `<h5 class="q-ma-none">${e.header5}</h5>` },
-        h6: { cmd: 'formatBlock', param: 'H6', icon: i.header, tip: e.header6, htmlTip: `<h6 class="q-ma-none">${e.header6}</h6>` },
+        h1: { cmd: 'formatBlock', param: 'H1', icon: i.header1 || i.header, tip: e.header1, htmlTip: `<h1 class="q-ma-none">${e.header1}</h1>` },
+        h2: { cmd: 'formatBlock', param: 'H2', icon: i.header2 || i.header, tip: e.header2, htmlTip: `<h2 class="q-ma-none">${e.header2}</h2>` },
+        h3: { cmd: 'formatBlock', param: 'H3', icon: i.header3 || i.header, tip: e.header3, htmlTip: `<h3 class="q-ma-none">${e.header3}</h3>` },
+        h4: { cmd: 'formatBlock', param: 'H4', icon: i.header4 || i.header, tip: e.header4, htmlTip: `<h4 class="q-ma-none">${e.header4}</h4>` },
+        h5: { cmd: 'formatBlock', param: 'H5', icon: i.header5 || i.header, tip: e.header5, htmlTip: `<h5 class="q-ma-none">${e.header5}</h5>` },
+        h6: { cmd: 'formatBlock', param: 'H6', icon: i.header6 || i.header, tip: e.header6, htmlTip: `<h6 class="q-ma-none">${e.header6}</h6>` },
         p: { cmd: 'formatBlock', param: 'DIV', icon: i.header, tip: e.paragraph },
         code: { cmd: 'formatBlock', param: 'PRE', icon: i.code, htmlTip: `<code>${e.code}</code>` },
 
-        'size-1': { cmd: 'fontSize', param: '1', icon: i.size, tip: e.size1, htmlTip: `<font size="1">${e.size1}</font>` },
-        'size-2': { cmd: 'fontSize', param: '2', icon: i.size, tip: e.size2, htmlTip: `<font size="2">${e.size2}</font>` },
-        'size-3': { cmd: 'fontSize', param: '3', icon: i.size, tip: e.size3, htmlTip: `<font size="3">${e.size3}</font>` },
-        'size-4': { cmd: 'fontSize', param: '4', icon: i.size, tip: e.size4, htmlTip: `<font size="4">${e.size4}</font>` },
-        'size-5': { cmd: 'fontSize', param: '5', icon: i.size, tip: e.size5, htmlTip: `<font size="5">${e.size5}</font>` },
-        'size-6': { cmd: 'fontSize', param: '6', icon: i.size, tip: e.size6, htmlTip: `<font size="6">${e.size6}</font>` },
-        'size-7': { cmd: 'fontSize', param: '7', icon: i.size, tip: e.size7, htmlTip: `<font size="7">${e.size7}</font>` }
+        'size-1': { cmd: 'fontSize', param: '1', icon: i.size1 || i.size, tip: e.size1, htmlTip: `<font size="1">${e.size1}</font>` },
+        'size-2': { cmd: 'fontSize', param: '2', icon: i.size2 || i.size, tip: e.size2, htmlTip: `<font size="2">${e.size2}</font>` },
+        'size-3': { cmd: 'fontSize', param: '3', icon: i.size3 || i.size, tip: e.size3, htmlTip: `<font size="3">${e.size3}</font>` },
+        'size-4': { cmd: 'fontSize', param: '4', icon: i.size4 || i.size, tip: e.size4, htmlTip: `<font size="4">${e.size4}</font>` },
+        'size-5': { cmd: 'fontSize', param: '5', icon: i.size5 || i.size, tip: e.size5, htmlTip: `<font size="5">${e.size5}</font>` },
+        'size-6': { cmd: 'fontSize', param: '6', icon: i.size6 || i.size, tip: e.size6, htmlTip: `<font size="6">${e.size6}</font>` },
+        'size-7': { cmd: 'fontSize', param: '7', icon: i.size7 || i.size, tip: e.size7, htmlTip: `<font size="7">${e.size7}</font>` }
       }
     },
 
