DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Fix bugs with RTE tables

Browse Source
This commit is contained in:
Jože Fortun
2024-11-08 11:31:58 +01:00
parent a49bedb13c
commit 11834331b4
15 changed files with 104 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/compose/src/views/Admin/Pages/Builder.vue
+2 -2
View File
@@ -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"
client/web/reporter/src/components/faIcons.js
+2
View File
@@ -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,
)
client/web/workflow/src/components/Configurator/Delay.vue
-1
View File
@@ -23,7 +23,6 @@
>
<expression-editor
v-model="item.config.arguments[0].expr"
lang="javascript"
font-size="18px"
show-line-numbers
@input="valueChanged"
client/web/workflow/src/components/Configurator/Error.vue
-2
View File
@@ -22,7 +22,6 @@
>
<expression-editor
v-model="item.config.arguments[0].expr"
lang="javascript"
font-size="18px"
show-line-numbers
@open="openInEditor"
@@ -46,7 +45,6 @@
>
<expression-editor
v-model="expressionEditor.currentExpression"
lang="javascript"
height="500"
font-size="18px"
show-line-numbers
client/web/workflow/src/components/Configurator/Expressions.vue
-1
View File
@@ -65,7 +65,6 @@
<expression-editor
v-model="currentExpressionValue"
height="500"
lang="javascript"
font-size="18px"
show-line-numbers
:border="false"
client/web/workflow/src/components/Configurator/Function.vue
+1 -1
View File
@@ -160,6 +160,7 @@
<expression-editor
v-else
v-model="a.value"
:auto-complete="false"
@open="openInEditor(index)"
@input="$root.$emit('change-detected')"
/>
@@ -168,7 +169,6 @@
<expression-editor
v-else-if="a.valueType === 'expr'"
v-model="a.expr"
lang="javascript"
show-line-numbers
@open="openInEditor(index)"
@input="$root.$emit('change-detected')"
client/web/workflow/src/components/Configurator/Gateway.vue
-1
View File
@@ -35,7 +35,6 @@
>
<expression-editor
v-model="edge.expr"
lang="javascript"
height="100"
show-line-numbers
:show-popout="false"
client/web/workflow/src/components/ExpressionEditor.vue
+6 -1
View File
@@ -9,7 +9,7 @@
:show-line-numbers="showLineNumbers"
:font-size="fontSize"
:show-popout="showPopout"
auto-complete
:auto-complete="autoComplete"
:border="border"
:auto-complete-suggestions="expressionAutoCompleteValues"
v-on="$listeners"
@@ -63,6 +63,11 @@ export default {
type: Boolean,
default: true,
},
autoComplete: {
type: Boolean,
default: true,
},
},
data () {
client/web/workflow/src/components/ExpressionTable.vue
-1
View File
@@ -99,7 +99,6 @@
>
<expression-editor
v-model="item[valueField]"
lang="javascript"
show-line-numbers
@open="$emit('open-editor', index)"
@input="$root.$emit('change-detected')"
client/web/workflow/src/components/WorkflowEditor.vue
+1 -1
View File
@@ -1067,7 +1067,7 @@ export default {
values +
'</div>'
} else {
label = cell.value
label = cell.value ? `<div class="rt-content text-wrap">${cell.value}</div>` : ''
}
}
client/web/workflow/src/components/faIcons.js
+2
View File
@@ -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,
)
lib/vue/src/components/input/CRichTextInput/index.vue
-73
View File
@@ -127,76 +127,3 @@ export default {
},
}
</script>
<style>
/* Basic editor styles */
.rt-content {
min-width: 12rem;
position: static;
}
.rt-content :first-child {
margin-top: 0;
}
/* Table-specific styling */
.rt-content table {
border-collapse: collapse;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
.rt-content td,
.rt-content th {
border: 1px solid var(--gray);
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(--gray-dark);
font-weight: bold;
text-align: left;
}
.rt-content .selectedCell::after {
background: var(--gray-dark);
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(--purple);
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;
}
</style>
lib/vue/src/components/input/CRichTextInput/lib/formats.js
+14 -12
View File
@@ -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 } },
lib/vue/src/components/reporter/Viewers/CReportText.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div
v-if="options"
class="rt-content px-3 py-2"
class="rt-content p-3"
v-html="options.value"
/>
</template>
server/assets/src/scss/main/18201141_custom_webapp.scss
+75
View File
@@ -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;
}