CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-02 01:56:57 +13:00
Code Issues Projects Releases Wiki Activity

style abstraction

Browse source
This commit is contained in:
Martin McKeaveney 2020-02-24 15:00:48 +00:00
parent 0b2a046424
commit f5becf920b
28 changed files with 260 additions and 267 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/builder/src/App.svelte
View file

@ -5,6 +5,7 @@
import { store, initialise } from "./builderStore"
import { onMount } from "svelte"
import IconButton from "./common/IconButton.svelte"
import Spinner from "./common/Spinner.svelte"
let init = initialise()
</script>
@ -12,9 +13,9 @@
<main>
{#await init}
<h1>loading</h1>
<div class="spinner-container">
<Spinner />
</div>
{:then result}
{#if $store.hasAppPackage}
@ -52,4 +53,13 @@
bottom: 25px;
right: 25px;
}
.spinner-container {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>

9
packages/builder/src/accessLevels/AccessLevelView.svelte
View file

@ -4,6 +4,7 @@
import Checkbox from "../common/Checkbox.svelte"
import ButtonGroup from "../common/ButtonGroup.svelte"
import Button from "../common/Button.svelte"
import ActionButton from "../common/ActionButton.svelte"
import { validateAccessLevels } from "../common/core"
import ErrorsBox from "../common/ErrorsBox.svelte"
@ -64,7 +65,7 @@
<form class="uk-form-horizontal">
<Textbox label="Name" bind:text={clonedLevel.name} />
<Textbox label="Access Level Name" bind:text={clonedLevel.name} />
{#each permissionMatrix as permission}
<div>
@ -78,10 +79,10 @@
</form>
<ButtonGroup style="margin-top: 10px">
<Button color="primary" grouped on:click={save}>Save</Button>
<Button color="secondary" grouped on:click={() => onFinished()}>
<ActionButton primary grouped on:click={save}>Save</ActionButton>
<ActionButton alert grouped on:click={() => onFinished()}>
Cancel
</Button>
</ActionButton>
</ButtonGroup>
</div>

6
packages/builder/src/accessLevels/AccessLevelsRoot.svelte
View file

@ -1,6 +1,7 @@
<script>
import ButtonGroup from "../common/ButtonGroup.svelte"
import Button from "../common/Button.svelte"
import ActionButton from "../common/ActionButton.svelte"
import { store } from "../builderStore"
import { generateFullPermissions, getNewAccessLevel } from "../common/core"
import getIcon from "../common/icon"
@ -47,11 +48,10 @@
</script>
<div class="root">
<ButtonGroup>
<Button grouped color="secondary" on:click={createNewLevel}>
<ActionButton primary on:click={createNewLevel}>
Create New Access Level
</Button>
</ActionButton>
</ButtonGroup>
{#if $store.accessLevels}

40
packages/builder/src/actionsAndTriggers/ActionView.svelte
View file

@ -1,6 +1,7 @@
<script>
import Textbox from "../common/Textbox.svelte"
import Button from "../common/Button.svelte"
import ActionButton from "../common/ActionButton.svelte"
import ButtonGroup from "../common/ButtonGroup.svelte"
import { cloneDeep, filter, keys, map, isUndefined } from "lodash/fp"
import ErrorsBox from "../common/ErrorsBox.svelte"
@ -10,16 +11,15 @@
export let action
export let onFinished = action => {}
export let allActions
export let isNew = true
let optKey = ""
let optValue = ""
let clonedAction = cloneDeep(action)
let initialOptions = pipe(action.initialOptions, [
keys,
map(k => ({ key: k, value: action.initialOptions[k] })),
])
let initialOptions = pipe(
action.initialOptions,
[keys, map(k => ({ key: k, value: action.initialOptions[k] }))]
)
let errors = []
const addNewOption = () => {
@ -44,17 +44,26 @@
const removeOption = opt => {
if (opt) {
delete clonedAction.initialOptions[opt.key]
initialOptions = pipe(initialOptions, [filter(o => o.key !== opt.key)])
initialOptions = pipe(
initialOptions,
[filter(o => o.key !== opt.key)]
)
}
}
const save = () => {
const newActionsList = [
...pipe(allActions, [filter(a => a !== action)]),
...pipe(
allActions,
[filter(a => a !== action)]
),
clonedAction,
]
errors = pipe(newActionsList, [validateActions, map(e => e.error)])
errors = pipe(
newActionsList,
[validateActions, map(e => e.error)]
)
if (errors.length === 0) onFinished(clonedAction)
}
@ -89,9 +98,7 @@
class="uk-input uk-width-1-4 uk-margin-right"
placeholder="value"
bind:value={optValue} />
<Button color="primary-outline uk-width-1-4" on:click={addNewOption}>
Add
</Button>
<ActionButton primary on:click={addNewOption}>Add</ActionButton>
</div>
<div style="margin-top: 10px">
{#each initialOptions as option}
@ -107,11 +114,12 @@
</div>
</div>
<ButtonGroup>
<Button color="secondary" grouped on:click={save}>Save</Button>
<Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
</ButtonGroup>
<div class="uk-modal-footer uk-text-right">
<ButtonGroup>
<ActionButton primary grouped on:click={save}>Save</ActionButton>
<ActionButton alert grouped on:click={cancel}>Cancel</ActionButton>
</ButtonGroup>
</div>
</div>
<style>

7
packages/builder/src/actionsAndTriggers/Actions.svelte
View file

@ -43,7 +43,7 @@
}
</script>
<h3 class="title">Actions</h3>
<h3 class="budibase__title--3">Actions</h3>
{#if actionsArray}
<table class="fields-table uk-table uk-table-small uk-table-striped">
@ -99,11 +99,6 @@
color: var(--secondary75);
}
.title {
margin: 3rem 0rem 0rem 0rem;
font-weight: 700;
}
.table-content {
font-weight: 500;
font-size: 0.9rem;

10
packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte
View file

@ -2,6 +2,7 @@
import getIcon from "../common/icon"
import { store } from "../builderStore"
import Button from "../common/Button.svelte"
import ActionButton from "../common/ActionButton.svelte"
import ButtonGroup from "../common/ButtonGroup.svelte"
import Actions from "./Actions.svelte"
import Triggers from "./Triggers.svelte"
@ -83,12 +84,12 @@
<div class="root">
<div class="actions-header">
<ButtonGroup>
<Button color="secondary" grouped on:click={newAction}>
<ActionButton color="secondary" grouped on:click={newAction}>
Create New Action
</Button>
<Button color="tertiary" grouped on:click={newTrigger}>
</ActionButton>
<ActionButton color="tertiary" grouped on:click={newTrigger}>
Create New Trigger
</Button>
</ActionButton>
</ButtonGroup>
</div>
@ -121,6 +122,7 @@
.actions-header {
flex: 0 1 auto;
margin-bottom: 10px;
}
.node-view {

17
packages/builder/src/actionsAndTriggers/TriggerView.svelte
View file

@ -1,6 +1,7 @@
<script>
import Textbox from "../common/Textbox.svelte"
import Button from "../common/Button.svelte"
import ActionButton from "../common/ActionButton.svelte"
import Dropdown from "../common/Dropdown.svelte"
import ButtonGroup from "../common/ButtonGroup.svelte"
import CodeArea from "../common/CodeArea.svelte"
@ -22,7 +23,10 @@
let cancel = () => onFinished()
let save = () => {
const newTriggersList = [
...pipe(allTriggers, [filter(t => t !== trigger)]),
...pipe(
allTriggers,
[filter(t => t !== trigger)]
),
clonedTrigger,
]
@ -59,11 +63,12 @@
</form>
<ButtonGroup>
<Button color="primary" grouped on:click={save}>Save</Button>
<Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
</ButtonGroup>
<div class="uk-modal-footer uk-text-right">
<ButtonGroup>
<ActionButton primary on:click={save}>Save</ActionButton>
<ActionButton alert on:click={cancel}>Cancel</ActionButton>
</ButtonGroup>
</div>
</div>
<style>

2
packages/builder/src/actionsAndTriggers/Triggers.svelte
View file

@ -23,7 +23,7 @@
}
</script>
<h3 class="title">Triggers</h3>
<h3 class="budibase__title--3">Triggers</h3>
{#if $store.triggers}
<table class="fields-table uk-table uk-table-small uk-table-striped">

6
packages/builder/src/common/ActionButton.svelte
View file

@ -29,12 +29,12 @@
}
.button {
font-size: 18px;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
border: none;
width: 167px;
height: 64px;
width: 120px;
height: 45px;
}
.button:hover {

17
packages/builder/src/common/ButtonGroup.svelte
View file

@ -8,18 +8,9 @@
<style>
.root {
display: flex;
}
.root:last-child {
border-radius: 0 var(--borderradius) var(--borderradius) 0;
}
.root:first-child {
border-radius: var(--borderradius) 0 0 var(--borderradius);
}
.root:not(:first-child):not(:last-child) {
border-radius: 0;
display: grid;
grid-auto-flow: column;
grid-gap: 5px;
width: 10%;
}
</style>

2
packages/builder/src/common/CodeArea.svelte
View file

@ -4,7 +4,7 @@
export let label = ""
</script>
<div>{label}</div>
<div class="header">{label}</div>
<textarea class="uk-textarea" bind:value={text} />
<style>

64
packages/builder/src/common/ConfirmDialog.svelte
View file

@ -1,41 +1,40 @@
<script>
import Button from "./Button.svelte"
import ButtonGroup from "./ButtonGroup.svelte"
import UIkit from "uikit"
import Button from "./Button.svelte"
import ActionButton from "./ActionButton.svelte"
import ButtonGroup from "./ButtonGroup.svelte"
import UIkit from "uikit"
export let title=""
export let body=""
export let okText = "OK"
export let cancelText = "Cancel"
export let onOk = ()=> {}
export let onCancel = ()=> {}
export let title = ""
export let body = ""
export let okText = "OK"
export let cancelText = "Cancel"
export let onOk = () => {}
export let onCancel = () => {}
export const show = () => {
UIkit.modal(theModal).show()
}
export const show = () => {
UIkit.modal(theModal).show()
}
export const hide = () => {
UIkit.modal(theModal).hide()
}
export const hide = () => {
UIkit.modal(theModal).hide()
}
let theModal;
let theModal
const cancel = () => {
hide()
onCancel()
}
const ok = () => {
hide()
onOk()
}
const cancel = () => {
hide()
onCancel()
}
const ok = () => {
hide()
onOk()
}
</script>
<div id="my-id" uk-modal bind:this={theModal}>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close></button>
<button class="uk-modal-close-default" type="button" uk-close />
<div class="uk-modal-header">
<h2 class="uk-modal-title">{title}</h2>
</div>
@ -44,14 +43,9 @@ const ok = () => {
</div>
<div class="uk-modal-footer">
<ButtonGroup>
<Button grouped color="primary" on:click={ok}>
{okText}
</Button>
<Button grouped color="secondary" on:click={cancel}>
{cancelText}
</Button>
</ButtonGroup>
<ActionButton primary on:click={ok}>{okText}</ActionButton>
<ActionButton error on:click={cancel}>{cancelText}</ActionButton>
</ButtonGroup>
</div>
</div>
</div>

9
packages/builder/src/common/Dropdown.svelte
View file

@ -1,5 +1,6 @@
<script>
import { createEventDispatcher } from "svelte"
import Select from "../common/Select.svelte";
export let selected
export let label
@ -17,7 +18,7 @@
<label class="uk-form-label">{label}</label>
<div class="uk-form-controls">
{#if multiple}
<select
<Select
class="uk-select uk-form-width-{width} uk-form-{size}"
multiple
bind:value={selected}
@ -27,9 +28,9 @@
{!textMember ? option : textMember(option)}
</option>
{/each}
</select>
</Select>
{:else}
<select
<Select
class="uk-select uk-form-width-{width} uk-form-{size}"
bind:value={selected}
on:change>
@ -38,7 +39,7 @@
{!textMember ? option : textMember(option)}
</option>
{/each}
</select>
</Select>
{/if}
</div>
</div>

2
packages/builder/src/common/DropdownButton.svelte
View file

@ -17,7 +17,7 @@
class="dropdown-content"
style="display: {isDroppedDown ? 'inline-block' : 'none'}">
{#each actions as action}
<div class="action-row" on:click={action.onclick}>{action.label}</div>
<div class="budibase__nav-item" on:click={action.onclick}>{action.label}</div>
{/each}
</div>

1
packages/builder/src/common/Modal.svelte
View file

@ -1,5 +1,6 @@
<script>
import UIkit from "uikit"
import ActionButton from "../common/ActionButton.svelte"
export let isOpen = false
export let onClosed = () => {}

5
packages/builder/src/common/Spinner.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
export let ratio = "4.5"
</script>
<span uk-spinner={`ratio: ${ratio}`} />

2
packages/builder/src/common/Textbox.svelte
View file

@ -13,7 +13,7 @@
<label class="uk-form-label">{label}</label>
<div class="uk-form-controls">
<input
class="uk-input uk-form-width-{width} uk-form-{size}"
class="budibase__input"
class:uk-form-danger={hasError}
on:change
bind:value={text}

26
packages/builder/src/database/ActionsHeader.svelte
View file

@ -1,5 +1,6 @@
<script>
import Button from "../common/Button.svelte"
import ActionButton from "../common/ActionButton.svelte"
import ButtonGroup from "../common/ButtonGroup.svelte"
import { store } from "../builderStore"
import Modal from "../common/Modal.svelte"
@ -20,14 +21,14 @@
<div class="root" style="left: {left}">
<ButtonGroup>
<Button color="secondary" grouped on:click={store.saveCurrentNode}>
<ActionButton color="secondary" grouped on:click={store.saveCurrentNode}>
{#if $store.currentNodeIsNew}Create{:else}Update{/if}
</Button>
</ActionButton>
{#if !$store.currentNodeIsNew}
<Button color="tertiary" grouped on:click={openConfirmDelete}>
<ActionButton alert grouped on:click={openConfirmDelete}>
Delete
</Button>
</ActionButton>
{/if}
</ButtonGroup>
@ -38,14 +39,14 @@
{/if}
<Modal bind:isOpen={confirmDelete}>
<div style="margin: 10px 0px 20px 0px">
<div class="actions-modal-body">
Are you sure you want to delete {$store.currentNode.name} ?
</div>
<div style="float:right">
<Button color="primary" on:click={deleteCurrentNode}>Yes</Button>
<Button color="secondary" on:click={() => (confirmDelete = false)}>
<div class="uk-modal-footer uk-text-right">
<ActionButton alert on:click={deleteCurrentNode}>Yes</ActionButton>
<ActionButton primary on:click={() => (confirmDelete = false)}>
No
</Button>
</ActionButton>
</div>
</Modal>
</div>
@ -56,4 +57,11 @@
width: 100%;
align-items: right;
}
.actions-modal-body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>

23
packages/builder/src/database/FieldView.svelte
View file

@ -7,6 +7,7 @@
import ValuesList from "../common/ValuesList.svelte"
import ErrorsBox from "../common/ErrorsBox.svelte"
import Checkbox from "../common/Checkbox.svelte"
import ActionButton from "../common/ActionButton.svelte"
import DatePicker from "../common/DatePicker.svelte"
import {
cloneDeep,
@ -141,18 +142,14 @@
label="Max Length"
bind:value={clonedField.typeOptions.maxLength} />
{/if}
</form>
<ButtonGroup style="float: right;">
<Button color="primary" grouped on:click={save}>Save</Button>
<Button color="tertiary" grouped on:click={() => onFinished(false)}>
Cancel
</Button>
</ButtonGroup>
</div>
<style>
</style>
<div class="uk-modal-footer uk-text-right">
<ButtonGroup>
<ActionButton primary on:click={save}>Save</ActionButton>
<ActionButton alert on:click={() => onFinished(false)}>
Cancel
</ActionButton>
</ButtonGroup>
</div>
</div>

15
packages/builder/src/database/RecordView.svelte
View file

@ -94,7 +94,7 @@
<div class="root">
<form class="uk-form-horizontal">
<h3 class="settings-title">Settings</h3>
<h3 class="budibase__title--3">Settings</h3>
<Textbox label="Name:" bind:text={record.name} on:change={nameChanged} />
{#if !record.isSingle}
@ -104,7 +104,7 @@
<div class="recordkey">{record.nodeKey()}</div>
</form>
<h3 class="title">
<h3 class="budibase__title--3">
Fields
<span class="add-field-button" on:click={newField}>
{@html getIcon('plus')}
@ -160,7 +160,7 @@
</Modal>
{/if}
<h3 class="title">Indexes</h3>
<h3 class="budibase__title--3">Indexes</h3>
{#each record.indexes as index}
<div class="index-container">
@ -199,15 +199,6 @@
padding: 2rem;
}
.settings-title {
font-weight: 700;
}
.title {
margin: 3rem 0rem 0rem 0rem;
font-weight: 700;
}
.recordkey {
font-size: 14px;
font-weight: 600;

87
packages/builder/src/global.css
View file

@ -101,3 +101,90 @@ h5 {
font-size: 12pt;
color: var(--darkslate);
}
/* Budibase Component Styles */
.header {
font-size: 0.75rem;
color: #999;
text-transform: uppercase;
margin-top: 1rem;
font-weight: 500;
}
.budibase__title {
font-weight: 900;
font-size: 42px;
}
.budibase__title--2 {
font-weight: 700;
font-size: 32px;
}
.budibase__title--3 {
font-weight: 700;
font-size: 24px;
}
.budibase__title--4 {
font-weight: 700;
font-size: 18px;
}
.budibase__label--big {
font-weight: 400;
font-size: 14px;
opacity: 0.6;
text-transform: uppercase;
}
.budibase__label--medium {
font-weight: 500;
font-size: 12px;
opacity: 0.6;
text-transform: uppercase;
}
.budibase__label--small {
font-weight: 500;
font-size: 10px;
opacity: 0.6;
text-transform: uppercase;
}
.budibase__sub-heading {
}
.budibase__nav-item {
cursor: pointer;
padding: 0 7px 0 3px;
height: 35px;
margin: 5px 0;
border-radius: 0 5px 5px 0;
display: flex;
align-items: center;
font-weight: 500;
}
.budibase__nav-item.selected {
color: var(--button-text);
background: var(--background-button) !important;
}
.budibase__nav-item:hover {
background: #fafafa;
}
.budibase__input {
width: 250px;
height: 50px;
border-radius: 3px;
border: 1px solid #DBDBDB;
text-align: left;
letter-spacing: 0.7px;
color: #163057;
font-size: 16px;
padding-left: 5px;
}

4
packages/builder/src/nav/BackendNav.svelte
View file

@ -105,9 +105,8 @@
.nav-group-header {
display: grid;
grid-template-columns: [icon] auto [title] 1fr [button] auto;
padding: 2rem 1rem 0rem 1rem;
padding: 2rem 1rem 1rem 1rem;
font-size: 0.9rem;
font-weight: bold;
}
.nav-group-header > div:nth-child(1) {
@ -137,6 +136,7 @@
.hierarchy-title {
flex: auto 1 1;
text-transform: uppercase;
}
.hierarchy {

38
packages/builder/src/nav/HierarchyRow.svelte
View file

@ -13,16 +13,14 @@
if (s.currentNode)
navActive =
s.activeNav === "database" && node.nodeId === s.currentNode.nodeId
? "active"
: ""
})
</script>
<div class="root">
<div
class="title {navActive}"
on:click={() => store.selectExistingNode(node.nodeId)}
style="padding-left: {20 + level * 20}px">
<div
class="budibase__nav-item"
on:click={() => store.selectExistingNode(node.nodeId)}
class:selected={navActive}>
<div style="padding-left: {20 + level * 20}px">
{@html getIcon(icon, 12)}
<span style="margin-left: 1rem">{node.name}</span>
</div>
@ -36,28 +34,4 @@
<svelte:self node={index} level={level + 1} type="index" />
{/each}
{/if}
</div>
<style>
.root {
display: block;
font-size: 0.9rem;
width: 100%;
cursor: pointer;
color: var(--secondary50);
font-weight: 500;
}
.title {
padding-top: 0.5rem;
padding-right: 0.5rem;
}
.title:hover {
background-color: var(--secondary10);
}
.active {
background-color: var(--primary10);
}
</style>
</div>

22
packages/builder/src/nav/NavItem.svelte
View file

@ -8,28 +8,10 @@
let navActive = ""
store.subscribe(db => {
navActive = db.activeNav === name ? "active" : ""
navActive = db.activeNav === name
})
const setActive = () => store.setActiveNav(name)
</script>
<div class="nav-item {navActive}" on:click={setActive}>{label}</div>
<style>
.nav-item {
padding: 1.5rem 1rem 0rem 1rem;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
flex: 0 0 auto;
}
.nav-item:hover {
background-color: var(--primary10);
}
.active {
background-color: var(--primary10);
}
</style>
<div class="budibase__nav-item" class:selected={navActive} on:click={setActive}>{label}</div>

23
packages/builder/src/userInterface/ComponentsHierarchy.svelte
View file

@ -56,7 +56,7 @@
{#each _screens as screen}
<div
class="hierarchy-item component"
class="budibase__nav-item component"
class:selected={$store.currentComponentInfo._id === screen.component.props._id}
on:click|stopPropagation={() => store.setCurrentScreen(screen.title)}>
@ -99,30 +99,9 @@
<style>
.root {
font-weight: 400;
font-size: 0.8rem;
color: #333;
}
.hierarchy-item {
cursor: pointer;
padding: 0 7px 0 3px;
height: 35px;
margin: 5px 0;
border-radius: 0 5px 5px 0;
display: flex;
align-items: center;
font-weight: 500;
}
.hierarchy-item:hover {
background: #fafafa;
}
.selected {
color: var(--button-text);
background: var(--background-button) !important;
}
.title {
margin-left: 10px;
margin-top: 2px;

9
packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
View file

@ -38,7 +38,7 @@
{#each components as component, index (component._id)}
<li on:click|stopPropagation={() => onSelect(component)}>
<div
class="item"
class="budibase__nav-item item"
class:selected={currentComponent === component}
style="padding-left: {level * 20 + 53}px">
<div>{get_capitalised_name(component._component)}</div>
@ -98,7 +98,6 @@
border-radius: 3px;
height: 35px;
align-items: center;
font-size: 0.8rem;
font-weight: normal;
}
@ -129,12 +128,6 @@
color: var(--button-text);
}
.selected {
color: var(--button-text);
background: var(--background-button) !important;
font-weight: 500;
}
.reorder-buttons {
display: flex;
flex-direction: column;

29
packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
View file

@ -34,10 +34,17 @@
let selectedEvent = null
$: {
const componentDefinition = components.find(c => c.name === component._component)
const componentDefinition = components.find(
c => c.name === component._component
)
events = Object.keys(componentDefinition.props)
.filter(propName => componentDefinition.props[propName].type === EVENT_TYPE)
.map(propName => ({ name: propName, handlers: (component[propName] || []) }))
.filter(
propName => componentDefinition.props[propName].type === EVENT_TYPE
)
.map(propName => ({
name: propName,
handlers: component[propName] || [],
}))
}
const openModal = event => {
@ -61,7 +68,8 @@
{#each events as event, index}
{#if event.handlers.length > 0}
<div
class="handler-container hierarchy-item {selectedEvent && selectedEvent.index === index ? 'selected' : ''}"
class:selected={selectedEvent && selectedEvent.index === index}
class="handler-container budibase__nav-item"
on:click={() => openModal({ ...event, index })}>
<span class="event-name">{event.name}</span>
<span class="edit-text">EDIT</span>
@ -109,19 +117,6 @@
height: 80px;
}
.hierarchy-item {
cursor: pointer;
padding: 11px 7px;
margin: 5px 0;
border-radius: 5px;
font-size: 1.5em;
width: 100%;
}
.hierarchy-item:hover {
background: #f9f9f9;
}
.event-name {
margin-top: 5px;
font-weight: bold;

36
packages/builder/src/userInterface/MasterLayout.svelte
View file

@ -51,12 +51,12 @@
}
</script>
<div class="root">
<div
class="hierarchy-item component"
class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
on:click|stopPropagation={() => store.setScreenType('page')}>
<div
class="budibase__nav-item"
class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
on:click|stopPropagation={() => store.setScreenType('page')}>
<div class="component">
<span
class="icon"
class:rotate={$store.currentPreviewItem.name !== _layout.title}>
@ -92,32 +92,6 @@
onOk={() => store.deleteComponent(componentToDelete)} />
<style>
.root {
font-weight: 400;
font-size: 0.8rem;
color: #333;
}
.hierarchy-item {
cursor: pointer;
padding: 0 7px 0 3px;
height: 35px;
margin: 5px 0;
border-radius: 0 5px 5px 0;
display: flex;
align-items: center;
font-weight: 500;
}
.hierarchy-item:hover {
background: #fafafa;
}
.selected {
color: var(--button-text);
background: var(--background-button) !important;
}
.title {
margin-left: 10px;
margin-top: 2px;