forked from tsai/budibase
Andrew Kingston
6 years ago
71 changed files with 97 additions and 201 deletions
@ -1,5 +1,5 @@ |
|||||
<script> |
<script> |
||||
import GenericBindingPopover from "./GenericBindingPopover.svelte" |
import GenericBindingPopover from "../../userInterface/PropertiesPanel/GenericBindingPopover.svelte" |
||||
import { Input, Icon } from "@budibase/bbui" |
import { Input, Icon } from "@budibase/bbui" |
||||
|
|
||||
export let bindings = [] |
export let bindings = [] |
||||
@ -1,6 +1,6 @@ |
|||||
<script> |
<script> |
||||
import { TextArea, DetailSummary, Button } from "@budibase/bbui" |
import { TextArea, DetailSummary, Button } from "@budibase/bbui" |
||||
import PropertyGroup from "./PropertyGroup.svelte" |
import PropertyGroup from "./PropertyPanelControls/PropertyGroup.svelte" |
||||
import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup" |
import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup" |
||||
import { allStyles } from "./componentStyles" |
import { allStyles } from "./componentStyles" |
||||
|
|
||||
@ -0,0 +1,7 @@ |
|||||
|
<script> |
||||
|
import Checkbox from "components/common/Checkbox.svelte" |
||||
|
|
||||
|
export let value |
||||
|
</script> |
||||
|
|
||||
|
<Checkbox checked={value} on:change /> |
||||
@ -0,0 +1,7 @@ |
|||||
|
<script> |
||||
|
import Colorpicker from "@budibase/colorpicker" |
||||
|
|
||||
|
export let value |
||||
|
</script> |
||||
|
|
||||
|
<Colorpicker value={value || '#000'} on:change /> |
||||
@ -0,0 +1,5 @@ |
|||||
|
<script> |
||||
|
import TableViewFieldSelect from "./TableViewFieldSelect.svelte" |
||||
|
</script> |
||||
|
|
||||
|
<TableViewFieldSelect {...$$props} multiselect /> |
||||
@ -1,7 +1,7 @@ |
|||||
<script> |
<script> |
||||
import { onMount } from "svelte" |
import { onMount } from "svelte" |
||||
import Portal from "svelte-portal" |
import Portal from "svelte-portal" |
||||
import { buildStyle } from "../../../helpers.js" |
import { buildStyle } from "../../../../helpers.js" |
||||
|
|
||||
export let options = [] |
export let options = [] |
||||
export let value = "" |
export let value = "" |
||||
@ -1,8 +1,8 @@ |
|||||
<script> |
<script> |
||||
import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui" |
import { Icon, DropdownMenu, Heading } from "@budibase/bbui" |
||||
import { createEventDispatcher } from "svelte" |
import { createEventDispatcher } from "svelte" |
||||
import { store, backendUiStore, currentAsset } from "builderStore" |
import { store, backendUiStore, currentAsset } from "builderStore" |
||||
import fetchBindableProperties from "../../../builderStore/fetchBindableProperties" |
import fetchBindableProperties from "builderStore/fetchBindableProperties" |
||||
|
|
||||
const dispatch = createEventDispatcher() |
const dispatch = createEventDispatcher() |
||||
let anchorRight, dropdownRight |
let anchorRight, dropdownRight |
||||
@ -1,78 +0,0 @@ |
|||||
<script> |
|
||||
export let meta = [] |
|
||||
export let size = "" |
|
||||
export let values = [] |
|
||||
export let propertyName |
|
||||
export let onStyleChanged = () => {} |
|
||||
|
|
||||
let selectedLayoutValues = values.map(v => v) |
|
||||
|
|
||||
$: onStyleChanged(selectedLayoutValues) |
|
||||
|
|
||||
const PROPERTY_OPTIONS = { |
|
||||
Direction: { |
|
||||
vertical: ["column", "ri-arrow-up-down-line"], |
|
||||
horizontal: ["row", "ri-arrow-left-right-line"], |
|
||||
}, |
|
||||
Align: { |
|
||||
left: ["flex-start", "ri-layout-bottom-line"], |
|
||||
center: ["center", "ri-layout-row-line"], |
|
||||
right: ["flex-end", "ri-layout-top-line"], |
|
||||
space: ["space-between", "ri-space"], |
|
||||
}, |
|
||||
Justify: { |
|
||||
left: ["flex-start", "ri-layout-left-line"], |
|
||||
center: ["center", "ri-layout-column-line"], |
|
||||
right: ["flex-end", "ri-layout-right-line"], |
|
||||
space: ["space-between", "ri-space"], |
|
||||
}, |
|
||||
} |
|
||||
|
|
||||
$: propertyChoices = Object.entries(PROPERTY_OPTIONS[propertyName]) |
|
||||
</script> |
|
||||
|
|
||||
<div class="inputs {size}"> |
|
||||
{#each meta as { placeholder }, i} |
|
||||
{#each propertyChoices as [displayName, [cssPropValue, icon]]} |
|
||||
<button |
|
||||
class:selected={cssPropValue === selectedLayoutValues[i]} |
|
||||
on:click={() => { |
|
||||
const newPropertyValue = cssPropValue === selectedLayoutValues[i] ? '' : cssPropValue |
|
||||
selectedLayoutValues[i] = newPropertyValue |
|
||||
}}> |
|
||||
<i class={icon} /> |
|
||||
</button> |
|
||||
{/each} |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.selected { |
|
||||
color: var(--blue); |
|
||||
background: var(--grey-1); |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
button { |
|
||||
cursor: pointer; |
|
||||
outline: none; |
|
||||
border: none; |
|
||||
border-radius: 3px; |
|
||||
|
|
||||
min-width: 1.6rem; |
|
||||
min-height: 1.6rem; |
|
||||
|
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
|
||||
font-size: 1.2rem; |
|
||||
font-weight: 500; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
.inputs { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,5 +0,0 @@ |
|||||
<script> |
|
||||
import TableViewFieldSelect from "./PropertyPanelControls/TableViewFieldSelect.svelte" |
|
||||
</script> |
|
||||
|
|
||||
<TableViewFieldSelect {...$$props} multiselect /> |
|
||||
Loading…
Reference in new issue