archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-03 04:35:31 +00:00
Code Issues Projects Releases Wiki Activity

Add table styles

Browse source
This commit is contained in:
Jérémie Pardou 2024-07-26 10:08:59 +00:00
parent 280a97104a
commit a393091f47
21 changed files with 1069 additions and 364 deletions
backend
src/baserow/contrib/builder
apps.py
elements
element_types.py
migrations
0032_tablethemeconfigblock.py
theme
models.pytheme_config_block_types.py
tests/baserow/contrib/builder
test_builder_application_type.py
changelog/entries/unreleased/feature
2803_builder_allow_to_style_the_table_element.json
web-frontend/modules
builder
components
elements/components
BaserowTable.vueTableElement.vue
forms/general
TableElementForm.vue
theme
InputThemeConfigBlock.vueTableThemeConfigBlock.vue
locales
en.json
plugin.jsthemeConfigBlockTypes.js
core
assets/scss/components/builder/elements
ab_components
ab_table.scssall.scss
baserow_table.scss
components
ColorInputGroup.vueColorPickerContext.vue
plugins
global.js

2
backend/src/baserow/contrib/builder/apps.py
View file

@ -246,6 +246,7 @@ class BuilderConfig(AppConfig):
InputThemeConfigBlockType,
LinkThemeConfigBlockType,
PageThemeConfigBlockType,
TableThemeConfigBlockType,
TypographyThemeConfigBlockType,
)
@ -256,6 +257,7 @@ class BuilderConfig(AppConfig):
theme_config_block_registry.register(ImageThemeConfigBlockType())
theme_config_block_registry.register(PageThemeConfigBlockType())
theme_config_block_registry.register(InputThemeConfigBlockType())
theme_config_block_registry.register(TableThemeConfigBlockType())
from .workflow_actions.registries import builder_workflow_action_type_registry
from .workflow_actions.workflow_action_types import (

10
backend/src/baserow/contrib/builder/elements/element_types.py
View file

@ -46,6 +46,9 @@ from baserow.contrib.builder.elements.registries import (
)
from baserow.contrib.builder.pages.handler import PageHandler
from baserow.contrib.builder.pages.models import Page
from baserow.contrib.builder.theme.theme_config_block_types import (
TableThemeConfigBlockType,
)
from baserow.contrib.builder.types import ElementDict
from baserow.core.formula import resolve_formula
from baserow.core.formula.registries import formula_runtime_function_registry
@ -237,8 +240,11 @@ class TableElementType(CollectionElementWithFieldsTypeMixin, ElementType):
),
"styles": DynamicConfigBlockSerializer(
required=False,
property_name="button",
theme_config_block_type_name=ButtonThemeConfigBlockType.type,
property_name=["button", "table"],
theme_config_block_type_name=[
ButtonThemeConfigBlockType.type,
TableThemeConfigBlockType.type,
],
serializer_kwargs={"required": False},
),
}

175
backend/src/baserow/contrib/builder/migrations/0032_tablethemeconfigblock.py Normal file
View file

@ -0,0 +1,175 @@
# Generated by Django 4.2.13 on 2024-07-25 15:37
import django.db.models.deletion
from django.db import migrations, models
import baserow.core.fields
class Migration(migrations.Migration):
dependencies = [
("builder", "0031_remove_buttonelement_alignment_and_more"),
]
operations = [
migrations.CreateModel(
name="TableThemeConfigBlock",
fields=[
(
"id",
models.AutoField(
auto_created=True,
primary_key=True,
serialize=False,
verbose_name="ID",
),
),
(
"table_border_color",
models.CharField(
blank=True,
default="#000000FF",
help_text="The color of the table border",
max_length=20,
),
),
(
"table_border_size",
models.SmallIntegerField(default=1, help_text="Table border size"),
),
(
"table_border_radius",
models.SmallIntegerField(
default=0, help_text="Table border radius"
),
),
(
"table_header_background_color",
models.CharField(
blank=True,
default="#edededff",
help_text="The background color of the table header cells",
max_length=20,
),
),
(
"table_header_text_color",
models.CharField(
blank=True,
default="#000000ff",
help_text="The text color of the table header cells",
max_length=20,
),
),
(
"table_header_font_size",
models.SmallIntegerField(
default=13, help_text="The font size of the header cells"
),
),
(
"table_header_font_family",
models.CharField(
default="inter",
help_text="The font family of the table header cells",
max_length=250,
),
),
(
"table_header_text_alignment",
models.CharField(
choices=[
("left", "Left"),
("center", "Center"),
("right", "Right"),
],
default="left",
max_length=10,
),
),
(
"table_cell_background_color",
models.CharField(
blank=True,
default="transparent",
help_text="The background color of the table cells",
max_length=20,
),
),
(
"table_cell_alternate_background_color",
models.CharField(
blank=True,
default="transparent",
help_text="The alternate background color of the table cells",
max_length=20,
),
),
(
"table_cell_alignment",
models.CharField(
choices=[
("left", "Left"),
("center", "Center"),
("right", "Right"),
],
default="left",
max_length=10,
),
),
(
"table_cell_vertical_padding",
models.SmallIntegerField(
default=10, help_text="Table cell vertical padding"
),
),
(
"table_cell_horizontal_padding",
models.SmallIntegerField(
default=20, help_text="Table cell horizontal padding"
),
),
(
"table_vertical_separator_color",
models.CharField(
blank=True,
default="#000000FF",
help_text="The color of the table vertical separator",
max_length=20,
),
),
(
"table_vertical_separator_size",
models.SmallIntegerField(
default=0, help_text="Table vertical separator size"
),
),
(
"table_horizontal_separator_color",
models.CharField(
blank=True,
default="#000000FF",
help_text="The color of the table horizontal separator",
max_length=20,
),
),
(
"table_horizontal_separator_size",
models.SmallIntegerField(
default=1, help_text="Table horizontal separator size"
),
),
(
"builder",
baserow.core.fields.AutoOneToOneField(
on_delete=django.db.models.deletion.CASCADE,
related_name="%(class)s",
to="builder.builder",
),
),
],
options={
"abstract": False,
},
),
]

95
backend/src/baserow/contrib/builder/theme/models.py
View file

@ -329,3 +329,98 @@ class InputThemeConfigBlock(ThemeConfigBlock):
input_horizontal_padding = models.SmallIntegerField(
default=12, help_text="Input horizontal padding"
)
class TableThemeConfigBlock(ThemeConfigBlock):
"""
Theme for tables.
"""
# Table styles
table_border_color = models.CharField(
max_length=20,
default="#000000FF",
blank=True,
help_text="The color of the table border",
)
table_border_size = models.SmallIntegerField(
default=1, help_text="Table border size"
)
table_border_radius = models.SmallIntegerField(
default=0, help_text="Table border radius"
)
# Header styles
table_header_background_color = models.CharField(
max_length=20,
default="#edededff",
blank=True,
help_text="The background color of the table header cells",
)
table_header_text_color = models.CharField(
max_length=20,
default="#000000ff",
blank=True,
help_text="The text color of the table header cells",
)
table_header_font_size = models.SmallIntegerField(
default=13,
help_text="The font size of the header cells",
)
table_header_font_family = models.CharField(
max_length=250,
default="inter",
help_text="The font family of the table header cells",
)
table_header_text_alignment = models.CharField(
choices=HorizontalAlignments.choices,
max_length=10,
default=HorizontalAlignments.LEFT,
)
# Cell styles
table_cell_background_color = models.CharField(
max_length=20,
default="transparent",
blank=True,
help_text="The background color of the table cells",
)
table_cell_alternate_background_color = models.CharField(
max_length=20,
default="transparent",
blank=True,
help_text="The alternate background color of the table cells",
)
table_cell_alignment = models.CharField(
choices=HorizontalAlignments.choices,
max_length=10,
default=HorizontalAlignments.LEFT,
)
table_cell_vertical_padding = models.SmallIntegerField(
default=10, help_text="Table cell vertical padding"
)
table_cell_horizontal_padding = models.SmallIntegerField(
default=20, help_text="Table cell horizontal padding"
)
# Separator styles
table_vertical_separator_color = models.CharField(
max_length=20,
default="#000000FF",
blank=True,
help_text="The color of the table vertical separator",
)
table_vertical_separator_size = models.SmallIntegerField(
default=0, help_text="Table vertical separator size"
)
table_horizontal_separator_color = models.CharField(
max_length=20,
default="#000000FF",
blank=True,
help_text="The color of the table horizontal separator",
)
table_horizontal_separator_size = models.SmallIntegerField(
default=1, help_text="Table horizontal separator size"
)

6
backend/src/baserow/contrib/builder/theme/theme_config_block_types.py
View file

@ -9,6 +9,7 @@ from .models import (
InputThemeConfigBlock,
LinkThemeConfigBlock,
PageThemeConfigBlock,
TableThemeConfigBlock,
ThemeConfigBlock,
TypographyThemeConfigBlock,
)
@ -153,3 +154,8 @@ class PageThemeConfigBlockType(ThemeConfigBlockType):
class InputThemeConfigBlockType(ThemeConfigBlockType):
type = "input"
model_class = InputThemeConfigBlock
class TableThemeConfigBlockType(ThemeConfigBlockType):
type = "table"
model_class = TableThemeConfigBlock

32
backend/tests/baserow/contrib/builder/test_builder_application_type.py
View file

@ -572,6 +572,23 @@ def test_builder_application_export(data_fixture):
"label_font_family": "inter",
"label_font_size": 13,
"label_text_color": "#070810FF",
"table_border_color": "#000000FF",
"table_border_radius": 0,
"table_border_size": 1,
"table_cell_alternate_background_color": "transparent",
"table_cell_background_color": "transparent",
"table_cell_horizontal_padding": 20,
"table_cell_alignment": "left",
"table_cell_vertical_padding": 10,
"table_header_background_color": "#edededff",
"table_header_font_family": "inter",
"table_header_font_size": 13,
"table_header_text_alignment": "left",
"table_header_text_color": "#000000ff",
"table_horizontal_separator_color": "#000000FF",
"table_horizontal_separator_size": 1,
"table_vertical_separator_color": "#000000FF",
"table_vertical_separator_size": 0,
},
"id": builder.id,
"name": builder.name,
@ -969,6 +986,21 @@ def test_builder_application_export(data_fixture):
"page_background_color": "#ffffffff",
"page_background_file_id": None,
"page_background_mode": "tile",
"table_border_size": 1,
"table_cell_alternate_background_color": "transparent",
"table_cell_background_color": "transparent",
"table_cell_horizontal_padding": 20,
"table_cell_alignment": "left",
"table_cell_vertical_padding": 10,
"table_header_background_color": "#edededff",
"table_header_font_family": "inter",
"table_header_font_size": 13,
"table_header_text_alignment": "left",
"table_header_text_color": "#000000ff",
"table_horizontal_separator_color": "#000000FF",
"table_horizontal_separator_size": 0,
"table_vertical_separator_color": "#000000FF",
"table_vertical_separator_size": 1,
},
"user_sources": [
{

7
changelog/entries/unreleased/feature/2803_builder_allow_to_style_the_table_element.json Normal file
View file

@ -0,0 +1,7 @@
{
"type": "feature",
"message": "[Builder] Allow to style the table element",
"issue_number": 2803,
"bullet_points": [],
"created_at": "2024-07-18"
}

15
web-frontend/modules/builder/components/elements/components/BaserowTable.vue
View file

@ -30,19 +30,22 @@
:field="field"
:row-index="index"
>
{{ value }}
{{ row[field.name] }}
</slot>
</td>
</tr>
</tbody>
</template>
<template v-else>
<tbody v-if="rows.length">
<template v-for="(row, rowIndex) in rows">
<template v-if="rows.length">
<tbody
v-for="(row, rowIndex) in rows"
:key="row.__id__"
class="baserow-table__row"
>
<tr
v-for="(field, fieldIndex) in fields"
:key="`${row.__id__}_${field.id}`"
class="baserow-table__row"
>
<th
class="baserow-table__header-cell"
@ -68,8 +71,8 @@
</slot>
</td>
</tr>
</template>
</tbody>
</tbody>
</template>
</template>
<tbody v-if="!rows.length">
<tr>

2
web-frontend/modules/builder/components/elements/components/TableElement.vue
View file

@ -4,6 +4,8 @@
:fields="element.fields"
:rows="rows"
:orientation="orientation"
class="ab-table"
:style="getStyleOverride('table')"
>
<template #cell-content="{ rowIndex, field, value }">
<component

6
web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
View file

@ -1,5 +1,11 @@
<template>
<form class="table-element-form" @submit.prevent @keydown.enter.prevent>
<CustomStyle
v-model="values.styles"
style-key="table"
:config-block-types="['table']"
:theme="builder.theme"
/>
<FormGroup
class="margin-bottom-2"
small-label

49
web-frontend/modules/builder/components/theme/InputThemeConfigBlock.vue
View file

@ -335,44 +335,17 @@ export default {
},
},
validations: {
values: {
label_font_size: {
required,
integer,
minValue: minValue(minMax.label_font_size.min),
maxValue: maxValue(minMax.label_font_size.max),
},
input_font_size: {
required,
integer,
minValue: minValue(minMax.input_font_size.min),
maxValue: maxValue(minMax.input_font_size.max),
},
input_border_radius: {
required,
integer,
minValue: minValue(minMax.input_border_radius.min),
maxValue: maxValue(minMax.input_border_radius.max),
},
input_border_size: {
required,
integer,
minValue: minValue(minMax.input_border_size.min),
maxValue: maxValue(minMax.input_border_size.max),
},
input_horizontal_padding: {
required,
integer,
minValue: minValue(minMax.input_horizontal_padding.min),
maxValue: maxValue(minMax.input_horizontal_padding.max),
},
input_vertical_padding: {
required,
integer,
minValue: minValue(minMax.input_vertical_padding.min),
maxValue: maxValue(minMax.input_vertical_padding.max),
},
},
values: Object.fromEntries(
Object.entries(minMax).map(([key, limits]) => [
key,
{
required,
integer,
minValue: minValue(limits.min),
maxValue: maxValue(limits.max),
},
])
),
},
}
</script>

432
web-frontend/modules/builder/components/theme/TableThemeConfigBlock.vue Normal file
View file

@ -0,0 +1,432 @@
<template>
<div>
<ThemeConfigBlockSection :title="$t('tableThemeConfigBlock.table')">
<template #default>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.borderSize')"
:error-message="getError('table_border_size')"
class="margin-bottom-2"
>
<PixelValueSelector v-model="values.table_border_size" />
<template #after-input>
<ResetButton
v-model="values.table_border_size"
:default-value="theme?.table_border_size"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
required
:label="$t('tableThemeConfigBlock.borderColor')"
class="margin-bottom-2"
>
<ColorInput
v-model="values.table_border_color"
:color-variables="colorVariables"
:default-value="theme?.table_border_color"
small
/>
<template #after-input>
<ResetButton
v-model="values.table_border_color"
:default-value="theme?.table_border_color"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.borderRadius')"
:error-message="getError('table_border_radius')"
class="margin-bottom-2"
>
<PixelValueSelector v-model="values.table_border_radius" />
<template #after-input>
<ResetButton
v-model="values.table_border_radius"
:default-value="theme?.table_border_radius"
/>
</template>
</FormGroup>
</template>
<template #preview>
<BaserowTable :fields="fields" :rows="rows" class="ab-table">
</BaserowTable>
</template>
</ThemeConfigBlockSection>
<ThemeConfigBlockSection :title="$t('tableThemeConfigBlock.header')">
<template #default>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.backgroundColor')"
class="margin-bottom-2"
>
<ColorInput
v-model="values.table_header_background_color"
:color-variables="colorVariables"
:default-value="theme?.table_header_background_color"
small
/>
<template #after-input>
<ResetButton
v-model="values.table_header_background_color"
:default-value="theme?.table_header_background_color"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.fontFamily')"
class="margin-bottom-2"
>
<FontFamilySelector v-model="values.table_header_font_family" />
<template #after-input>
<ResetButton
v-model="values.table_header_font_family"
:default-value="theme?.table_header_font_family"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.fontSize')"
:error-message="getError('table_header_font_size')"
class="margin-bottom-2"
>
<PixelValueSelector v-model="values.table_header_font_size" />
<template #after-input>
<ResetButton
v-model="values.table_header_font_size"
:default-value="theme?.table_header_font_size"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.textColor')"
class="margin-bottom-2"
>
<ColorInput
v-model="values.table_header_text_color"
:color-variables="colorVariables"
:default-value="theme?.table_header_text_color"
small
/>
<template #after-input>
<ResetButton
v-model="values.table_header_text_color"
:default-value="theme?.table_header_text_color"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
required
:label="$t('tableThemeConfigBlock.alignment')"
class="margin-bottom-2"
>
<HorizontalAlignmentsSelector
v-model="values.table_header_text_alignment"
/>
<template #after-input>
<ResetButton
v-model="values.table_header_text_alignment"
:default-value="theme?.table_header_text_alignment"
/>
</template>
</FormGroup>
</template>
<template #preview>
<BaserowTable :fields="fields" :rows="rows" class="ab-table">
</BaserowTable>
</template>
</ThemeConfigBlockSection>
<ThemeConfigBlockSection :title="$t('tableThemeConfigBlock.cells')">
<template #default>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.backgroundColor')"
class="margin-bottom-2"
>
<ColorInput
v-model="values.table_cell_background_color"
:color-variables="colorVariables"
:default-value="theme?.table_cell_background_color"
small
/>
<template #after-input>
<ResetButton
v-model="values.table_cell_background_color"
:default-value="theme?.table_cell_background_color"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.backgroundAlternateColor')"
class="margin-bottom-2"
>
<ColorInput
v-model="values.table_cell_alternate_background_color"
:color-variables="colorVariables"
:default-value="theme?.table_cell_alternate_background_color"
small
/>
<template #after-input>
<ResetButton
v-model="values.table_cell_alternate_background_color"
:default-value="theme?.table_cell_alternate_background_color"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
required
:label="$t('tableThemeConfigBlock.alignment')"
class="margin-bottom-2"
>
<HorizontalAlignmentsSelector v-model="values.table_cell_alignment" />
<template #after-input>
<ResetButton
v-model="values.table_cell_alignment"
:default-value="theme?.table_cell_alignment"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.padding')"
:error-message="getPaddingError()"
class="margin-bottom-2"
>
<PaddingSelector v-model="padding" />
<template #after-input>
<ResetButton
v-model="padding"
:default-value="
theme
? {
vertical: theme['table_cell_vertical_padding'],
horizontal: theme['table_cell_horizontal_padding'],
}
: undefined
"
/>
</template>
</FormGroup>
</template>
<template #preview>
<BaserowTable :fields="fields" :rows="rows" class="ab-table">
</BaserowTable>
</template>
</ThemeConfigBlockSection>
<ThemeConfigBlockSection :title="$t('tableThemeConfigBlock.separators')">
<template #default>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.horizontalSeparatorColor')"
class="margin-bottom-2"
>
<ColorInput
v-model="values.table_horizontal_separator_color"
:color-variables="colorVariables"
:default-value="theme?.table_horizontal_separator_color"
small
/>
<template #after-input>
<ResetButton
v-model="values.table_horizontal_separator_color"
:default-value="theme?.table_horizontal_separator_color"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.horizontalSeparatorSize')"
:error-message="getError('table_horizontal_separator_size')"
class="margin-bottom-2"
>
<PixelValueSelector
v-model="values.table_horizontal_separator_size"
/>
<template #after-input>
<ResetButton
v-model="values.table_horizontal_separator_size"
:default-value="theme?.table_horizontal_separator_size"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.verticalSeparatorColor')"
class="margin-bottom-2"
>
<ColorInput
v-model="values.table_vertical_separator_color"
:color-variables="colorVariables"
:default-value="theme?.table_vertical_separator_color"
small
/>
<template #after-input>
<ResetButton
v-model="values.table_vertical_separator_color"
:default-value="theme?.table_vertical_separator_color"
/>
</template>
</FormGroup>
<FormGroup
horizontal-narrow
small-label
:label="$t('tableThemeConfigBlock.verticalSeparatorSize')"
:error-message="getError('table_vertical_separator_size')"
class="margin-bottom-2"
>
<PixelValueSelector v-model="values.table_vertical_separator_size" />
<template #after-input>
<ResetButton
v-model="values.table_vertical_separator_size"
:default-value="theme?.table_vertical_separator_size"
/>
</template>
</FormGroup>
</template>
<template #preview>
<BaserowTable :fields="fields" :rows="rows" class="ab-table">
</BaserowTable>
</template>
</ThemeConfigBlockSection>
</div>
</template>
<script>
import themeConfigBlock from '@baserow/modules/builder/mixins/themeConfigBlock'
import ThemeConfigBlockSection from '@baserow/modules/builder/components/theme/ThemeConfigBlockSection'
import ResetButton from '@baserow/modules/builder/components/theme/ResetButton'
import HorizontalAlignmentsSelector from '@baserow/modules/builder/components/HorizontalAlignmentsSelector'
import FontFamilySelector from '@baserow/modules/builder/components/FontFamilySelector'
import PixelValueSelector from '@baserow/modules/builder/components/PixelValueSelector'
import PaddingSelector from '@baserow/modules/builder/components/PaddingSelector'
import { required, integer, minValue, maxValue } from 'vuelidate/lib/validators'
import BaserowTable from '@baserow/modules/builder/components/elements/components/BaserowTable'
const minMax = {
table_border_size: {
min: 0,
max: 30,
},
table_border_radius: {
min: 0,
max: 100,
},
table_header_font_size: {
min: 1,
max: 100,
},
table_cell_vertical_padding: {
min: 0,
max: 100,
},
table_cell_horizontal_padding: {
min: 0,
max: 100,
},
table_horizontal_separator_size: {
min: 0,
max: 100,
},
table_vertical_separator_size: {
min: 0,
max: 100,
},
}
export default {
name: 'ButtonThemeConfigBlock',
components: {
ThemeConfigBlockSection,
ResetButton,
BaserowTable,
HorizontalAlignmentsSelector,
FontFamilySelector,
PixelValueSelector,
PaddingSelector,
},
mixins: [themeConfigBlock],
data() {
return {
values: {},
fields: [
{ __id__: 1, id: 1, name: 'Header 1' },
{ __id__: 2, id: 2, name: 'Header 2' },
],
rows: [
{ 'Header 1': 'Row 1 cell 1', 'Header 2': 'Row 1 cell 2' },
{ 'Header 1': 'Row 2 cell 1', 'Header 2': 'Row 2 cell 2' },
],
}
},
computed: {
padding: {
get() {
return {
vertical: this.values.table_cell_vertical_padding,
horizontal: this.values.table_cell_horizontal_padding,
}
},
set(newValue) {
this.values.table_cell_vertical_padding = newValue.vertical
this.values.table_cell_horizontal_padding = newValue.horizontal
},
},
},
methods: {
isAllowedKey(key) {
return key.startsWith('table_')
},
getError(property) {
if (this.$v.values[property].$invalid) {
return this.$t('error.minMaxValueField', minMax[property])
}
return null
},
getPaddingError() {
return (
this.getError('table_cell_vertical_padding') ||
this.getError('table_cell_horizontal_padding')
)
},
},
validations: {
values: Object.fromEntries(
Object.entries(minMax).map(([key, limits]) => [
key,
{
required,
integer,
minValue: minValue(limits.min),
maxValue: maxValue(limits.max),
},
])
),
},
}
</script>

25
web-frontend/modules/builder/locales/en.json
View file

@ -379,7 +379,8 @@
"button": "Button",
"link": "Link",
"image": "Image",
"input": "Input"
"input": "Input",
"table": "Table"
},
"colorThemeConfigBlock": {
"primaryColor": "Primary",
@ -395,6 +396,7 @@
"backgroundMode": "Background mode"
},
"colorThemeConfigBlockType": {
"transparent": "Transparent",
"primary": "Primary",
"secondary": "Secondary",
"border": "Border",
@ -460,6 +462,27 @@
"imageConstraintContain": "Contain",
"imageConstraintContainDisabled": "Unavailable with a max height."
},
"tableThemeConfigBlock": {
"borderColor": "Border color",
"backgroundAlternateColor": "Alternate color",
"backgroundColor": "Background color",
"textColor": "Text color",
"borderSize": "Border size",
"borderRadius": "Border radius",
"padding": "Padding",
"fontFamily": "Font",
"size": "Size",
"fontSize": "Font size",
"table": "Table",
"header": "Header",
"alignment": "Alignment",
"cells": "Cells",
"separators": "Separators",
"verticalSeparatorColor": "Vertical color",
"verticalSeparatorSize": "Vertical size",
"horizontalSeparatorColor": "Horizontal color",
"horizontalSeparatorSize": "Horizontal size"
},
"buttonElementForm": {
"valueLabel": "Button text",
"valuePlaceholder": "Enter text..."

5
web-frontend/modules/builder/plugin.js
View file

@ -93,6 +93,7 @@ import {
ImageThemeConfigBlockType,
PageThemeConfigBlockType,
InputThemeConfigBlockType,
TableThemeConfigBlockType,
} from '@baserow/modules/builder/themeConfigBlockTypes'
import {
CreateRowWorkflowActionType,
@ -297,6 +298,10 @@ export default (context) => {
'themeConfigBlock',
new InputThemeConfigBlockType(context)
)
app.$registry.register(
'themeConfigBlock',
new TableThemeConfigBlockType(context)
)
app.$registry.register(
'workflowAction',

384
web-frontend/modules/builder/themeConfigBlockTypes.js
View file

@ -6,6 +6,7 @@ import LinkThemeConfigBlock from '@baserow/modules/builder/components/theme/Link
import ImageThemeConfigBlock from '@baserow/modules/builder/components/theme/ImageThemeConfigBlock'
import PageThemeConfigBlock from '@baserow/modules/builder/components/theme/PageThemeConfigBlock'
import InputThemeConfigBlock from '@baserow/modules/builder/components/theme/InputThemeConfigBlock'
import TableThemeConfigBlock from '@baserow/modules/builder/components/theme/TableThemeConfigBlock'
import {
resolveColor,
colorRecommendation,
@ -21,16 +22,52 @@ import get from 'lodash/get'
* Helper class to construct easily style objects.
*/
export class ThemeStyle {
constructor() {
constructor({ colorVariables = {}, $registry }) {
this.style = {}
this.colorVariables = colorVariables
this.$registry = $registry
}
addIfExists(theme, propName, styleName, transform = (v) => v) {
if (!styleName) {
styleName = `--${propName.replace(/_/g, '-')}`
}
if (Object.prototype.hasOwnProperty.call(theme, propName)) {
this.style[styleName] = transform(theme[propName])
}
}
addColorIfExists(theme, propName, styleName) {
return this.addIfExists(theme, propName, styleName, (v) =>
resolveColor(v, this.colorVariables)
)
}
addColorRecommendationIfExists(theme, propName, styleName) {
return this.addIfExists(
theme,
propName,
styleName,
(v) => (v) => colorRecommendation(resolveColor(v, this.colorVariables))
)
}
addFontFamilyIfExists(theme, propName, styleName) {
return this.addIfExists(theme, propName, styleName, (v) => {
const fontFamilyType = this.$registry.get('fontFamily', v)
return `"${fontFamilyType.name}","${fontFamilyType.safeFont}"`
})
}
addPixelValueIfExists(theme, propName, styleName) {
return this.addIfExists(
theme,
propName,
styleName,
(v) => `${Math.min(100, v)}px`
)
}
toObject() {
return this.style
}
@ -124,7 +161,10 @@ export class ColorThemeConfigBlockType extends ThemeConfigBlockType {
}
getCSS(theme, colorVariables, baseTheme = null) {
const style = new ThemeStyle()
const style = new ThemeStyle({
colorVariables,
$registry: this.app.$registry,
})
style.addIfExists(theme, 'primary_color', '--main-primary-color', (v) =>
resolveColor(v, colorVariables)
)
@ -155,6 +195,11 @@ export class ColorThemeConfigBlockType extends ThemeConfigBlockType {
getColorVariables(theme) {
const { i18n } = this.app
return [
{
name: i18n.t('colorThemeConfigBlockType.transparent'),
value: 'transparent',
color: '#00000000',
},
{
name: i18n.t('colorThemeConfigBlockType.primary'),
value: 'primary',
@ -207,15 +252,17 @@ export class TypographyThemeConfigBlockType extends ThemeConfigBlockType {
}
getCSS(theme, colorVariables, baseTheme = null) {
const style = new ThemeStyle()
const style = new ThemeStyle({
colorVariables,
$registry: this.app.$registry,
})
Array.from([1, 2, 3, 4, 5, 6]).forEach((level) => {
style.addIfExists(
style.addPixelValueIfExists(
theme,
`heading_${level}_font_size`,
`--heading-h${level}-font-size`,
(v) => `${Math.min(100, v)}px`
`--heading-h${level}-font-size`
)
style.addIfExists(
style.addColorIfExists(
theme,
`heading_${level}_text_color`,
`--heading-h${level}-color`,
@ -224,38 +271,18 @@ export class TypographyThemeConfigBlockType extends ThemeConfigBlockType {
style.addIfExists(
theme,
`heading_${level}_text_alignment`,
`--heading-h${level}-text-alignment`,
(v) => v
`--heading-h${level}-text-alignment`
)
style.addIfExists(
style.addFontFamilyIfExists(
theme,
`heading_${level}_font_family`,
`--heading-h${level}-font-family`,
(v) => {
const fontFamilyType = this.app.$registry.get('fontFamily', v)
return `"${fontFamilyType.name}","${fontFamilyType.safeFont}"`
}
`--heading-h${level}-font-family`
)
})
style.addIfExists(
theme,
`body_font_size`,
`--body-font-size`,
(v) => `${Math.min(100, v)}px`
)
style.addIfExists(theme, `body_text_color`, `--body-text-color`, (v) =>
resolveColor(v, colorVariables)
)
style.addIfExists(
theme,
`body_text_alignment`,
`--body-text-alignment`,
(v) => v
)
style.addIfExists(theme, `body_font_family`, `--body-font-family`, (v) => {
const fontFamilyType = this.app.$registry.get('fontFamily', v)
return `"${fontFamilyType.name}","${fontFamilyType.safeFont}"`
})
style.addPixelValueIfExists(theme, `body_font_size`)
style.addColorIfExists(theme, `body_text_color`)
style.addIfExists(theme, `body_text_alignment`)
style.addFontFamilyIfExists(theme, `body_font_family`)
return style.toObject()
}
@ -278,53 +305,24 @@ export class ButtonThemeConfigBlockType extends ThemeConfigBlockType {
}
getCSS(theme, colorVariables, baseTheme = null) {
const style = new ThemeStyle()
style.addIfExists(
theme,
'button_background_color',
'--button-background-color',
(v) => resolveColor(v, colorVariables)
)
style.addIfExists(
theme,
'button_hover_background_color',
'--button-hover-background-color',
(v) => resolveColor(v, colorVariables)
)
style.addIfExists(theme, 'button_text_color', '--button-text-color', (v) =>
resolveColor(v, colorVariables)
)
style.addIfExists(
theme,
'button_hover_text_color',
'--button-hover-text-color',
(v) => resolveColor(v, colorVariables)
)
style.addIfExists(
theme,
'button_border_color',
'--button-border-color',
(v) => resolveColor(v, colorVariables)
)
style.addIfExists(
theme,
'button_hover_border_color',
'--button-hover-border-color',
(v) => resolveColor(v, colorVariables)
)
style.addIfExists(theme, 'button_width', '--button-width', (v) =>
const style = new ThemeStyle({
colorVariables,
$registry: this.app.$registry,
})
style.addColorIfExists(theme, 'button_background_color')
style.addColorIfExists(theme, 'button_hover_background_color')
style.addColorIfExists(theme, 'button_text_color')
style.addColorIfExists(theme, 'button_hover_text_color')
style.addColorIfExists(theme, 'button_border_color')
style.addColorIfExists(theme, 'button_hover_border_color')
style.addIfExists(theme, 'button_width', null, (v) =>
v === WIDTHS_NEW.FULL ? '100%' : 'auto'
)
style.addIfExists(
theme,
'button_text_alignment',
'--button-text-alignment',
(v) => v
)
style.addIfExists(theme, 'button_text_alignment')
style.addIfExists(
theme,
'button_alignment',
'--button-alignment',
null,
(v) =>
({
[HORIZONTAL_ALIGNMENTS.LEFT]: 'flex-start',
@ -332,51 +330,12 @@ export class ButtonThemeConfigBlockType extends ThemeConfigBlockType {
[HORIZONTAL_ALIGNMENTS.RIGHT]: 'flex-end',
}[v])
)
style.addIfExists(
theme,
'button_font_alignment',
'--button-text-alignment',
(v) => v
)
style.addIfExists(
theme,
`button_font_family`,
`--button-font-family`,
(v) => {
const fontFamilyType = this.app.$registry.get('fontFamily', v)
return `"${fontFamilyType.name}","${fontFamilyType.safeFont}"`
}
)
style.addIfExists(
theme,
`button_font_size`,
`--button-font-size`,
(v) => `${Math.min(100, v)}px`
)
style.addIfExists(
theme,
`button_border_radius`,
`--button-border-radius`,
(v) => `${v}px`
)
style.addIfExists(
theme,
`button_border_size`,
`--button-border-size`,
(v) => `${v}px`
)
style.addIfExists(
theme,
`button_horizontal_padding`,
`--button-horizontal-padding`,
(v) => `${v}px`
)
style.addIfExists(
theme,
`button_vertical_padding`,
`--button-vertical-padding`,
(v) => `${v}px`
)
style.addFontFamilyIfExists(theme, `button_font_family`)
style.addPixelValueIfExists(theme, `button_font_size`)
style.addPixelValueIfExists(theme, `button_border_radius`)
style.addPixelValueIfExists(theme, `button_border_size`)
style.addPixelValueIfExists(theme, `button_horizontal_padding`)
style.addPixelValueIfExists(theme, `button_vertical_padding`)
return style.toObject()
}
@ -399,16 +358,12 @@ export class LinkThemeConfigBlockType extends ThemeConfigBlockType {
}
getCSS(theme, colorVariables, baseTheme = null) {
const style = new ThemeStyle()
style.addIfExists(theme, 'link_text_color', '--link-text-color', (v) =>
resolveColor(v, colorVariables)
)
style.addIfExists(
theme,
'link_hover_text_color',
'--link-hover-text-color',
(v) => resolveColor(v, colorVariables)
)
const style = new ThemeStyle({
colorVariables,
$registry: this.app.$registry,
})
style.addColorIfExists(theme, 'link_text_color')
style.addColorIfExists(theme, 'link_hover_text_color')
style.addIfExists(
theme,
'link_text_alignment',
@ -446,7 +401,10 @@ export class ImageThemeConfigBlockType extends ThemeConfigBlockType {
}
getCSS(theme, colorVariables, baseTheme = null) {
const style = new ThemeStyle()
const style = new ThemeStyle({
colorVariables,
$registry: this.app.$registry,
})
style.addIfExists(
theme,
'image_alignment',
@ -532,13 +490,11 @@ export class PageThemeConfigBlockType extends ThemeConfigBlockType {
}
getCSS(theme, colorVariables, baseTheme = null) {
const style = new ThemeStyle()
style.addIfExists(
theme,
'page_background_color',
'--page-background-color',
(v) => resolveColor(v, colorVariables)
)
const style = new ThemeStyle({
colorVariables,
$registry: this.app.$registry,
})
style.addColorIfExists(theme, 'page_background_color')
style.addIfExists(
theme,
'page_background_file',
@ -579,98 +535,40 @@ export class InputThemeConfigBlockType extends ThemeConfigBlockType {
}
getCSS(theme, colorVariables, baseTheme = null) {
const style = new ThemeStyle()
style.addIfExists(theme, 'label_text_color', '--label-text-color', (v) =>
resolveColor(v, colorVariables)
)
style.addIfExists(
theme,
`label_font_family`,
`--label-font-family`,
(v) => {
const fontFamilyType = this.app.$registry.get('fontFamily', v)
return `"${fontFamilyType.name}","${fontFamilyType.safeFont}"`
}
)
style.addIfExists(
theme,
`label_font_size`,
`--label-font-size`,
(v) => `${Math.min(100, v)}px`
)
const style = new ThemeStyle({
colorVariables,
$registry: this.app.$registry,
})
style.addIfExists(theme, 'input_text_color', '--input-text-color', (v) =>
resolveColor(v, colorVariables)
)
style.addColorIfExists(theme, 'label_text_color')
style.addFontFamilyIfExists(theme, `label_font_family`)
style.addPixelValueIfExists(theme, `label_font_size`)
style.addColorIfExists(theme, 'input_text_color')
style.addIfExists(
theme,
'input_text_color',
'--input-text-color-complement',
(v) => colorRecommendation(resolveColor(v, colorVariables))
)
style.addIfExists(
theme,
`input_font_family`,
`--input-font-family`,
(v) => {
const fontFamilyType = this.app.$registry.get('fontFamily', v)
return `"${fontFamilyType.name}","${fontFamilyType.safeFont}"`
}
)
style.addIfExists(
theme,
`input_font_size`,
`--input-font-size`,
(v) => `${Math.min(100, v)}px`
)
style.addIfExists(
style.addFontFamilyIfExists(theme, `input_font_family`)
style.addPixelValueIfExists(theme, `input_font_size`)
style.addColorIfExists(theme, 'input_background_color')
style.addColorRecommendationIfExists(
theme,
'input_background_color',
'--input-background-color',
(v) => resolveColor(v, colorVariables)
'--input-background-color-complement'
)
style.addIfExists(
theme,
'input_background_color',
'--input-background-color-complement',
(v) => colorRecommendation(resolveColor(v, colorVariables))
)
style.addIfExists(
style.addColorIfExists(theme, 'input_border_color')
style.addColorRecommendationIfExists(
theme,
'input_border_color',
'--input-border-color',
(v) => resolveColor(v, colorVariables)
)
style.addIfExists(
theme,
'input_border_color',
'--input-border-color-complement',
(v) => colorRecommendation(resolveColor(v, colorVariables))
)
style.addIfExists(
theme,
`input_border_radius`,
`--input-border-radius`,
(v) => `${v}px`
)
style.addIfExists(
theme,
`input_border_size`,
`--input-border-size`,
(v) => `${v}px`
)
style.addIfExists(
theme,
`input_horizontal_padding`,
`--input-horizontal-padding`,
(v) => `${v}px`
)
style.addIfExists(
theme,
`input_vertical_padding`,
`--input-vertical-padding`,
(v) => `${v}px`
'--input-border-color-complement'
)
style.addPixelValueIfExists(theme, `input_border_radius`)
style.addPixelValueIfExists(theme, `input_border_size`)
style.addPixelValueIfExists(theme, `input_horizontal_padding`)
style.addPixelValueIfExists(theme, `input_vertical_padding`)
return style.toObject()
}
@ -682,3 +580,53 @@ export class InputThemeConfigBlockType extends ThemeConfigBlockType {
return 55
}
}
export class TableThemeConfigBlockType extends ThemeConfigBlockType {
static getType() {
return 'table'
}
get label() {
return this.app.i18n.t('themeConfigBlockType.table')
}
getCSS(theme, colorVariables, baseTheme = null) {
const style = new ThemeStyle({
colorVariables,
$registry: this.app.$registry,
})
style.addColorIfExists(theme, 'table_border_color')
style.addPixelValueIfExists(theme, `table_border_size`)
style.addPixelValueIfExists(theme, `table_border_radius`)
style.addColorIfExists(theme, 'table_header_background_color')
style.addColorIfExists(theme, 'table_header_text_color')
style.addPixelValueIfExists(theme, `table_header_font_size`)
style.addFontFamilyIfExists(theme, `table_header_font_family`)
style.addIfExists(theme, `table_header_text_alignment`)
style.addColorIfExists(theme, 'table_cell_background_color')
style.addColorIfExists(theme, 'table_cell_alternate_background_color')
style.addColorIfExists(theme, 'table_cell_text_color')
style.addFontFamilyIfExists(theme, `table_cell_font_family`)
style.addPixelValueIfExists(theme, `table_cell_font_size`)
style.addIfExists(theme, `table_cell_alignment`)
style.addPixelValueIfExists(theme, `table_cell_vertical_padding`)
style.addPixelValueIfExists(theme, `table_cell_horizontal_padding`)
style.addColorIfExists(theme, 'table_vertical_separator_color')
style.addPixelValueIfExists(theme, `table_vertical_separator_size`)
style.addColorIfExists(theme, 'table_horizontal_separator_color')
style.addPixelValueIfExists(theme, `table_horizontal_separator_size`)
return style.toObject()
}
get component() {
return TableThemeConfigBlock
}
getOrder() {
return 65
}
}

81
web-frontend/modules/core/assets/scss/components/builder/elements/ab_components/ab_table.scss Normal file
View file

@ -0,0 +1,81 @@
.ab-table {
border: var(--table-border-size, 1px) solid var(--table-border-color, $black);
text-align: var(--table-cell-alignment, left);
font-size: var(--body-font-size, 13px);
border-radius: var(--table-border-radius, 0);
background-color: var(--table-cell-background-color, $palette-neutral-200);
.baserow-table__header-cell,
.baserow-table__cell {
padding: var(--table-cell-vertical-padding, 10px)
var(--table-cell-horizontal-padding, 20px);
}
.baserow-table__cell {
font-size: var(--body-font-size, 13px);
color: var(--body-text-color, $color-neutral-900);
font-family: var(--body-font-family, Inter);
text-align: var(--table-cell-alignment, left);
}
.baserow-table__header-cell {
font-weight: 600;
background-color: var(
--table-header-background-color,
$palette-neutral-200
);
font-size: var(--table-header-font-size, 13px);
color: var(--table-header-text-color, $color-neutral-900);
font-family: var(--table-header-font-family, Inter);
text-align: var(--table-header-text-alignment, left);
}
& .baserow-table__row:not(:last-child) .baserow-table__separator {
border-bottom: var(--table-horizontal-separator-size, 1px) solid
var(--table-horizontal-separator-color, $black);
}
.baserow-table--vertical {
.baserow-table__header-cell {
border-right: var(--table-vertical-separator-size, 1px) solid
var(--table-vertical-separator-color, $black);
}
tbody.baserow-table__row:nth-child(even) {
background-color: var(
--table-cell-alternate-background-color,
transparent
);
}
}
.baserow-table--horizontal {
.baserow-table__header-cell,
.baserow-table__cell {
border-bottom: var(--table-horizontal-separator-size, 1px) solid
var(--table-horizontal-separator-color, $black);
border-right: var(--table-vertical-separator-size, 1px) solid
var(--table-vertical-separator-color, $black);
}
.baserow-table__row {
.baserow-table__cell:last-child,
.baserow-table__header-cell:last-child {
border-right: none;
}
}
.baserow-table__row:last-child {
.baserow-table__cell {
border-bottom: none;
}
}
tbody .baserow-table__row:nth-child(even) {
background-color: var(
--table-cell-alternate-background-color,
transparent
);
}
}
}

1
web-frontend/modules/core/assets/scss/components/builder/elements/ab_components/all.scss
View file

@ -10,3 +10,4 @@
@import 'ab_tag';
@import 'ab_radio';
@import 'ab_image';
@import 'ab_table';

35
web-frontend/modules/core/assets/scss/components/builder/elements/baserow_table.scss
View file

@ -4,41 +4,6 @@
.baserow-table {
width: 100%;
border: 1px solid $black;
border-spacing: 0;
text-align: left;
font-size: 12px;
}
.baserow-table__header-cell,
.baserow-table__cell {
padding: 12px 20px 10px;
}
.baserow-table__header-cell {
font-weight: 600;
background-color: $palette-neutral-200;
}
.baserow-table__separator {
.baserow-table__row:not(:last-child) & {
border-bottom: 1px solid $black;
}
}
.baserow-table--horizontal {
.baserow-table__header-cell,
.baserow-table__cell {
border-bottom: 1px solid $black;
}
.baserow-table__row:last-child .baserow-table__cell {
border-bottom: none;
}
}
.baserow-table--vertical {
.baserow-table__header-cell {
border-right: 1px solid $black;
}
}

62
web-frontend/modules/core/components/ColorInputGroup.vue
View file

@ -1,62 +0,0 @@
<template>
<FormGroup v-if="!labelAfter" small-label required :label="label">
<ColorInput
:value="value"
:color-variables="colorVariables"
@input="$emit('input', $event)"
/>
<template #after-input>
<slot name="after-input"></slot>
</template>
</FormGroup>
<div v-else class="control">
<div class="control__elements">
<div class="color-input-group--label-after">
<ColorInput
:value="value"
:color-variables="colorVariables"
:horizontal="horizontal"
@input="$emit('input', $event)"
/>
<div class="color-input-group__label-after">
{{ label }}
</div>
</div>
</div>
</div>
</template>
<script>
import ColorInput from '@baserow/modules/core/components/ColorInput'
export default {
name: 'ColorInputGroup',
components: { ColorInput },
props: {
value: {
type: String,
required: false,
default: 'primary',
},
label: {
type: String,
required: true,
},
labelAfter: {
type: Boolean,
required: false,
default: false,
},
colorVariables: {
type: Array,
required: false,
default: () => [],
},
horizontal: {
type: Boolean,
required: false,
default: false,
},
},
}
</script>

7
web-frontend/modules/core/components/ColorPickerContext.vue
View file

@ -164,6 +164,13 @@ export default {
},
methods: {
setColorFromPicker(value) {
if (this.selectedVariable) {
// If we come from a variable before we reset the alpha channel to 1 otherwise
// You could think something doesn't work.
const rgba = convertHexToRgb(value)
rgba.a = 1
value = convertRgbToHex(rgba)
}
this.colorUpdated(value)
this.$emit(
'input',

2
web-frontend/modules/core/plugins/global.js
View file

@ -57,7 +57,6 @@ import Expandable from '@baserow/modules/core/components/Expandable.vue'
import RadioButton from '@baserow/modules/core/components/RadioButton'
import Thumbnail from '@baserow/modules/core/components/Thumbnail'
import ColorInput from '@baserow/modules/core/components/ColorInput'
import ColorInputGroup from '@baserow/modules/core/components/ColorInputGroup'
import SelectSearch from '@baserow/modules/core/components/SelectSearch'
function setupVue(Vue) {
@ -101,7 +100,6 @@ function setupVue(Vue) {
Vue.component('FormGroup', FormGroup)
Vue.component('FormRow', FormRow)
Vue.component('ColorInput', ColorInput)
Vue.component('ColorInputGroup', ColorInputGroup)
Vue.component('ImageInput', ImageInput)
Vue.component('SelectSearch', SelectSearch)
Vue.component('Logo', Logo)