LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

Icons for table editing

pull/10/head
Jens Pelzetter 2021-09-07 20:20:17 +02:00
parent 9032adc528
commit ce1700b2b8
7 changed files with 288 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
View File

@ -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>

46
ccm-cms/src/main/resources/icons/cms-editor/table-merge-cells.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

54
ccm-cms/src/main/resources/icons/cms-editor/table-split-cells.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

63
ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-column.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

67
ccm-cms/src/main/resources/icons/cms-editor/table-toggle-header-row.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

39
ccm-cms/src/main/resources/icons/cms-editor/table.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

8
ccm-cms/src/main/scss/content-sections/cms-admin.scss
View File

@ -23,5 +23,13 @@
td, th, tr {
border: 1px solid #000;
}
td, th {
min-width: 150px;
}
}
.cms-tiptap-editor-button-row {
display: inline-block;
}
}