CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-06 04:54:52 +13:00
Code Issues Projects Releases Wiki Activity

Merge pull request #11617 from Budibase/lab-theme-binding

Browse source 
App Theme binding added
This commit is contained in:
deanhannigan 2023-09-08 15:26:11 +01:00 committed by GitHub
commit abc262fbf5
3 changed files with 32 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
packages/builder/src/builderStore/dataBinding.js
View file

@ -504,22 +504,33 @@ const getDeviceBindings = () => {
let bindings = []
if (get(store).clientFeatures?.deviceAwareness) {
const safeDevice = makePropSafe("device")
bindings.push({
type: "context",
runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
readableBinding: `Device.Mobile`,
category: "Device",
icon: "DevicePhone",
display: { type: "boolean", name: "mobile" },
})
bindings.push({
type: "context",
runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
readableBinding: `Device.Tablet`,
category: "Device",
icon: "DevicePhone",
display: { type: "boolean", name: "tablet" },
})
bindings = [
{
type: "context",
runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
readableBinding: `Device.Mobile`,
category: "Device",
icon: "DevicePhone",
display: { type: "boolean", name: "mobile" },
},
{
type: "context",
runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
readableBinding: `Device.Tablet`,
category: "Device",
icon: "DevicePhone",
display: { type: "boolean", name: "tablet" },
},
{
type: "context",
runtimeBinding: `${safeDevice}.${makePropSafe("theme")}`,
readableBinding: `App.Theme`,
category: "Device",
icon: "DevicePhone",
display: { type: "string", name: "App Theme" },
},
]
}
return bindings
}

1
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
View file

@ -21,6 +21,7 @@
$selectedScreen,
$store.selectedComponentId
)
$: componentBindings = getComponentBindableProperties(
$selectedScreen,
$store.selectedComponentId

4
packages/client/src/components/context/DeviceBindingsProvider.svelte
View file

@ -1,6 +1,7 @@
<script>
import Provider from "./Provider.svelte"
import { onMount, onDestroy } from "svelte"
import { themeStore } from "stores"
let width = window.innerWidth
let height = window.innerHeight
@ -13,11 +14,14 @@
}
})
$: theme = $themeStore.theme
$: data = {
mobile: width && width < tabletBreakpoint,
tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
width,
height,
theme,
}
onMount(() => {