DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Adjust RTE table styles

Browse Source
This commit is contained in:
Jože Fortun 2024-09-25 11:37:19 +02:00
parent 69494a9834
commit 89cde82a26
4 changed files with 105 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
client/web/compose/src/themes/corteza-base/custom.scss
View File

@ -43,70 +43,3 @@
padding-bottom: 0px !important;
}
}
/* Basic editor styles */
.editor__content :first-child {
margin-top: 0;
}
/* Table-specific styling */
.editor__content table {
border-collapse: collapse;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
.editor__content td,
.editor__content th {
border: 1px solid var(--gray);
box-sizing: border-box;
min-width: 1em;
padding: 6px 8px;
position: relative;
vertical-align: top;
}
.editor__content td > *,
.editor__content th > * {
margin-bottom: 0;
}
.editor__content th {
background-color: var(--gray-dark);
font-weight: bold;
text-align: left;
}
.editor__content .selectedCell::after {
background: var(--gray-dark);
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
.editor__content .column-resize-handle {
background-color: var(--purple);
bottom: -2px;
pointer-events: none;
position: absolute;
right: -2px;
top: 0;
width: 4px;
}
.editor__content .tableWrapper {
margin: 1.5rem 0;
overflow-x: auto;
}
.editor__content .resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}

14
lib/vue/src/components/input/CRichTextInput/RToolbar/TNodeAttr/Alignment.vue
View File

@ -2,13 +2,15 @@
<b-dropdown
menu-class="text-center"
variant="link"
boundary="window"
>
<template slot="button-content">
<span class="text-dark font-weight-bold">
<span :class="rootActiveClasses()">
<font-awesome-icon
v-if="format.icon"
:icon="format.icon" />
:icon="format.icon"
/>
<span v-else>
{{ format.label }}
</span>
@ -19,12 +21,12 @@
<b-dropdown-item
v-for="v of format.variants"
:key="v.variant"
@click="dispatchTransaction(v)">
@click="dispatchTransaction(v)"
>
<b-button
variant="link"
class="text-dark font-weight-bold">
class="text-dark font-weight-bold"
>
<span :class="activeClasses(v.attrs)">
<font-awesome-icon
v-if="format.icon"
@ -47,7 +49,7 @@ import { nodeTypes } from '../../lib/formats'
* Component is used to display node alignment formatting
*/
export default {
name: 't-nattr-alignment',
name: 'TNattrAlignment',
extends: base,
props: {

12
lib/vue/src/components/input/CRichTextInput/RToolbar/TNodeAttr/Table.vue
View File

@ -1,13 +1,16 @@
<template>
<b-dropdown
menu-class="text-center"
variant="link">
variant="link"
boundary="window"
>
<template slot="button-content">
<span class="text-dark font-weight-bold">
<span :class="rootActiveClasses()">
<font-awesome-icon
v-if="format.icon"
:icon="format.icon" />
:icon="format.icon"
/>
<span v-else>
{{ format.label }}
</span>
@ -20,8 +23,7 @@
:key="v.variant"
@click="emitClick(v)"
>
{{ v.label }}
{{ v.label }}
</b-dropdown-item>
</b-dropdown>
</template>
@ -34,7 +36,7 @@ import { nodeTypes } from '../../lib/formats'
* Component is used to display node alignment formatting
*/
export default {
name: 't-nattr-table',
name: 'TNattrTable',
extends: base,
props: {

106
lib/vue/src/components/input/CRichTextInput/index.vue
View File

@ -1,22 +1,24 @@
<template>
<b-card no-body class="editor rt-content">
<b-card
no-body
class="editor rt-content"
>
<template v-if="editor">
<b-card-header header-class="p-0 border-bottom">
<editor-menu-bar
:editor="editor"
v-slot="{ commands, isActive, getMarkAttrs, getNodeAttrs }"
>
<r-toolbar
:editor="editor"
:formats="toolbar"
:commands="commands"
:is-active="isActive"
:get-mark-attrs="getMarkAttrs"
:get-node-attrs="getNodeAttrs"
:labels="labels"
:current-value="currentValue"
/>
>
<r-toolbar
:editor="editor"
:formats="toolbar"
:commands="commands"
:is-active="isActive"
:get-mark-attrs="getMarkAttrs"
:get-node-attrs="getNodeAttrs"
:labels="labels"
:current-value="currentValue"
/>
</editor-menu-bar>
</b-card-header>
@ -25,7 +27,6 @@
:editor="editor"
class="editor__content"
/>
</b-card-body>
</template>
</b-card>
@ -54,8 +55,8 @@ export default {
labels: {
type: Object,
default: () => ({})
}
default: () => ({}),
},
},
data () {
@ -126,3 +127,76 @@ 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>