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

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

App Theme binding added
This commit is contained in:
deanhannigan 2023-09-08 15:26:11 +01:00 committed by GitHub
parent a780f85cac 32892b1ef9
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 = [] let bindings = []
if (get(store).clientFeatures?.deviceAwareness) { if (get(store).clientFeatures?.deviceAwareness) {
const safeDevice = makePropSafe("device") const safeDevice = makePropSafe("device")
bindings.push({
type: "context", bindings = [
runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`, {
readableBinding: `Device.Mobile`, type: "context",
category: "Device", runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
icon: "DevicePhone", readableBinding: `Device.Mobile`,
display: { type: "boolean", name: "mobile" }, category: "Device",
}) icon: "DevicePhone",
bindings.push({ display: { type: "boolean", name: "mobile" },
type: "context", },
runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`, {
readableBinding: `Device.Tablet`, type: "context",
category: "Device", runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
icon: "DevicePhone", readableBinding: `Device.Tablet`,
display: { type: "boolean", name: "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 return bindings
} }

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

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

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

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