MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add better support for auto sizing error state components in grid layouts

This commit is contained in:
Andrew Kingston 2024-08-02 09:22:04 +01:00
parent 9906ea96a9
commit 5cc4002f32
No known key found for this signature in database
3 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/manifest.json
View File

@ -5344,11 +5344,11 @@
"hasChildren": false, "hasChildren": false,
"size": { "size": {
"width": 600, "width": 600,
"height": 400 "height": 420
}, },
"grid": { "grid": {
"hAlign": "stretch", "hAlign": "stretch",
"vAlign": "stretch" "vAlign": "center"
}, },
"settings": [ "settings": [
{ {

10
packages/client/src/components/Component.svelte
View File

@ -199,7 +199,7 @@
$: darkMode = !currentTheme?.includes("light") $: darkMode = !currentTheme?.includes("light")
// Build up full styles and split them into variables and non-variables // Build up full styles and split them into variables and non-variables
$: baseStyles = getBaseStyles(definition) $: baseStyles = getBaseStyles(definition, errorState)
$: styles = { $: styles = {
...baseStyles, ...baseStyles,
...instance._styles?.normal, ...instance._styles?.normal,
@ -632,11 +632,11 @@
} }
// Generates any required base styles based on the component definition // Generates any required base styles based on the component definition
const getBaseStyles = definition => { const getBaseStyles = (definition, errored = false) => {
return { return {
"--default-width": definition.size?.width || 100, "--default-width": errored ? 500 : definition.size?.width || 100,
"--default-height": definition.size?.height || 100, "--default-height": errored ? 60 : definition.size?.height || 100,
...getBaseGridVars(definition), ...getBaseGridVars(definition, errored),
} }
} }

16
packages/client/src/utils/grid.js
View File

@ -70,15 +70,15 @@ export const getGridParentID = node => {
} }
// Generates the base set of grid CSS vars from a component definition // Generates the base set of grid CSS vars from a component definition
export const getBaseGridVars = definition => { export const getBaseGridVars = (definition, errored = false) => {
const gridHAlign = definition?.grid?.hAlign || "stretch" const hAlign = errored ? "stretch" : definition?.grid?.hAlign || "stretch"
const gridVAlign = definition?.grid?.vAlign || "center" const vAlign = errored ? "stretch" : definition?.grid?.vAlign || "center"
const flexStyles = gridVAlign === "stretch" ? "1 1 0" : "0 0 auto" const flexStyles = vAlign === "stretch" ? "1 1 0" : "0 0 auto"
return { return {
"--grid-desktop-h-align": gridHAlign, "--grid-desktop-h-align": hAlign,
"--grid-mobile-h-align": gridHAlign, "--grid-mobile-h-align": hAlign,
"--grid-desktop-v-align": gridVAlign, "--grid-desktop-v-align": vAlign,
"--grid-mobile-v-align": gridVAlign, "--grid-mobile-v-align": vAlign,
"--grid-desktop-child-flex": flexStyles, "--grid-desktop-child-flex": flexStyles,
"--grid-mobile-child-flex": flexStyles, "--grid-mobile-child-flex": flexStyles,
} }