From 846e97425db930729286a5944162ed1fc757ed2e Mon Sep 17 00:00:00 2001
From: Paola De Bartolo <paola.debartolo@gmail.com>
Date: Mon, 5 Dec 2022 10:39:13 -0300
Subject: [PATCH] refactor: replace vaadin-icons with more suitable svg icons

---
 ...f-enhanced-rich-text-editor-extra-icons.js | 54 +++++++++++++++++++
 ...nhanced-rich-text-editor-toolbar-styles.js |  8 +--
 src/vcf-enhanced-rich-text-editor.js          | 15 +++---
 .../vcf-enhanced-rich-text-editor-styles.js   | 11 ++++
 .../vcf-enhanced-rich-text-editor-styles.js   | 11 ++++
 5 files changed, 88 insertions(+), 11 deletions(-)
 create mode 100644 src/vcf-enhanced-rich-text-editor-extra-icons.js

diff --git a/src/vcf-enhanced-rich-text-editor-extra-icons.js b/src/vcf-enhanced-rich-text-editor-extra-icons.js
new file mode 100644
index 0000000..82f311d
--- /dev/null
+++ b/src/vcf-enhanced-rich-text-editor-extra-icons.js
@@ -0,0 +1,54 @@
+import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
+
+const template = document.createElement('template');
+
+template.innerHTML = `<iron-iconset-svg name="vcf-erte-extra-icons" size="24">
+  <svg><defs>
+    <g id="align-center-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-center" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--rte-extra-icons-stroke-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="4" y1="6" x2="20" y2="6" />
+  <line x1="8" y1="12" x2="16" y2="12" />
+  <line x1="6" y1="18" x2="18" y2="18" />
+</svg></g>
+    <g id="align-justify-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-justified" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--rte-extra-icons-stroke-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="4" y1="6" x2="20" y2="6" />
+  <line x1="4" y1="12" x2="20" y2="12" />
+  <line x1="4" y1="18" x2="20" y2="18" />
+</svg></g>
+    <g id="align-left-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--rte-extra-icons-stroke-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="4" y1="6" x2="20" y2="6" />
+  <line x1="4" y1="12" x2="14" y2="12" />
+  <line x1="4" y1="18" x2="18" y2="18" />
+</svg></g>
+    <g id="align-right-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--rte-extra-icons-stroke-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="4" y1="6" x2="20" y2="6" />
+  <line x1="10" y1="12" x2="20" y2="12" />
+  <line x1="6" y1="18" x2="20" y2="18" />
+</svg></g>
+    <g id="deindent-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-indent-decrease" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--rte-extra-icons-stroke-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="20" y1="6" x2="13" y2="6" />
+  <line x1="20" y1="12" x2="11" y2="12" />
+  <line x1="20" y1="18" x2="13" y2="18" />
+  <path d="M8 8l-4 4l4 4" />
+</svg></g>
+    <g id="indent-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-indent-increase" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--rte-extra-icons-stroke-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="20" y1="6" x2="9" y2="6" />
+  <line x1="20" y1="12" x2="13" y2="12" />
+  <line x1="20" y1="18" x2="9" y2="18" />
+  <path d="M4 8l4 4l-4 4" />
+</svg></g>
+    <g id="lock-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lock" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--rte-extra-icons-stroke-color)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <rect x="5" y="11" width="14" height="10" rx="2" />
+  <circle cx="12" cy="16" r="1" />
+  <path d="M8 11v-4a4 4 0 0 1 8 0v4" />
+</svg></g>
+  </defs></svg>
+</iron-iconset-svg>`;
+
+document.head.appendChild(template.content);
diff --git a/src/vcf-enhanced-rich-text-editor-toolbar-styles.js b/src/vcf-enhanced-rich-text-editor-toolbar-styles.js
index 713a523..c08793f 100644
--- a/src/vcf-enhanced-rich-text-editor-toolbar-styles.js
+++ b/src/vcf-enhanced-rich-text-editor-toolbar-styles.js
@@ -63,16 +63,16 @@ documentContainer.innerHTML = `
         [part~="toolbar-button-link"]::before,
         [part~="toolbar-button-clean"]::before {
           font-family: "vaadin-rte-icons", sans-serif;
-        }
+        }    
 
         [part~="toolbar-button-align-justify"] iron-icon, 
         [part~="toolbar-button-align-left"] iron-icon,
         [part~="toolbar-button-align-center"] iron-icon,
         [part~="toolbar-button-align-right"] iron-icon,
         [part~="toolbar-button-deindent"] iron-icon, 
-        [part~="toolbar-button-indent"] iron-icon {
-          padding: 0.25em;
-          box-sizing: border-box !important;
+        [part~="toolbar-button-indent"] iron-icon,
+        [part~="toolbar-button-readonly"] iron-icon {
+          --rte-extra-icons-stroke-color: var(--lumo-contrast-80pct);
         }
 
         [part~="toolbar-group"] {
diff --git a/src/vcf-enhanced-rich-text-editor.js b/src/vcf-enhanced-rich-text-editor.js
index f269716..1c706e4 100644
--- a/src/vcf-enhanced-rich-text-editor.js
+++ b/src/vcf-enhanced-rich-text-editor.js
@@ -22,6 +22,7 @@ import '@vaadin/vaadin-icons';
 import './vendor/vaadin-quill';
 import './vcf-enhanced-rich-text-editor-styles';
 import './vcf-enhanced-rich-text-editor-toolbar-styles';
+import './vcf-enhanced-rich-text-editor-extra-icons';
 import { ReadOnlyBlot, LinePartBlot, TabBlot, PreTabBlot, TabsContBlot, PlaceholderBlot } from './vcf-enhanced-rich-text-editor-blots';
 
 const Quill = window.Quill;
@@ -238,26 +239,26 @@ Inline.order.push(PlaceholderBlot.blotName, ReadOnlyBlot.blotName, LinePartBlot.
             <span part="toolbar-group toolbar-group-indent" style="display: [[_buttonGroupDisplay(toolbarButtons, 'indent')]];">
               <!-- List buttons -->
               <button type="button" class="ql-indent" value="-1" part="toolbar-button toolbar-button-deindent" title$="[[i18n.deindent]]" style="display: [[_buttonDisplay(toolbarButtons, 'deindent')]];">
-                <iron-icon icon="vaadin:deindent"></iron-icon>
+                <iron-icon icon="vcf-erte-extra-icons:deindent-icon"></iron-icon>
               </button>
               <button type="button" class="ql-indent" value="+1" part="toolbar-button toolbar-button-indent" title$="[[i18n.indent]]" style="display: [[_buttonDisplay(toolbarButtons, 'indent')]];">
-                <iron-icon icon="vaadin:indent"></iron-icon>
+                <iron-icon icon="vcf-erte-extra-icons:indent-icon"></iron-icon>
               </button>
             </span>
 
             <span part="toolbar-group toolbar-group-alignment" style="display: [[_buttonGroupDisplay(toolbarButtons, 'alignment')]];">
               <!-- Align buttons -->
               <button type="button" class="ql-align" value="" part="toolbar-button toolbar-button-align-left" title$="[[i18n.alignLeft]]" style="display: [[_buttonDisplay(toolbarButtons, 'alignLeft')]];">
-                <iron-icon icon="vaadin:align-left"></iron-icon>
+                <iron-icon icon="vcf-erte-extra-icons:align-left-icon"></iron-icon>
               </button>
               <button type="button" class="ql-align" value="center" part="toolbar-button toolbar-button-align-center" title$="[[i18n.alignCenter]]" style="display: [[_buttonDisplay(toolbarButtons, 'alignCenter')]];">
-                <iron-icon icon="vaadin:align-center"></iron-icon>
+                <iron-icon icon="vcf-erte-extra-icons:align-center-icon"></iron-icon>
               </button>
               <button type="button" class="ql-align" value="right" part="toolbar-button toolbar-button-align-right" title$="[[i18n.alignRight]]" style="display: [[_buttonDisplay(toolbarButtons, 'alignRight')]];">
-                <iron-icon icon="vaadin:align-right"></iron-icon>
+                <iron-icon icon="vcf-erte-extra-icons:align-right-icon"></iron-icon>
               </button>
               <button type="button" class="ql-align" value="justify" part="toolbar-button toolbar-button-align-justify" title$="[[i18n.alignJustify]]" style="display: [[_buttonDisplay(toolbarButtons, 'alignJustify')]];">
-                <iron-icon icon="vaadin:align-justify"></iron-icon>
+                <iron-icon icon="vcf-erte-extra-icons:align-justify-icon"></iron-icon>
               </button>
             </span>
 
@@ -289,7 +290,7 @@ Inline.order.push(PlaceholderBlot.blotName, ReadOnlyBlot.blotName, LinePartBlot.
             <span part="toolbar-group toolbar-group-format" style="display: [[_buttonGroupDisplay(toolbarButtons, 'format')]];">
               <!-- Read-only -->
               <button type="button" class="rte-readonly" part="toolbar-button toolbar-button-readonly" title$="[[i18n.readonly]]" style="display: [[_buttonDisplay(toolbarButtons, 'readonly')]];" on-click="_onReadonlyClick">
-                <iron-icon icon="vaadin:lock"></iron-icon>
+                <iron-icon icon="vcf-erte-extra-icons:lock-icon"></iron-icon>
               </button>
 
               <!-- Clean -->
diff --git a/theme/lumo/vcf-enhanced-rich-text-editor-styles.js b/theme/lumo/vcf-enhanced-rich-text-editor-styles.js
index 750abb0..e2599cc 100644
--- a/theme/lumo/vcf-enhanced-rich-text-editor-styles.js
+++ b/theme/lumo/vcf-enhanced-rich-text-editor-styles.js
@@ -132,6 +132,17 @@ const documentContainer = html`
         [part~='toolbar-button-list-bullet']::before {
           content: var(--lumo-icons-unordered-list);
         }
+
+        [part~="toolbar-button-align-justify"] iron-icon, 
+        [part~="toolbar-button-align-left"] iron-icon,
+        [part~="toolbar-button-align-center"] iron-icon,
+        [part~="toolbar-button-align-right"] iron-icon,
+        [part~="toolbar-button-deindent"] iron-icon, 
+        [part~="toolbar-button-indent"] iron-icon,
+        [part~="toolbar-button-readonly"] iron-icon {
+          --rte-extra-icons-stroke-color: var(--lumo-contrast-60pct);
+        }
+
         
         [part~='toolbar-button-blockquote']::before {
           font-size: var(--lumo-font-size-xxl);
diff --git a/theme/material/vcf-enhanced-rich-text-editor-styles.js b/theme/material/vcf-enhanced-rich-text-editor-styles.js
index 0cd2650..3be65a5 100644
--- a/theme/material/vcf-enhanced-rich-text-editor-styles.js
+++ b/theme/material/vcf-enhanced-rich-text-editor-styles.js
@@ -81,6 +81,17 @@ const documentContainer = html`
           font-size: 20px;
         }
 
+        /* SVG extra icon set */
+        [part~="toolbar-button-align-justify"] iron-icon, 
+        [part~="toolbar-button-align-left"] iron-icon,
+        [part~="toolbar-button-align-center"] iron-icon,
+        [part~="toolbar-button-align-right"] iron-icon,
+        [part~="toolbar-button-deindent"] iron-icon, 
+        [part~="toolbar-button-indent"] iron-icon,
+        [part~="toolbar-button-readonly"] iron-icon {
+          --rte-extra-icons-stroke-color: var(--material-secondary-text-color);
+        }
+
         /* TODO unsupported selector */
         [part='content'] > .ql-editor {
           padding: 0 16px;