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

Update component panel to remove header and add component button

This commit is contained in:
Andrew Kingston 2025-01-20 16:07:59 +00:00
parent 97447981dc
commit 1edf380053
No known key found for this signature in database
1 changed files with 3 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
import { notifications, Icon, Body } from "@budibase/bbui" import { notifications, Icon } from "@budibase/bbui"
import { isActive, goto } from "@roxi/routify"
import { import {
selectedScreen, selectedScreen,
screenStore, screenStore,
@ -17,19 +16,9 @@
import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte" import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
import getScreenContextMenuItems from "./getScreenContextMenuItems" import getScreenContextMenuItems from "./getScreenContextMenuItems"
let scrolling = false
$: screenComponentId = `${$screenStore.selectedScreenId}-screen` $: screenComponentId = `${$screenStore.selectedScreenId}-screen`
$: navComponentId = `${$screenStore.selectedScreenId}-navigation` $: navComponentId = `${$screenStore.selectedScreenId}-navigation`
const toNewComponentRoute = () => {
if ($isActive(`./:componentId/new`)) {
$goto(`./:componentId`)
} else {
$goto(`./:componentId/new`)
}
}
const onDrop = async () => { const onDrop = async () => {
try { try {
await dndStore.actions.drop() await dndStore.actions.drop()
@ -39,10 +28,6 @@
} }
} }
const handleScroll = e => {
scrolling = e.target.scrollTop !== 0
}
const hover = hoverStore.hover const hover = hoverStore.hover
// showCopy is used to hide the copy button when the user right-clicks the empty // showCopy is used to hide the copy button when the user right-clicks the empty
@ -72,17 +57,9 @@
} }
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="components"> <div class="components">
<div class="header" class:scrolling>
<Body size="S">Components</Body>
<div on:click={toNewComponentRoute} class="addButton">
<Icon name="Add" />
</div>
</div>
<div class="list-panel"> <div class="list-panel">
<ComponentScrollWrapper on:scroll={handleScroll}> <ComponentScrollWrapper>
<ul <ul
class="componentTree" class="componentTree"
on:contextmenu={e => openScreenContextMenu(e, false)} on:contextmenu={e => openScreenContextMenu(e, false)}
@ -168,35 +145,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
} padding-top: var(--spacing-l);
.header {
height: 50px;
box-sizing: border-box;
padding: var(--spacing-l);
display: flex;
align-items: center;
border-bottom: 2px solid transparent;
transition: border-bottom 130ms ease-out;
}
.header.scrolling {
border-bottom: var(--border-light);
} }
.components :global(.nav-item) { .components :global(.nav-item) {
padding-right: 8px !important; padding-right: 8px !important;
} }
.addButton {
margin-left: auto;
color: var(--grey-7);
cursor: pointer;
}
.addButton:hover {
color: var(--ink);
}
.list-panel { .list-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;