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

Update some component manifest styles and fix issue with default grid vars

This commit is contained in:
Andrew Kingston 2024-08-01 16:23:53 +01:00
parent 4e9e644e13
commit 9906ea96a9
No known key found for this signature in database
7 changed files with 94 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/client/manifest.json
View File

@ -114,13 +114,12 @@
"icon": "Selection",
"hasChildren": true,
"size": {
"width": 400,
"width": 500,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch",
"showControls": false
"vAlign": "stretch"
},
"styles": ["padding", "size", "background", "border", "shadow"],
"settings": [
@ -363,8 +362,12 @@
"illegalChildren": ["section"],
"showEmptyState": false,
"size": {
"width": 400,
"height": 100
"width": 600,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -735,8 +738,12 @@
"illegalChildren": ["section"],
"hasChildren": true,
"size": {
"width": 400,
"height": 100
"width": 500,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -4963,8 +4970,12 @@
"hasChildren": true,
"actions": ["RefreshDatasource"],
"size": {
"width": 400,
"height": 100
"width": 500,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -5281,6 +5292,10 @@
"width": 100,
"height": 35
},
"grid": {
"hAlign": "center",
"vAlign": "center"
},
"settings": [
{
"type": "dataProvider",
@ -5327,6 +5342,14 @@
"name": "Chart Block",
"icon": "GraphPie",
"hasChildren": false,
"size": {
"width": 600,
"height": 400
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
"type": "select",
@ -6250,6 +6273,10 @@
"width": 600,
"height": 400
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
"type": "text",
@ -6459,8 +6486,12 @@
"illegalChildren": ["section", "rowexplorer"],
"hasChildren": true,
"size": {
"width": 400,
"height": 100
"width": 500,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -6731,9 +6762,13 @@
"hasChildren": false,
"ejectable": false,
"size": {
"width": 400,
"width": 600,
"height": 400
},
"grid": {
"hAlign": "stretch",
"vAlign": "start"
},
"styles": ["size"],
"settings": [
{
@ -6922,7 +6957,7 @@
"block": true,
"info": "Form blocks are only compatible with internal or SQL tables",
"size": {
"width": 400,
"width": 600,
"height": 400
},
"grid": {
@ -7147,8 +7182,12 @@
"name": "Row Explorer Block",
"icon": "PersonalizationField",
"size": {
"width": 600,
"height": 400
"width": 800,
"height": 426
},
"grid": {
"hAlign": "stretch",
"vAlign": "start"
},
"settings": [
{
@ -7272,8 +7311,7 @@
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch",
"showControls": false
"vAlign": "stretch"
},
"settings": [
{

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

@ -634,6 +634,8 @@
// Generates any required base styles based on the component definition
const getBaseStyles = definition => {
return {
"--default-width": definition.size?.width || 100,
"--default-height": definition.size?.height || 100,
...getBaseGridVars(definition),
}
}

25
packages/client/src/components/app/container/GridContainer.svelte
View File

@ -41,8 +41,8 @@
...$component.styles?.normal,
"--cols": cols,
"--rows": rows,
"--col-size": `${colSize}px`,
"--row-size": `${rowSize}px`,
"--col-size": colSize,
"--row-size": rowSize,
},
empty: false,
}}
@ -70,14 +70,14 @@
gap: 0;
/* Prevent cross-grid variable inheritance */
--grid-desktop-col-start: initial;
/* --grid-desktop-col-start: initial;
--grid-desktop-col-end: initial;
--grid-desktop-row-start: initial;
--grid-desktop-row-end: initial;
--grid-mobile-col-start: initial;
--grid-mobile-col-end: initial;
--grid-mobile-row-start: initial;
--grid-mobile-row-end: initial;
--grid-mobile-row-end: initial;*/
}
.grid,
.underlay {
@ -111,9 +111,22 @@
/* On desktop, use desktop metadata and fall back to mobile */
/* Position vars */
--col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));
--col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end, 2));
--col-end: var(
--grid-desktop-col-end,
var(
--grid-mobile-col-end,
/* Our final*/
round(up, calc(var(--default-width) / var(--col-size) + 1))
)
);
--row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
--row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end, 2));
--row-end: var(
--grid-desktop-row-end,
var(
--grid-mobile-row-end,
round(up, calc(var(--default-height) / var(--row-size) + 1))
)
);
/* Flex vars */
--h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align, stretch));

23
packages/client/src/components/preview/GridDNDHandler.svelte
View File

@ -1,14 +1,8 @@
<script>
import { onMount, onDestroy } from "svelte"
import { get } from "svelte/store"
import { builderStore, componentStore } from "stores"
import { Utils, memo } from "@budibase/frontend-core"
import {
isGridEvent,
getGridParentID,
getGridVar,
getGridVarValue,
} from "utils/grid"
import { isGridEvent, getGridParentID, getGridVar } from "utils/grid"
// Smallest possible 1x1 transparent GIF
const ghost = new Image(1, 1)
@ -166,24 +160,21 @@
}
const { id, gridId } = dragInfo
const domComponent = getDOMNode(id)
const domGrid = getDOMNode(gridId)
const gridCols = parseInt(domGrid.dataset.cols)
const gridRows = parseInt(domGrid.dataset.rows)
const instance = get(componentStore.actions.getComponentInstance(id))
if (!instance) {
return
}
const styles = get(instance.state).styles
const styles = getComputedStyle(domComponent.parentNode)
if (domGrid) {
dragInfo.grid = {
startX: e.clientX,
startY: e.clientY,
// Ensure things are within limits
rowStart: minMax(getGridVarValue(styles, vars.rowStart), 1, gridRows),
rowEnd: minMax(getGridVarValue(styles, vars.rowEnd), 2, gridRows + 1),
colStart: minMax(getGridVarValue(styles, vars.colStart), 1, gridCols),
colEnd: minMax(getGridVarValue(styles, vars.colEnd), 2, gridCols + 1),
rowStart: minMax(styles["grid-row-start"], 1, gridRows),
rowEnd: minMax(styles["grid-row-end"], 2, gridRows + 1),
colStart: minMax(styles["grid-column-start"], 1, gridCols),
colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
}
handleEvent(e)
}

1
packages/client/src/components/preview/GridStylesButton.svelte
View File

@ -11,6 +11,7 @@
export let componentId
$: currentValue = getGridVarValue(gridStyles, style)
$: console.log(style, currentValue, value)
$: active = currentValue === value
</script>

5
packages/client/src/components/preview/SettingsBar.svelte
View File

@ -40,7 +40,10 @@
$: isRoot = componentId === $builderStore.screen?.props?._id
$: insideGrid =
parent?._component.endsWith("/container") && parent.layout === "grid"
$: showGridStyles = insideGrid && definition?.grid?.showControls !== false
$: showGridStyles =
insideGrid &&
(definition?.grid?.hAlign !== "stretch" ||
definition?.grid?.vAlign !== "stretch")
$: gridHAlignVar = $getGridVar("h-align")
$: gridVAlignVar = $getGridVar("v-align")
$: gridStyles = $state?.styles

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

@ -70,23 +70,17 @@ export const getGridParentID = node => {
}
// Generates the base set of grid CSS vars from a component definition
const alignmentToStyleMap = {
start: "flex-start",
center: "center",
end: "flex-end",
stretch: "stretch",
}
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"
return {
["--grid-desktop-h-align"]: alignmentToStyleMap[gridHAlign],
["--grid-mobile-h-align"]: alignmentToStyleMap[gridHAlign],
["--grid-desktop-v-align"]: alignmentToStyleMap[gridVAlign],
["--grid-mobile-v-align"]: alignmentToStyleMap[gridVAlign],
["--grid-desktop-child-flex"]: flexStyles,
["--grid-mobile-child-flex"]: flexStyles,
"--grid-desktop-h-align": gridHAlign,
"--grid-mobile-h-align": gridHAlign,
"--grid-desktop-v-align": gridVAlign,
"--grid-mobile-v-align": gridVAlign,
"--grid-desktop-child-flex": flexStyles,
"--grid-mobile-child-flex": flexStyles,
}
}