Move DetailSummary and update to use Spectrum Icon
This commit is contained in:
parent
b5fde37c39
commit
5eaae47ec0
3 changed files with 11 additions and 13 deletions
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import Icon from '../Icon/Icon.svelte'
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
@ -7,8 +8,6 @@
|
||||||
export let name,
|
export let name,
|
||||||
show = false
|
show = false
|
||||||
|
|
||||||
const capitalize = name => name[0].toUpperCase() + name.slice(1)
|
|
||||||
|
|
||||||
const onHeaderClick = () => {
|
const onHeaderClick = () => {
|
||||||
show = !show
|
show = !show
|
||||||
if (show) {
|
if (show) {
|
||||||
|
@ -19,9 +18,9 @@
|
||||||
|
|
||||||
<div class="property-group-container" class:thin>
|
<div class="property-group-container" class:thin>
|
||||||
<div class="property-group-name" on:click={onHeaderClick}>
|
<div class="property-group-name" on:click={onHeaderClick}>
|
||||||
<div class:thin class="name">{capitalize(name)}</div>
|
<div class:thin class="name">{name}</div>
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<i class={show ? 'ri-arrow-down-s-fill' : 'ri-arrow-left-s-fill'} />
|
<Icon s name={show ? 'Remove' : 'Add'} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="property-panel" class:show>
|
<div class="property-panel" class:show>
|
||||||
|
@ -57,6 +56,7 @@
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
text-transform: capitalize;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.name.thin {
|
.name.thin {
|
|
@ -22,7 +22,7 @@ export { default as Toggle } from "./Form/Toggle.svelte"
|
||||||
export { default as RadioGroup } from "./Form/RadioGroup.svelte"
|
export { default as RadioGroup } from "./Form/RadioGroup.svelte"
|
||||||
export { default as Checkbox } from "./Form/Checkbox.svelte"
|
export { default as Checkbox } from "./Form/Checkbox.svelte"
|
||||||
export { default as Home } from "./Links/Home.svelte"
|
export { default as Home } from "./Links/Home.svelte"
|
||||||
export { default as DetailSummary } from "./List/Items/DetailSummary.svelte"
|
export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
|
||||||
export { default as DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte"
|
export { default as DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte"
|
||||||
export { default as Popover } from "./Popover/Popover.svelte"
|
export { default as Popover } from "./Popover/Popover.svelte"
|
||||||
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
|
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
import AppList from "components/start/AppList.svelte"
|
import AppList from "components/start/AppList.svelte"
|
||||||
import { get } from "builderStore/api"
|
import { get } from "builderStore/api"
|
||||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||||
import { Button, Heading, Modal, Spacer, Tags, Tag } from "@budibase/bbui"
|
import { Button, Heading, Modal, Spacer, ButtonGroup } from "@budibase/bbui"
|
||||||
import TemplateList from "components/start/TemplateList.svelte"
|
import TemplateList from "components/start/TemplateList.svelte"
|
||||||
import analytics from "analytics"
|
import analytics from "analytics"
|
||||||
import Banner from "/assets/orange-landscape.png"
|
import Banner from "/assets/orange-landscape.png"
|
||||||
|
@ -75,15 +75,13 @@
|
||||||
<!-- <TemplateList onSelect={selectTemplate} /> -->
|
<!-- <TemplateList onSelect={selectTemplate} /> -->
|
||||||
|
|
||||||
<AppList />
|
<AppList />
|
||||||
|
|
||||||
<Tags>
|
|
||||||
<Tag>Test</Tag>
|
|
||||||
<Tag>Avatar</Tag>
|
|
||||||
<Tag>Error</Tag>
|
|
||||||
<Tag>Disabled</Tag>
|
|
||||||
</Tags>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ButtonGroup>
|
||||||
|
<Button secondary>Test</Button>
|
||||||
|
<Button cta>Test</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
<Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
|
<Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
|
||||||
<CreateAppModal {hasKey} {template} />
|
<CreateAppModal {hasKey} {template} />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
Loading…
Reference in a new issue