pr comments and styling
This commit is contained in:
parent
c4a3d94db6
commit
ea57fe3fad
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
import "@spectrum-css/typography/dist/index-vars.css"
|
import "@spectrum-css/typography/dist/index-vars.css"
|
||||||
|
|
||||||
export let size = "M"
|
export let size: "XS" | "S" | "M" | "L" | "XL" = "M"
|
||||||
export let serif = false
|
export let serif: boolean = false
|
||||||
export let weight = null
|
export let weight: string | null = null
|
||||||
export let textAlign = null
|
export let textAlign: string | null = null
|
||||||
export let color = null
|
export let color: string | null = null
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p
|
<p
|
||||||
|
|
|
@ -1,12 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import {
|
import { Input, Label } from "@budibase/bbui"
|
||||||
Input,
|
|
||||||
Icon,
|
|
||||||
Body,
|
|
||||||
AbsTooltip,
|
|
||||||
TooltipPosition,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import { previewStore, selectedScreen } from "@/stores/builder"
|
import { previewStore, selectedScreen } from "@/stores/builder"
|
||||||
import type { ComponentContext } from "@budibase/types"
|
import type { ComponentContext } from "@budibase/types"
|
||||||
|
|
||||||
|
@ -14,6 +8,8 @@
|
||||||
|
|
||||||
let testValue: string | undefined
|
let testValue: string | undefined
|
||||||
|
|
||||||
|
$: routeParams = baseRoute.match(/:[a-zA-Z]+/g) || []
|
||||||
|
$: hasUrlParams = routeParams.length > 0
|
||||||
$: placeholder = getPlaceholder(baseRoute)
|
$: placeholder = getPlaceholder(baseRoute)
|
||||||
$: baseInput = createBaseInput(baseRoute)
|
$: baseInput = createBaseInput(baseRoute)
|
||||||
$: updateTestValueFromContext($previewStore.selectedComponentContext)
|
$: updateTestValueFromContext($previewStore.selectedComponentContext)
|
||||||
|
@ -73,18 +69,10 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="url-test-section">
|
{#if hasUrlParams}
|
||||||
|
<div class="url-test-section">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<Body size="XS">URL Variable Testing</Body>
|
<Label size="M">Set temporary URL variables for design preview</Label>
|
||||||
<AbsTooltip
|
|
||||||
text="Test how your screen behaves with different URL parameters. Enter values in the format shown in the placeholder below."
|
|
||||||
position={TooltipPosition.Top}
|
|
||||||
noWrap
|
|
||||||
>
|
|
||||||
<div class="icon">
|
|
||||||
<Icon name="InfoOutline" size="S" disabled hoverable />
|
|
||||||
</div>
|
|
||||||
</AbsTooltip>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="url-test-container">
|
<div class="url-test-container">
|
||||||
<div class="base-input">
|
<div class="base-input">
|
||||||
|
@ -94,7 +82,8 @@
|
||||||
<Input value={testValue} on:change={onVariableChange} {placeholder} />
|
<Input value={testValue} on:change={onVariableChange} {placeholder} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.url-test-section {
|
.url-test-section {
|
||||||
|
@ -115,7 +104,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.base-input {
|
.base-input {
|
||||||
width: 40%;
|
width: 98px;
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue