1
0
Fork 0
mirror of synced 2024-06-17 09:55:09 +12:00

Add in-preview editing of buttons and add settings bar for buttons

This commit is contained in:
Andrew Kingston 2021-10-28 15:29:48 +01:00
parent d3839f2f91
commit 232957f610
6 changed files with 45 additions and 33 deletions

View file

@ -245,7 +245,9 @@
"name": "Button",
"description": "A basic html button that is ready for styling",
"icon": "Button",
"editable": true,
"illegalChildren": ["section"],
"showSettingsBar": true,
"settings": [
{
"type": "text",
@ -254,6 +256,7 @@
},
{
"type": "select",
"showInBar": true,
"label": "Variant",
"key": "type",
"options": [
@ -282,6 +285,7 @@
{
"type": "select",
"label": "Size",
"showInBar": true,
"key": "size",
"options": [
{
@ -306,11 +310,18 @@
{
"type": "boolean",
"label": "Quiet",
"key": "quiet"
"key": "quiet",
"showInBar": true,
"barIcon": "VisibilityOff",
"barTitle": "Quiet variant",
"barSeparator": false
},
{
"type": "boolean",
"label": "Disabled",
"showInBar": true,
"barIcon": "NoEdit",
"barTitle": "Disable button",
"key": "disabled"
},
{

View file

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import "@spectrum-css/button/dist/index-vars.css"
const { styleable } = getContext("sdk")
const { styleable, builderStore } = getContext("sdk")
const component = getContext("component")
export let disabled = false
@ -11,16 +11,35 @@
export let size = "M"
export let type = "primary"
export let quiet = false
let node
$: $component.editing && node?.focus()
$: componentText = getComponentText(text, $builderStore, $component)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || " "
}
return text || componentState.name || "Placeholder text"
}
const updateText = e => {
builderStore.actions.updateProp("text", e.target.textContent)
}
</script>
<button
class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
class:spectrum-Button--quiet={quiet}
disabled={disabled || false}
{disabled}
use:styleable={$component.styles}
on:click={onClick}
class:editing={$component.editing}
contenteditable={$component.editing}
on:blur={$component.editing ? updateText : null}
>
{text || ""}
{componentText}
</button>
<style>

View file

@ -47,17 +47,12 @@
// Convert contenteditable HTML to text and save
const updateText = e => {
const html = e.target.innerHTML
const sanitized = html
.replace(/<\/div><div>/gi, "\n")
.replace(/<div>/gi, "")
.replace(/<\/div>/gi, "")
.replace(/<br>/gi, "")
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
builderStore.actions.updateProp("text", sanitized)
}
</script>
<div
<h1
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles}
@ -69,10 +64,10 @@
on:blur={$component.editing ? updateText : null}
>
{componentText}
</div>
</h1>
<style>
div {
h1 {
white-space: pre-wrap;
font-weight: 600;
}

View file

@ -46,15 +46,8 @@
}
}
// Convert contenteditable HTML to text and save
const updateText = e => {
const html = e.target.innerHTML
const sanitized = html
.replace(/<\/div><div>/gi, "\n")
.replace(/<div>/gi, "")
.replace(/<\/div>/gi, "")
.replace(/<br>/gi, "")
builderStore.actions.updateProp("text", sanitized)
builderStore.actions.updateProp("text", e.target.textContent)
}
</script>
@ -106,7 +99,6 @@
div {
color: var(--spectrum-alias-text-color);
transition: color 130ms ease-in-out;
white-space: pre-wrap;
}
a:not(.placeholder):hover {
color: var(--spectrum-link-primary-m-text-color-hover) !important;

View file

@ -46,17 +46,12 @@
// Convert contenteditable HTML to text and save
const updateText = e => {
const html = e.target.innerHTML
const sanitized = html
.replace(/<\/div><div>/gi, "\n")
.replace(/<div>/gi, "")
.replace(/<\/div>/gi, "")
.replace(/<br>/gi, "")
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
builderStore.actions.updateProp("text", sanitized)
}
</script>
<div
<p
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles}
@ -68,10 +63,10 @@
on:blur={$component.editing ? updateText : null}
>
{componentText}
</div>
</p>
<style>
div {
p {
display: inline-block;
white-space: pre-wrap;
margin: 0;

View file

@ -110,7 +110,7 @@
prop={setting.key}
value={option.value}
icon={option.barIcon}
title={option.barTitle}
title={option.barTitle || option.label}
/>
{/each}
{:else}
@ -124,7 +124,7 @@
<SettingsButton
prop={setting.key}
icon={setting.barIcon}
title={setting.barTitle}
title={setting.barTitle || setting.label}
bool
/>
{:else if setting.type === "color"}