From ce1700b2b88004a8ff8751190f0beaab23034e09 Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Tue, 7 Sep 2021 20:20:17 +0200
Subject: [PATCH] Icons for table editing

---
 .../components/librecms/cmsEditor.xhtml       | 22 +++---
 .../icons/cms-editor/table-merge-cells.svg    | 46 +++++++++++++
 .../icons/cms-editor/table-split-cells.svg    | 54 +++++++++++++++
 .../cms-editor/table-toggle-header-column.svg | 63 +++++++++++++++++
 .../cms-editor/table-toggle-header-row.svg    | 67 +++++++++++++++++++
 .../main/resources/icons/cms-editor/table.svg | 39 +++++++++++
 .../main/scss/content-sections/cms-admin.scss |  8 +++
 7 files changed, 288 insertions(+), 11 deletions(-)
 create mode 100644 ccm-cms/src/main/resources/icons/cms-editor/table-merge-cells.svg
 create mode 100644 ccm-cms/src/main/resources/icons/cms-editor/table-split-cells.svg
 create mode 100644 ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-column.svg
 create mode 100644 ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-row.svg
 create mode 100644 ccm-cms/src/main/resources/icons/cms-editor/table.svg

diff --git a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
index cc872690d..7c799ffe8 100644
--- a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
+++ b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
@@ -376,8 +376,8 @@
                 data-locale="#{cc.attrs.selectedLocale}"
                 data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
             >
-                <div class="cms-tiptap-editor-buttons d-flex mb-1">
-                    <div class="px-2 cms-tiptap-editor-textformatting">
+                <div class="cms-tiptap-editor-buttons mb-1">
+                    <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-textformatting">
                         <button
                             class="btn btn-outline-dark tiptap-emph"
                             title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
@@ -421,7 +421,7 @@
                             <span aria-hidden="true">x<sup>n</sup></span>
                         </button>
                     </div>
-                    <div class="px-2 cms-tiptap-editor-headings">
+                    <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-headings">
                         <ui:repeat begin="1" end="6" var="level">
                             <button
                                 class="btn btn-outline-dark tiptap-h#{level}"
@@ -432,7 +432,7 @@
                             </button>
                         </ui:repeat>
                     </div>
-                    <div class="px-2 cms-tiptap-editor-paragraphs">
+                    <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-paragraphs">
                         <button
                             class="btn btn-outline-dark tiptap-paragraph"
                             title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
@@ -455,7 +455,7 @@
                             <bootstrap:svgIcon icon="code-square" />
                         </button>
                     </div>
-                    <div class="px-2 cms-tiptap-editor-lists">
+                    <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-lists">
                         <button
                             class="btn btn-outline-dark tiptap-ul"
                             title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
@@ -471,7 +471,7 @@
                             <bootstrap:svgIcon icon="list-ol" />
                         </button>
                     </div>
-                    <div class="px-2 cms-tiptap-editor-table">
+                    <div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-table">
                         <button
                             class="btn btn-outline-dark tiptap-insert-table"
                             data-target="#insert-table-dialog"
@@ -600,27 +600,27 @@
                         </button>
                         <button 
                             class="btn btn-outline-dark tiptap-toggle-table-header-row"
-                            title="#{CmsAdminMessage['cms_editor.buttons.toggle_header_rowy']}"
+                            title="#{CmsAdminMessage['cms_editor.buttons.toggle_header_row']}"
                             type="button">
-                            Toggle Header row
+                            <img src="#{request.contextPath}/icons/cms-editor/table-toggle-header-row.svg" />
                         </button>
                         <button 
                             class="btn btn-outline-dark tiptap-toggle-table-header-column"
                             title="#{CmsAdminMessage['cms_editor.buttons.toggle_header_column']}"
                             type="button">
-                            Toggle Header column
+                            <img src="#{request.contextPath}/icons/cms-editor/table-toggle-header-column.svg" />
                         </button>
                         <button 
                             class="btn btn-outline-dark tiptap-merge-table-cells"
                             title="#{CmsAdminMessage['cms_editor.buttons.merge-table-cells']}"
                             type="button">
-                            Merge cells
+                            <img src="#{request.contextPath}/icons/cms-editor/table-merge-cells.svg" />
                         </button>
                         <button 
                             class="btn btn-outline-dark tiptap-split-table-cell"
                             title="#{CmsAdminMessage['cms_editor.buttons.split-table-cell']}"
                             type="button">
-                            Split cell
+                            <img src="#{request.contextPath}/icons/cms-editor/table-split-cells.svg" />
                         </button>
                     </div>
                 </div>
diff --git a/ccm-cms/src/main/resources/icons/cms-editor/table-merge-cells.svg b/ccm-cms/src/main/resources/icons/cms-editor/table-merge-cells.svg
new file mode 100644
index 000000000..ef63a8577
--- /dev/null
+++ b/ccm-cms/src/main/resources/icons/cms-editor/table-merge-cells.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   fill="currentColor"
+   class="bi bi-table"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg542"
+   sodipodi:docname="table-merge-cells.svg"
+   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs546" />
+  <sodipodi:namedview
+     id="namedview544"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="41.25"
+     inkscape:cx="7.9878788"
+     inkscape:cy="8"
+     inkscape:window-width="1920"
+     inkscape:window-height="1051"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg542" />
+  <path
+     d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
+     id="path540" />
+  <rect
+     style="color:#000000;overflow:visible;fill:#ffffff;stroke:#000000;stroke-width:1.00793px;-inkscape-stroke:none;stop-color:#000000"
+     id="rect2023"
+     width="15.050126"
+     height="4.1242051"
+     x="0.49277797"
+     y="7.3820372" />
+</svg>
diff --git a/ccm-cms/src/main/resources/icons/cms-editor/table-split-cells.svg b/ccm-cms/src/main/resources/icons/cms-editor/table-split-cells.svg
new file mode 100644
index 000000000..33d56e79e
--- /dev/null
+++ b/ccm-cms/src/main/resources/icons/cms-editor/table-split-cells.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   fill="currentColor"
+   class="bi bi-table"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg542"
+   sodipodi:docname="table-split-cells.svg"
+   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs546" />
+  <sodipodi:namedview
+     id="namedview544"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="41.25"
+     inkscape:cx="11.781818"
+     inkscape:cy="8"
+     inkscape:window-width="1920"
+     inkscape:window-height="1051"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg542" />
+  <path
+     d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
+     id="path540" />
+  <rect
+     style="color:#000000;overflow:visible;fill:#ffffff;stroke:#000000;stroke-width:1.00793px;-inkscape-stroke:none;stop-color:#000000"
+     id="rect2023"
+     width="15.050126"
+     height="4.1242051"
+     x="0.49277797"
+     y="7.3820372" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:1,1;stroke-dashoffset:0"
+     d="m 5.4525568,7.3183091 0.027427,4.2193849"
+     id="path2164" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1, 1;stroke-dashoffset:0;stroke-opacity:1"
+     d="m 10.488376,7.3263442 0.02743,4.2193848"
+     id="path2164-2" />
+</svg>
diff --git a/ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-column.svg b/ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-column.svg
new file mode 100644
index 000000000..2210eced8
--- /dev/null
+++ b/ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-column.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   fill="currentColor"
+   class="bi bi-table"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg542"
+   sodipodi:docname="table-toggle-header-column.svg"
+   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs546" />
+  <sodipodi:namedview
+     id="namedview544"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="41.25"
+     inkscape:cx="7.9878788"
+     inkscape:cy="7.9757576"
+     inkscape:window-width="1920"
+     inkscape:window-height="1051"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg542" />
+  <path
+     d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
+     id="path540" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.633px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 1,4 v 8"
+     id="path150" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.91486px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 5,4 V 15"
+     id="path150-3" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.534522px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 1,7 H 5"
+     id="path400" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.534522px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 1,8 H 5"
+     id="path400-6" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.534522px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 1,11 H 5"
+     id="path400-6-2" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.534522px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 1,12 H 5"
+     id="path400-6-2-1" />
+</svg>
diff --git a/ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-row.svg b/ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-row.svg
new file mode 100644
index 000000000..79f83c97a
--- /dev/null
+++ b/ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-row.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   fill="currentColor"
+   class="bi bi-table"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="table-toggle-header-row.svg"
+   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     id="namedview13"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="51"
+     inkscape:cx="8"
+     inkscape:cy="7.9803922"
+     inkscape:window-width="1920"
+     inkscape:window-height="1051"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <path
+     d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
+     id="path9" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.10121px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 1,4 V 7.6379598"
+     id="path150" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.10121px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 5,4 V 7.6379598"
+     id="path150-3" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.10121px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 10,4 V 7.6379598"
+     id="path150-3-7" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.10121px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 11,4 V 7.6379598"
+     id="path150-3-7-5" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.10121px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 15,4 V 7.6379598"
+     id="path150-3-7-5-3" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.10121px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 6,4 V 7.6379598"
+     id="path150-3-6" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 1,7 H 15"
+     id="path400" />
+</svg>
diff --git a/ccm-cms/src/main/resources/icons/cms-editor/table.svg b/ccm-cms/src/main/resources/icons/cms-editor/table.svg
new file mode 100644
index 000000000..4f2b93b67
--- /dev/null
+++ b/ccm-cms/src/main/resources/icons/cms-editor/table.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   fill="currentColor"
+   class="bi bi-table"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg542"
+   sodipodi:docname="table.svg"
+   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs546" />
+  <sodipodi:namedview
+     id="namedview544"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="41.25"
+     inkscape:cx="7.9878788"
+     inkscape:cy="8"
+     inkscape:window-width="1920"
+     inkscape:window-height="1051"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg542" />
+  <path
+     d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
+     id="path540" />
+</svg>
diff --git a/ccm-cms/src/main/scss/content-sections/cms-admin.scss b/ccm-cms/src/main/scss/content-sections/cms-admin.scss
index 87f2e61f6..5f211c2bb 100644
--- a/ccm-cms/src/main/scss/content-sections/cms-admin.scss
+++ b/ccm-cms/src/main/scss/content-sections/cms-admin.scss
@@ -23,5 +23,13 @@
         td, th, tr {
             border: 1px solid #000;
         }
+
+        td, th {
+            min-width: 150px;
+        }
+    }
+
+    .cms-tiptap-editor-button-row {
+        display: inline-block;
     }
 }