MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: move DetailSummary component in properties pane to bbui

This commit is contained in:
kevmodrome 2020-06-09 11:00:50 +02:00
parent df2cc03e91
commit d640f90e7b
2 changed files with 13 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/package.json
View File

@ -39,7 +39,7 @@
}, },
"dependencies": { "dependencies": {
"@beyonk/svelte-notifications": "^2.0.3", "@beyonk/svelte-notifications": "^2.0.3",
"@budibase/bbui": "^0.3.7", "@budibase/bbui": "^1.1.1",
"@budibase/client": "^0.0.32", "@budibase/client": "^0.0.32",
"@nx-js/compiler-util": "^2.0.0", "@nx-js/compiler-util": "^2.0.0",
"codemirror": "^5.51.0", "codemirror": "^5.51.0",

85
packages/builder/src/components/userInterface/PropertyGroup.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import { excludeProps } from "./propertyCategories.js" import { excludeProps } from "./propertyCategories.js"
import PropertyControl from "./PropertyControl.svelte" import PropertyControl from "./PropertyControl.svelte"
import { DetailSummary } from "@budibase/bbui"
export let name = "" export let name = ""
export let styleCategory = "normal" export let styleCategory = "normal"
@ -8,79 +9,17 @@
export let componentInstance = {} export let componentInstance = {}
export let onStyleChanged = () => {} export let onStyleChanged = () => {}
export let show = false
const capitalize = name => name[0].toUpperCase() + name.slice(1)
$: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
$: style = componentInstance["_styles"][styleCategory] || {} $: style = componentInstance["_styles"][styleCategory] || {}
</script> </script>
<div class="property-group-container"> <DetailSummary {name}>
<div class="property-group-name" on:click={() => (show = !show)}> {#each properties as props}
<div class="icon"> <PropertyControl
<i class={icon} /> label={props.label}
</div> control={props.control}
<div class="name">{capitalize(name)}</div> key={props.key}
</div> value={style[props.key]}
<div class="property-panel" class:show> onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
props={{ ...excludeProps(props, ['control', 'label']) }} />
{#each properties as props} {/each}
<PropertyControl </DetailSummary>
label={props.label}
control={props.control}
key={props.key}
value={style[props.key]}
onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
props={{ ...excludeProps(props, ['control', 'label']) }} />
{/each}
</div>
</div>
<style>
.property-group-container {
display: flex;
flex-direction: column;
height: auto;
background: var(--grey-light);
margin: 0px 0px 4px 0px;
padding: 8px 12px;
justify-content: center;
border-radius: 4px;
}
.property-group-name {
cursor: pointer;
display: flex;
flex-flow: row nowrap;
}
.name {
flex: 1;
text-align: left;
padding-top: 2px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.14px;
color: var(--ink);
}
.icon {
flex: 0 0 20px;
text-align: center;
}
.property-panel {
/* height: 0px;
overflow: hidden; */
display: none;
}
.show {
/* overflow: auto;
height: auto; */
display: flex;
flex-direction: column;
flex: 1;
}
</style>