From 1219463162c6fb82f4c7324b76e22f1664c97643 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 1 Aug 2024 11:58:06 +0100 Subject: [PATCH] Update grid rows and columns settings and add them to screen settings --- .../_components/Screen/GeneralPanel.svelte | 178 +++++++++++------- .../_components/Screen/index.svelte | 2 +- packages/client/manifest.json | 8 +- 3 files changed, 112 insertions(+), 76 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte index aa54187dfb..00032cb23a 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte @@ -6,6 +6,7 @@ Checkbox, Banner, Select, + Stepper, notifications, } from "@budibase/bbui" import PropertyControl from "components/design/settings/controls/PropertyControl.svelte" @@ -17,9 +18,113 @@ import BarButtonList from "components/design/settings/controls/BarButtonList.svelte" $: bindings = getBindableProperties($selectedScreen, null) + $: screenSettings = getScreenSettings($selectedScreen) let errors = {} + const getScreenSettings = screen => { + let settings = [ + { + key: "routing.homeScreen", + control: Checkbox, + props: { + text: "Set as home screen", + }, + }, + { + key: "routing.route", + label: "Route", + control: Input, + parser: val => { + if (!val.startsWith("/")) { + val = "/" + val + } + return sanitizeUrl(val) + }, + validate: route => { + const existingRoute = screen.routing.route + if (route !== existingRoute && routeTaken(route)) { + return "That URL is already in use for this role" + } + return null + }, + }, + { + key: "routing.roleId", + label: "Access", + control: RoleSelect, + validate: role => { + const existingRole = screen.routing.roleId + if (role !== existingRole && roleTaken(role)) { + return "That role is already in use for this URL" + } + return null + }, + }, + { + key: "onLoad", + label: "On screen load", + control: ButtonActionEditor, + }, + { + key: "width", + label: "Width", + control: Select, + props: { + options: ["Extra small", "Small", "Medium", "Large", "Max"], + placeholder: "Default", + disabled: !!screen.layoutId, + }, + }, + { + key: "props.layout", + label: "Layout", + defaultValue: "flex", + control: BarButtonList, + props: { + options: [ + { + barIcon: "ModernGridView", + value: "flex", + }, + { + barIcon: "ViewGrid", + value: "grid", + }, + ], + }, + }, + ] + + // Add grid layout settings if required + if (screen.props.layout === "grid") { + settings = settings.concat([ + { + key: "props.cols", + label: "Columns", + control: Stepper, + defaultValue: 12, + props: { + min: 2, + max: 50, + }, + }, + { + key: "props.rows", + label: "Rows", + control: Stepper, + defaultValue: 12, + props: { + min: 2, + max: 50, + }, + }, + ]) + } + + return settings + } + const routeTaken = url => { const roleId = get(selectedScreen).routing.roleId || "BASIC" return get(screenStore).screens.some( @@ -72,79 +177,6 @@ } } - $: screenSettings = [ - { - key: "routing.homeScreen", - control: Checkbox, - props: { - text: "Set as home screen", - }, - }, - { - key: "routing.route", - label: "Route", - control: Input, - parser: val => { - if (!val.startsWith("/")) { - val = "/" + val - } - return sanitizeUrl(val) - }, - validate: route => { - const existingRoute = get(selectedScreen).routing.route - if (route !== existingRoute && routeTaken(route)) { - return "That URL is already in use for this role" - } - return null - }, - }, - { - key: "routing.roleId", - label: "Access", - control: RoleSelect, - validate: role => { - const existingRole = get(selectedScreen).routing.roleId - if (role !== existingRole && roleTaken(role)) { - return "That role is already in use for this URL" - } - return null - }, - }, - { - key: "onLoad", - label: "On screen load", - control: ButtonActionEditor, - }, - { - key: "width", - label: "Width", - control: Select, - props: { - options: ["Extra small", "Small", "Medium", "Large", "Max"], - placeholder: "Default", - disabled: !!$selectedScreen.layoutId, - }, - }, - { - key: "props.layout", - label: "Layout", - defaultValue: "flex", - control: BarButtonList, - props: { - options: [ - { - barIcon: "ModernGridView", - value: "flex", - }, - { - barIcon: "ViewGrid", - value: "grid", - }, - ], - }, - }, - ] - const removeCustomLayout = async () => { return screenStore.removeCustomLayout(get(selectedScreen)) } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte index 8a544eac86..405b8b0c21 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte @@ -33,7 +33,7 @@ {/each} - + {#if activeTab === "theme"} {:else} diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 1c18fd4801..39c1213510 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -151,7 +151,9 @@ "label": "Columns", "key": "cols", "placeholder": 12, - "min": 1, + "defaultValue": 12, + "min": 2, + "max": 50, "dependsOn": { "setting": "layout", "value": "grid" @@ -162,7 +164,9 @@ "label": "Rows", "key": "rows", "placeholder": 12, - "min": 1, + "defaultValue": 12, + "min": 2, + "max": 50, "dependsOn": { "setting": "layout", "value": "grid"