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

Merge remote-tracking branch 'origin/budi-8980-create-state-panel' into budi-8980-create-state-panel

This commit is contained in:
Peter Clement 2025-01-29 13:36:57 +00:00
parent bf2b5a5152 532b74069d
commit 404f983381
1 changed files with 24 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
View File

@ -246,30 +246,26 @@
</script> </script>
<div class="state-panel"> <div class="state-panel">
<div class="section"> <Select
<Select label="State variables"
label="State variables" bind:value={selectedKey}
bind:value={selectedKey} placeholder={keyOptions.length > 0 ? false : "No state variables found"}
placeholder={keyOptions.length > 0 ? false : "No state variables found"} options={keyOptions}
options={keyOptions} on:change={handleStateKeySelect}
on:change={handleStateKeySelect} />
/>
</div>
{#if selectedKey && keyOptions.length > 0} {#if selectedKey && keyOptions.length > 0}
<div class="section"> <DrawerBindableInput
<DrawerBindableInput value={editorValue}
value={editorValue} title={`Set value for "${selectedKey}"`}
title={`Set value for "${selectedKey}"`} placeholder="Enter a value"
placeholder="Enter a value" label="Set temporary value for design preview"
label="Set temporary value for design preview" on:change={e => handleStateInspectorChange(e)}
on:change={e => handleStateInspectorChange(e)} {bindings}
{bindings} />
/>
</div>
{/if} {/if}
{#if componentsUsingState.length > 0} {#if componentsUsingState.length > 0}
<div class="section"> <div class="section">
<span class="text">Updates:</span> <span class="text">Updates</span>
<div class="updates-section"> <div class="updates-section">
{#each componentsUsingState as component} {#each componentsUsingState as component}
<button <button
@ -284,7 +280,7 @@
{/if} {/if}
{#if componentsUpdatingState.length > 0} {#if componentsUpdatingState.length > 0}
<div class="section"> <div class="section">
<span class="text">Controlled by:</span> <span class="text">Controlled by</span>
<div class="updates-section"> <div class="updates-section">
{#each componentsUpdatingState as component} {#each componentsUpdatingState as component}
<button <button
@ -309,15 +305,16 @@
.section { .section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-xs); gap: var(--spacing-s);
margin-top: var(--spacing-s);
} }
.text { .text {
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-700);
font-size: var(--spectrum-global-dimension-font-size-50); font-size: 12px;
} }
.updates-colour { .updates-colour {
color: var(--spectrum-global-color-blue-700); color: var(--bb-indigo-light);
} }
.controlled-by-colour { .controlled-by-colour {
color: var(--spectrum-global-color-orange-700); color: var(--spectrum-global-color-orange-700);
@ -328,9 +325,9 @@
background: none; background: none;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
font-size: var(--spectrum-global-dimension-font-size-50);
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
font-size: 12px;
} }
.component-link:hover { .component-link:hover {
text-decoration: underline; text-decoration: underline;
@ -340,6 +337,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: var(--spacing-xs); gap: var(--spacing-s);
} }
</style> </style>