mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
6 years ago
71 changed files with 97 additions and 201 deletions
@ -1,5 +1,5 @@ |
|||
<script> |
|||
import GenericBindingPopover from "./GenericBindingPopover.svelte" |
|||
import GenericBindingPopover from "../../userInterface/PropertiesPanel/GenericBindingPopover.svelte" |
|||
import { Input, Icon } from "@budibase/bbui" |
|||
|
|||
export let bindings = [] |
|||
@ -1,6 +1,6 @@ |
|||
<script> |
|||
import { TextArea, DetailSummary, Button } from "@budibase/bbui" |
|||
import PropertyGroup from "./PropertyGroup.svelte" |
|||
import PropertyGroup from "./PropertyPanelControls/PropertyGroup.svelte" |
|||
import FlatButtonGroup from "./PropertyPanelControls/FlatButtonGroup" |
|||
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> |
|||
import { onMount } from "svelte" |
|||
import Portal from "svelte-portal" |
|||
import { buildStyle } from "../../../helpers.js" |
|||
import { buildStyle } from "../../../../helpers.js" |
|||
|
|||
export let options = [] |
|||
export let value = "" |
|||
@ -1,8 +1,8 @@ |
|||
<script> |
|||
import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui" |
|||
import { Icon, DropdownMenu, Heading } from "@budibase/bbui" |
|||
import { createEventDispatcher } from "svelte" |
|||
import { store, backendUiStore, currentAsset } from "builderStore" |
|||
import fetchBindableProperties from "../../../builderStore/fetchBindableProperties" |
|||
import fetchBindableProperties from "builderStore/fetchBindableProperties" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
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