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,
"size": {
"width": 600,
"height": 400
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
"vAlign": "center"
},
"settings": [
{

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

@ -199,7 +199,7 @@
$: darkMode = !currentTheme?.includes("light")
// Build up full styles and split them into variables and non-variables
$: baseStyles = getBaseStyles(definition)
$: baseStyles = getBaseStyles(definition, errorState)
$: styles = {
...baseStyles,
...instance._styles?.normal,
@ -632,11 +632,11 @@
}
// Generates any required base styles based on the component definition
const getBaseStyles = definition => {
const getBaseStyles = (definition, errored = false) => {
return {
"--default-width": definition.size?.width || 100,
"--default-height": definition.size?.height || 100,
...getBaseGridVars(definition),
"--default-width": errored ? 500 : definition.size?.width || 100,
"--default-height": errored ? 60 : definition.size?.height || 100,
...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
export const getBaseGridVars = definition => {
const gridHAlign = definition?.grid?.hAlign || "stretch"
const gridVAlign = definition?.grid?.vAlign || "center"
const flexStyles = gridVAlign === "stretch" ? "1 1 0" : "0 0 auto"
export const getBaseGridVars = (definition, errored = false) => {
const hAlign = errored ? "stretch" : definition?.grid?.hAlign || "stretch"
const vAlign = errored ? "stretch" : definition?.grid?.vAlign || "center"
const flexStyles = vAlign === "stretch" ? "1 1 0" : "0 0 auto"
return {
"--grid-desktop-h-align": gridHAlign,
"--grid-mobile-h-align": gridHAlign,
"--grid-desktop-v-align": gridVAlign,
"--grid-mobile-v-align": gridVAlign,
"--grid-desktop-h-align": hAlign,
"--grid-mobile-h-align": hAlign,
"--grid-desktop-v-align": vAlign,
"--grid-mobile-v-align": vAlign,
"--grid-desktop-child-flex": flexStyles,
"--grid-mobile-child-flex": flexStyles,
}