Added Remix icon set for use with editor UI.

pull/10/head
Jens Pelzetter 2021-09-28 21:24:27 +02:00
parent ebdf9cfe41
commit 842d9e708b
5 changed files with 11430 additions and 23 deletions

View File

@ -1787,6 +1787,11 @@
"resolve": "^1.9.0" "resolve": "^1.9.0"
} }
}, },
"remixicon": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/remixicon/-/remixicon-2.5.0.tgz",
"integrity": "sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww=="
},
"resolve": { "resolve": {
"version": "1.20.0", "version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",

View File

@ -35,6 +35,7 @@
"bootstrap-icons": "^1.5.0", "bootstrap-icons": "^1.5.0",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"remixicon": "^2.5.0",
"sortablejs": "^1.14.0" "sortablejs": "^1.14.0"
}, },
"targets": { "targets": {

View File

@ -2,6 +2,7 @@
<html <html
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap" xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
xmlns:librecms="http://xmlns.jcp.org/jsf/composite/components/librecms"
xmlns:cc="http://xmlns.jcp.org/jsf/composite" xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
@ -383,42 +384,48 @@
title="#{CmsAdminMessages['cms_editor.buttons.emph']}" title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="type-italic" /> <!-- <bootstrap:svgIcon icon="type-italic" /> -->
<librecms:remixSvgIcon icon="ri-italic" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-strong-emph" class="btn btn-outline-dark tiptap-strong-emph"
title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}" title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="type-bold" /> <!-- <bootstrap:svgIcon icon="type-bold" />-->
<librecms:remixSvgIcon icon="ri-bold" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-code" class="btn btn-outline-dark tiptap-code"
title="#{CmsAdminMessages['cms_editor.buttons.code']}" title="#{CmsAdminMessages['cms_editor.buttons.code']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="code" /> <!--<bootstrap:svgIcon icon="code" />-->
<librecms:remixSvgIcon icon="ri-code-view" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-strikethrough" class="btn btn-outline-dark tiptap-strikethrough"
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}" title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="type-strikethrough" /> <!--<bootstrap:svgIcon icon="type-strikethrough" />-->
<librecms:remixSvgIcon icon="ri-strikethrough" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-subscript" class="btn btn-outline-dark tiptap-subscript"
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}" title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
type="button" type="button"
> >
<span aria-hidden="true">x<sub>n</sub></span> <!--<span aria-hidden="true">x<sub>n</sub></span>-->
<librecms:remixSvgIcon icon="ri-subscript" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-superscript" class="btn btn-outline-dark tiptap-superscript"
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}" title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
type="button" type="button"
> >
<span aria-hidden="true">x<sup>n</sup></span> <!--<span aria-hidden="true">x<sup>n</sup></span>-->
<librecms:remixSvgIcon icon="ri-superscript" />
</button> </button>
</div> </div>
<div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-headings"> <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-headings">
@ -428,7 +435,8 @@
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}" title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
type="button" type="button"
> >
<span aria-hidden="true">H#{level}</span> <!--<span aria-hidden="true">H#{level}</span>-->
<librecms:remixSvgIcon icon="ri-h-#{level}" />
</button> </button>
</ui:repeat> </ui:repeat>
</div> </div>
@ -438,21 +446,24 @@
title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}" title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="type" /> <!--<bootstrap:svgIcon icon="type" />-->
<librecms:remixSvgIcon icon="ri-text" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-blockquote" class="btn btn-outline-dark tiptap-blockquote"
title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}" title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="blockquote-left" /> <!--bootstrap:svgIcon icon="blockquote-left" />-->
<librecms:remixSvgIcon icon="ri-double-quote-l" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-codeblock" class="btn btn-outline-dark tiptap-codeblock"
title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}" title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="code-square" /> <!--<bootstrap:svgIcon icon="code-square" />-->
<librecms:remixSvgIcon icon="ri-code-box" />
</button> </button>
</div> </div>
<div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-lists"> <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-lists">
@ -461,14 +472,16 @@
title="#{CmsAdminMessages['cms_editor.buttons.ul']}" title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="list-ul" /> <!--<bootstrap:svgIcon icon="list-ul" />-->
<librecms:remixSvgIcon icon="ri-list-unordered" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-ol" class="btn btn-outline-dark tiptap-ol"
title="#{CmsAdminMessages['cms_editor.buttons.ol']}" title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="list-ol" /> <!--<bootstrap:svgIcon icon="list-ol" />-->
<librecms:remixSvgIcon icon="ri-list-ordered" />
</button> </button>
</div> </div>
<div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-table"> <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-table">
@ -479,7 +492,8 @@
title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}" title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="table" /> <!--<bootstrap:svgIcon icon="table" />-->
<librecms:remixSvgIcon icon="ri-table-2" />
</button> </button>
<div <div
aria-hidden="true" aria-hidden="true"
@ -562,41 +576,47 @@
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row_before']}" title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row_before']}"
type="button" type="button"
> >
<img src="#{request.contextPath}/icons/cms-editor/table-add-row-before.svg" /> <!--<img src="#{request.contextPath}/icons/cms-editor/table-add-row-before.svg" />-->
<librecms:remixSvgIcon icon="ri-insert-row-top" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-insert-table-row-after" class="btn btn-outline-dark tiptap-insert-table-row-after"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row_after']}" title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row_after']}"
type="button" type="button"
> >
<img src="#{request.contextPath}/icons/cms-editor/table-add-row-after.svg" /> <!--<img src="#{request.contextPath}/icons/cms-editor/table-add-row-after.svg" />-->
<librecms:remixSvgIcon icon="ri-insert-row-below" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-table-remove-row" class="btn btn-outline-dark tiptap-table-remove-row"
title="#{CmsAdminMessages['cms_editor.buttons.remove_table_row']}" title="#{CmsAdminMessages['cms_editor.buttons.remove_table_row']}"
type="button"> type="button">
<img src="#{request.contextPath}/icons/cms-editor/table-remove-row.svg" /> <!--<img src="#{request.contextPath}/icons/cms-editor/table-remove-row.svg" />-->
<librecms:remixSvgIcon icon="ri-delete-row" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-insert-table-column-before" class="btn btn-outline-dark tiptap-insert-table-column-before"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_column_before']}" title="#{CmsAdminMessage['cms_editor.buttons.insert_table_column_before']}"
type="button" type="button"
> >
<img src="#{request.contextPath}/icons/cms-editor/table-add-column-before.svg" /> <!--<img src="#{request.contextPath}/icons/cms-editor/table-add-column-before.svg" />-->
<librecms:remixSvgIcon icon="ri-insert-column-left" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-insert-table-column-after" class="btn btn-outline-dark tiptap-insert-table-column-after"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_column_after']}" title="#{CmsAdminMessage['cms_editor.buttons.insert_table_column_after']}"
type="button" type="button"
> >
<img src="#{request.contextPath}/icons/cms-editor/table-add-column-after.svg" /> <!--<img src="#{request.contextPath}/icons/cms-editor/table-add-column-after.svg" />-->
<librecms:remixSvgIcon icon="ri-insert-column-right" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-remove-table-column" class="btn btn-outline-dark tiptap-remove-table-column"
title="#{CmsAdminMessage['cms_editor.buttons.remove_table_column']}" title="#{CmsAdminMessage['cms_editor.buttons.remove_table_column']}"
type="button" type="button"
> >
<img src="#{request.contextPath}/icons/cms-editor/table-remove-column.svg" /> <!--<img src="#{request.contextPath}/icons/cms-editor/table-remove-column.svg" />-->
<librecms:remixSvgIcon icon="ri-remove-column" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-toggle-table-header-row" class="btn btn-outline-dark tiptap-toggle-table-header-row"
@ -614,13 +634,15 @@
class="btn btn-outline-dark tiptap-merge-table-cells" class="btn btn-outline-dark tiptap-merge-table-cells"
title="#{CmsAdminMessage['cms_editor.buttons.merge-table-cells']}" title="#{CmsAdminMessage['cms_editor.buttons.merge-table-cells']}"
type="button"> type="button">
<img src="#{request.contextPath}/icons/cms-editor/table-merge-cells.svg" /> <!--<img src="#{request.contextPath}/icons/cms-editor/table-merge-cells.svg" />-->
<librecms:remixSvgIcon icon="ri-merge-cells-horizontal" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-split-table-cell" class="btn btn-outline-dark tiptap-split-table-cell"
title="#{CmsAdminMessage['cms_editor.buttons.split-table-cell']}" title="#{CmsAdminMessage['cms_editor.buttons.split-table-cell']}"
type="button"> type="button">
<img src="#{request.contextPath}/icons/cms-editor/table-split-cells.svg" /> <!--<img src="#{request.contextPath}/icons/cms-editor/table-split-cells.svg" />-->
<librecms:remixSvgIcon icon="ri-split-cells-horizontal" />
</button> </button>
</div> </div>
<div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-media"> <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-media">
@ -628,7 +650,8 @@
class="btn btn-outline-dark tiptap-insert-image" class="btn btn-outline-dark tiptap-insert-image"
title="#{CmsAdminMessage['cms_editor.buttons.media.insert_image']}" title="#{CmsAdminMessage['cms_editor.buttons.media.insert_image']}"
type="button"> type="button">
<bootstrap:svgIcon icon="image" /> <!--<bootstrap:svgIcon icon="image" />-->
<librecms:remixSvgIcon icon="ri-image" />
</button> </button>
</div> </div>
</div> </div>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:xlink="http://www.w3.org/1999/xlink">
<cc:interface shortDescription="Component for inserting Remix icons">
<cc:attribute name="icon"
required="true"
shortDescription="The name of the Icon to insert" />
<cc:attribute name="iconClass"
required="false"
default=""
shortDescription="Additional classes to apply to the SVG icon." />
</cc:interface>
<cc:implementation>
<svg class="bi #{cc.attrs.iconClass}"
width="1em"
height="1em"
fill="currentColor">
<use xlink:href="#{request.contextPath}/assets/remixicon/remixicon.symbol.svg##{cc.attrs.icon}" />
</svg>
</cc:implementation>
</html>

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 877 KiB