Skip to content

Commit

Permalink
refactor: replace vaadin-icons with more suitable svg icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@paodb @mlopezFC
paodb authored and mlopezFC committed Dec 5, 2022
1 parent 4188755 commit 846e974
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 11 deletions.
54 changes: 54 additions & 0 deletions src/vcf-enhanced-rich-text-editor-extra-icons.js
View file
Original file line number Diff line number Diff line change
@@ -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);
8 changes: 4 additions & 4 deletions src/vcf-enhanced-rich-text-editor-toolbar-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"] {
Expand Down
15 changes: 8 additions & 7 deletions src/vcf-enhanced-rich-text-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 -->
Expand Down
11 changes: 11 additions & 0 deletions theme/lumo/vcf-enhanced-rich-text-editor-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
11 changes: 11 additions & 0 deletions theme/material/vcf-enhanced-rich-text-editor-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 846e974

Please sign in to comment.