From 11834331b4c99753d0298818dfa45248af4b416c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= Date: Fri, 8 Nov 2024 11:31:58 +0100 Subject: [PATCH] Fix bugs with RTE tables --- .../compose/src/views/Admin/Pages/Builder.vue | 4 +- client/web/reporter/src/components/faIcons.js | 2 + .../src/components/Configurator/Delay.vue | 1 - .../src/components/Configurator/Error.vue | 2 - .../components/Configurator/Expressions.vue | 1 - .../src/components/Configurator/Function.vue | 2 +- .../src/components/Configurator/Gateway.vue | 1 - .../src/components/ExpressionEditor.vue | 7 +- .../src/components/ExpressionTable.vue | 1 - .../src/components/WorkflowEditor.vue | 2 +- client/web/workflow/src/components/faIcons.js | 2 + .../components/input/CRichTextInput/index.vue | 73 ------------------ .../input/CRichTextInput/lib/formats.js | 26 ++++--- .../reporter/Viewers/CReportText.vue | 2 +- .../src/scss/main/18201141_custom_webapp.scss | 75 +++++++++++++++++++ 15 files changed, 104 insertions(+), 97 deletions(-) diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue index 1b5090605..41c4236c9 100644 --- a/client/web/compose/src/views/Admin/Pages/Builder.vue +++ b/client/web/compose/src/views/Admin/Pages/Builder.vue @@ -192,7 +192,7 @@ :cancel-title="$t('block.general.label.cancel')" size="xl" :visible="showCreator" - body-class="p-0 border-top-0" + body-class="p-0 border-top-0 position-static" header-class="p-3 pb-0 border-bottom-0" @ok="updateBlocks()" @hide="editor = undefined" @@ -226,7 +226,7 @@ scrollable size="xl" :visible="showEditor" - body-class="p-0 border-top-0" + body-class="p-0 border-top-0 position-static" footer-class="d-flex justify-content-between" header-class="p-3 pb-0 border-bottom-0" @hide="editor = undefined" diff --git a/client/web/reporter/src/components/faIcons.js b/client/web/reporter/src/components/faIcons.js index 573150e41..4a6df0eaf 100644 --- a/client/web/reporter/src/components/faIcons.js +++ b/client/web/reporter/src/components/faIcons.js @@ -50,6 +50,7 @@ import { faTools, faClone, faDownload, + faTable, } from '@fortawesome/free-solid-svg-icons' import { @@ -116,4 +117,5 @@ library.add( faTools, faClone, faDownload, + faTable, ) diff --git a/client/web/workflow/src/components/Configurator/Delay.vue b/client/web/workflow/src/components/Configurator/Delay.vue index 32e0e0706..3c59c879b 100644 --- a/client/web/workflow/src/components/Configurator/Delay.vue +++ b/client/web/workflow/src/components/Configurator/Delay.vue @@ -23,7 +23,6 @@ > @@ -168,7 +169,6 @@ ' } else { - label = cell.value + label = cell.value ? `
${cell.value}
` : '' } } diff --git a/client/web/workflow/src/components/faIcons.js b/client/web/workflow/src/components/faIcons.js index 81f95bd5d..75adc946d 100644 --- a/client/web/workflow/src/components/faIcons.js +++ b/client/web/workflow/src/components/faIcons.js @@ -47,6 +47,7 @@ import { faRemoveFormat, faParagraph, faTasks, + faTable, } from '@fortawesome/free-solid-svg-icons' import { @@ -108,4 +109,5 @@ library.add( faRemoveFormat, faParagraph, faTasks, + faTable, ) diff --git a/lib/vue/src/components/input/CRichTextInput/index.vue b/lib/vue/src/components/input/CRichTextInput/index.vue index 4c8c28381..94d023b43 100644 --- a/lib/vue/src/components/input/CRichTextInput/index.vue +++ b/lib/vue/src/components/input/CRichTextInput/index.vue @@ -127,76 +127,3 @@ export default { }, } - - diff --git a/lib/vue/src/components/input/CRichTextInput/lib/formats.js b/lib/vue/src/components/input/CRichTextInput/lib/formats.js index f14d3184e..738aec644 100644 --- a/lib/vue/src/components/input/CRichTextInput/lib/formats.js +++ b/lib/vue/src/components/input/CRichTextInput/lib/formats.js @@ -96,18 +96,20 @@ export const getToolbar = () => [ nodeAttr: true, component: 'Table', variants: [ - { variant: 'insert', icon: '', label: 'Insert Table', type: 'createTable', attrs: {rowsCount: 3, colsCount: 3, withHeaderRow: true } }, - { variant: 'splitCell', icon: '', label: 'Split Cell', type: 'splitCell', }, - { variant: 'mergeCells', icon: '', label: 'Merge Cells', type: 'mergeCells', }, - { variant: 'deleteColumn', icon: '', label: 'Delete Column', type: 'deleteColumn', }, - { variant: 'insertRowBefore', icon: '', label: 'Add Row Before', type: 'addRowBefore', }, - { variant: 'insertColumnAfter', icon: '', label: 'Insert Column After', type: 'addColumnAfter', }, - { variant: 'insertHeaderRow', icon: '', label: 'Insert Header Row', type: 'toggleHeaderRow', }, - { variant: 'insertHeaderCell', icon: '', label: 'Insert Header Cell', type: 'toggleHeaderCell', }, - { variant: 'insertColumnBefore', icon: '', label: 'Insert Column Before', type: 'addColumnBefore', }, - { variant: 'insertHeaderColumn', icon: '', label: 'Insert Header Column', type: 'toggleHeaderColumn', }, - { variant: 'deleteTable', icon: '', label: 'Delete Table', type: 'deleteTable', }, - ] + { label: 'Insert Table', type: 'createTable', attrs: { rowsCount: 3, colsCount: 3, withHeaderRow: true } }, + { label: 'Insert Column Before', type: 'addColumnBefore' }, + { label: 'Insert Column After', type: 'addColumnAfter' }, + { label: 'Delete Column', type: 'deleteColumn' }, + { label: 'Add Row Before', type: 'addRowBefore' }, + { label: 'Add Row After', type: 'addRowAfter' }, + { label: 'Delete Row', type: 'deleteRow' }, + { label: 'Merge Cells', type: 'mergeCells' }, + { label: 'Split Cell', type: 'splitCell' }, + { label: 'Toggle Header Row', type: 'toggleHeaderRow' }, + { label: 'Toggle Header Cell', type: 'toggleHeaderCell' }, + { label: 'Toggle Header Column', type: 'toggleHeaderColumn' }, + { label: 'Delete Table', type: 'deleteTable' }, + ], }, { type: 'link', mark: true, component: 'Link', icon: 'link', attrs: { href: null } }, diff --git a/lib/vue/src/components/reporter/Viewers/CReportText.vue b/lib/vue/src/components/reporter/Viewers/CReportText.vue index d0bbcd74e..ed7b4c056 100644 --- a/lib/vue/src/components/reporter/Viewers/CReportText.vue +++ b/lib/vue/src/components/reporter/Viewers/CReportText.vue @@ -1,7 +1,7 @@ diff --git a/server/assets/src/scss/main/18201141_custom_webapp.scss b/server/assets/src/scss/main/18201141_custom_webapp.scss index 44ab056e1..0652b1118 100644 --- a/server/assets/src/scss/main/18201141_custom_webapp.scss +++ b/server/assets/src/scss/main/18201141_custom_webapp.scss @@ -313,3 +313,78 @@ fieldset.required { width: 100%; } } + + +// Rich text editor stuff +/* Basic editor styles */ +.rt-content { + min-width: 12rem; + position: static; +} + +.rt-content :first-child { + margin-top: 0; +} + +/* Table-specific styling */ +.rt-content table { + white-space: normal !important; + border-collapse: collapse; + margin: 0; + overflow: hidden; + table-layout: fixed; + width: 100%; +} + +.rt-content td, +.rt-content th { + border: 1px solid var(--extra-light); + box-sizing: border-box; + min-width: 1em; + padding: 6px 8px; + position: relative; + vertical-align: top; +} + +.rt-content td > *, +.rt-content th > * { + margin-bottom: 0; +} + +.rt-content th { + background-color: var(--extra-light); + font-weight: bold; + text-align: left; +} + +.rt-content .selectedCell::after { + background: var(--light); + opacity: 0.8; + content: ""; + left: 0; + right: 0; + top: 0; + bottom: 0; + pointer-events: none; + position: absolute; + z-index: 2; +} + +.rt-content .column-resize-handle { + background-color: var(--primary); + bottom: -2px; + pointer-events: none; + position: absolute; + right: -2px; + top: 0; + width: 4px; +} + +.rt-content .tableWrapper { + overflow-x: auto; +} + +.rt-content .resize-cursor { + cursor: ew-resize; + cursor: col-resize; +} \ No newline at end of file