Misc fixes (#10345)
* Fix some issues with component and screen settings layout * Fix issue with component setting labels when multi-line * Remove early termination of form validation when encountering an errored field * Update free logo badge to be a sticky footer * Close side panels when clicking on links
This commit is contained in:
Andrew Kingston
GitHub
parent
1e4e61772b
commit
9025e18f15
11 changed files with 68 additions and 62 deletions
|
|
@ -90,6 +90,7 @@
|
|||
|
||||
<style>
|
||||
.action-count {
|
||||
padding-top: 6px;
|
||||
padding-bottom: var(--spacing-s);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,9 @@
|
|||
class:highlighted={highlighted && nullishValue}
|
||||
>
|
||||
{#if label && !labelHidden}
|
||||
<Label size="M">{label}</Label>
|
||||
<div class="label">
|
||||
<Label size="M">{label}</Label>
|
||||
</div>
|
||||
{/if}
|
||||
<div id={`${key}-prop-control`} class="control">
|
||||
<svelte:component
|
||||
|
|
@ -109,7 +111,7 @@
|
|||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr;
|
||||
align-items: center;
|
||||
align-items: start;
|
||||
transition: background 130ms ease-out, border-color 130ms ease-out;
|
||||
border-left: 4px solid transparent;
|
||||
margin: 0 calc(-1 * var(--spacing-xl));
|
||||
|
|
@ -123,6 +125,10 @@
|
|||
background: var(--spectrum-global-color-gray-300);
|
||||
border-color: var(--spectrum-global-color-static-red-600);
|
||||
}
|
||||
.label {
|
||||
margin-top: 16px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.control {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@
|
|||
label: "Navigation",
|
||||
control: Toggle,
|
||||
props: {
|
||||
text: "Show navigation",
|
||||
text: "Show nav",
|
||||
disabled: !!$selectedScreen.layoutId,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4462,10 +4462,8 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"label": "On click",
|
||||
"type": "event",
|
||||
"label": "On click",
|
||||
"labelHidden": true,
|
||||
"key": "onClickTitleButton",
|
||||
"nested": true,
|
||||
"dependsOn": {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
themeStore,
|
||||
appStore,
|
||||
devToolsStore,
|
||||
environmentStore,
|
||||
} from "stores"
|
||||
import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
|
||||
import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
|
||||
|
|
@ -34,6 +35,8 @@
|
|||
import KeyboardManager from "components/preview/KeyboardManager.svelte"
|
||||
import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
|
||||
import DevTools from "components/devtools/DevTools.svelte"
|
||||
import FreeFooter from "components/FreeFooter.svelte"
|
||||
import licensing from "../licensing"
|
||||
|
||||
// Provide contexts
|
||||
setContext("sdk", SDK)
|
||||
|
|
@ -186,6 +189,10 @@
|
|||
<DevTools />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !$builderStore.inBuilder && licensing.logoEnabled() && $environmentStore.cloud}
|
||||
<FreeFooter />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Preview and dev tools utilities -->
|
||||
|
|
|
|||
34
packages/client/src/components/FreeFooter.svelte
Normal file
34
packages/client/src/components/FreeFooter.svelte
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script>
|
||||
import { Link } from "@budibase/bbui"
|
||||
</script>
|
||||
|
||||
<div class="free-footer">
|
||||
<Link
|
||||
href="https://www.budibase.com/?utm_source=budibase-apps-public-screens&utm_medium=badge&utm_campaign=made-in-budibase"
|
||||
target="_blank"
|
||||
>
|
||||
Made with <span>Budibase</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.free-footer {
|
||||
flex: 0 0 auto;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--spectrum-global-color-gray-300);
|
||||
background: var(--spectrum-alias-background-color-primary);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.free-footer :global(.spectrum-Link) {
|
||||
text-decoration: none;
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
transition: color 130ms ease-out;
|
||||
}
|
||||
.free-footer :global(.spectrum-Link):hover {
|
||||
color: var(--spectrum-global-color-blue-400);
|
||||
}
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<script>
|
||||
import { Link } from "@budibase/bbui"
|
||||
</script>
|
||||
|
||||
<Link
|
||||
href="https://www.budibase.com/?utm_source=budibase-apps-public-screens&utm_medium=badge&utm_campaign=made-in-budibase"
|
||||
target="_blank"
|
||||
>
|
||||
<div>
|
||||
<img src="https://i.imgur.com/Xhdt1YP.png" alt="Budibase" />
|
||||
<p>Made with Budibase</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<style>
|
||||
div {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--spectrum-alias-background-color-primary);
|
||||
z-index: 999999 !important;
|
||||
visibility: visible !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid;
|
||||
border-color: var(--spectrum-global-color-gray-300) !important;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-decoration: none;
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,8 +5,6 @@
|
|||
import { FieldTypes } from "constants"
|
||||
import active from "svelte-spa-router/active"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
import FreeLogo from "../FreeLogo.svelte"
|
||||
import licensing from "../../licensing"
|
||||
|
||||
const sdk = getContext("sdk")
|
||||
const {
|
||||
|
|
@ -15,7 +13,6 @@
|
|||
linkable,
|
||||
builderStore,
|
||||
currentRole,
|
||||
environmentStore,
|
||||
sidePanelStore,
|
||||
} = sdk
|
||||
const component = getContext("component")
|
||||
|
|
@ -237,11 +234,6 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !$builderStore.inBuilder && licensing.logoEnabled() && $environmentStore.cloud}
|
||||
<FreeLogo />
|
||||
{/if}
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="main size--{pageWidthClass}">
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
|
||||
const { linkable, styleable, builderStore } = getContext("sdk")
|
||||
const { linkable, styleable, builderStore, sidePanelStore } =
|
||||
getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
export let url
|
||||
|
|
@ -103,6 +104,7 @@
|
|||
class:italic
|
||||
class:underline
|
||||
class="align--{align || 'left'} size--{size || 'M'}"
|
||||
on:click={sidePanelStore.actions.close}
|
||||
>
|
||||
{componentText}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -221,9 +221,17 @@
|
|||
return fieldInfo
|
||||
},
|
||||
validate: () => {
|
||||
return fields
|
||||
.filter(field => get(field).step === get(currentStep))
|
||||
.every(field => get(field).fieldApi.validate())
|
||||
const stepFields = fields.filter(
|
||||
field => get(field).step === get(currentStep)
|
||||
)
|
||||
// We want to validate every field (even if validation fails early) to
|
||||
// ensure that all fields are populated with errors if invalid
|
||||
let valid = true
|
||||
stepFields.forEach(field => {
|
||||
const fieldValid = get(field).fieldApi.validate()
|
||||
valid = valid && fieldValid
|
||||
})
|
||||
return valid
|
||||
},
|
||||
reset: () => {
|
||||
// Reset the form by resetting each individual field
|
||||
|
|
@ -275,7 +283,7 @@
|
|||
|
||||
// Skip if the value is the same
|
||||
if (!skipCheck && fieldState.value === value) {
|
||||
return false
|
||||
return true
|
||||
}
|
||||
|
||||
// Update field state
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@
|
|||
}
|
||||
|
||||
onMount(() => {
|
||||
resizeObserver.observe(document.getElementById("clip-root"))
|
||||
resizeObserver.observe(document.getElementById("app-body"))
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
resizeObserver.unobserve(document.getElementById("clip-root"))
|
||||
resizeObserver.unobserve(document.getElementById("app-body"))
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue