Change component bar to popovers and adjust page layout to match
This commit is contained in:
Andrew Kingston
parent
f56662dac4
commit
e5742dc7f6
|
|
@ -26,7 +26,7 @@
|
|||
<div class="content">
|
||||
{#if withArrow}
|
||||
<div class:opened class="icon arrow">
|
||||
<i class="ri-arrow-right-s-fill" />
|
||||
<i class="ri-arrow-right-s-line" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if icon}
|
||||
|
|
@ -81,6 +81,7 @@
|
|||
}
|
||||
.icon.arrow {
|
||||
margin: 0 -2px 0 -6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.icon.arrow.opened {
|
||||
transform: rotate(90deg);
|
||||
|
|
|
|||
|
|
@ -18,9 +18,13 @@
|
|||
<style>
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: 500;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -2,23 +2,24 @@
|
|||
import { goto } from "@sveltech/routify"
|
||||
import { store } from "builderStore"
|
||||
import components from "./temporaryPanelStructure.js"
|
||||
import CategoryTab from "./CategoryTab.svelte"
|
||||
import { Popover } from "@budibase/bbui"
|
||||
import { fade, fly } from "svelte/transition"
|
||||
|
||||
import { DropdownMenu } from "@budibase/bbui"
|
||||
import Tab from "./ItemTab/Tab.svelte"
|
||||
|
||||
const categories = components.categories
|
||||
let selectedCategory
|
||||
let width
|
||||
let selectedIndex
|
||||
let anchors = []
|
||||
let popover
|
||||
$: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
|
||||
|
||||
const close = () => {
|
||||
selectedCategory = null
|
||||
selectedIndex = null
|
||||
popover.hide()
|
||||
}
|
||||
|
||||
const onCategoryChosen = (category) => {
|
||||
const onCategoryChosen = (category, idx) => {
|
||||
if (category.isCategory) {
|
||||
selectedCategory = selectedCategory === category ? null : category
|
||||
selectedIndex = idx
|
||||
popover.show()
|
||||
} else {
|
||||
onComponentChosen(category)
|
||||
}
|
||||
|
|
@ -26,60 +27,38 @@
|
|||
|
||||
const onComponentChosen = (component) => {
|
||||
store.addChildComponent(component._component, component.presetProps)
|
||||
|
||||
// Get ID path
|
||||
const path = store.getPathToComponent($store.currentComponentInfo)
|
||||
|
||||
// Go to correct URL
|
||||
$goto(`./:page/:screen/${path}`)
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<div
|
||||
class="container"
|
||||
bind:clientWidth={width}
|
||||
class:open={selectedCategory != null}>
|
||||
{#each categories as category, idx}
|
||||
<div
|
||||
class="category"
|
||||
on:click={() => onCategoryChosen(category)}
|
||||
class:active={selectedCategory === category}>
|
||||
{#if category.icon}<i class={category.icon} />{/if}
|
||||
<span>{category.name}</span>
|
||||
{#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#if selectedCategory != null}
|
||||
<div class="overlay" on:click={close} />
|
||||
<div class="dropdown" transition:fly={{ y: -120 }}>
|
||||
<Tab
|
||||
list={selectedCategory}
|
||||
on:selectItem={(e) => onComponentChosen(e.detail)} />
|
||||
<div class="container">
|
||||
{#each categories as category, idx}
|
||||
<div
|
||||
bind:this={anchors[idx]}
|
||||
class="category"
|
||||
on:click={() => onCategoryChosen(category, idx)}>
|
||||
{#if category.icon}<i class={category.icon} />{/if}
|
||||
<span>{category.name}</span>
|
||||
{#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<DropdownMenu bind:this={popover} {anchor} align="left">
|
||||
<Tab
|
||||
list={categories[selectedIndex]}
|
||||
on:selectItem={(e) => onComponentChosen(e.detail)} />
|
||||
</DropdownMenu>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: var(--spacing-l) 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
z-index: 1;
|
||||
width: calc(100% - 80px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.container.open {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.category {
|
||||
|
|
@ -97,31 +76,10 @@
|
|||
font-weight: 500;
|
||||
user-select: none;
|
||||
}
|
||||
.category.active,
|
||||
.category:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
.category i:not(:last-child) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -2;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: calc(100% - var(--spacing-xl));
|
||||
left: 0;
|
||||
width: calc(100% - 80px);
|
||||
background-color: white;
|
||||
padding: var(--spacing-xl) 40px;
|
||||
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,20 +12,16 @@
|
|||
<style>
|
||||
.item-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: var(--grey-1);
|
||||
border-radius: 5px;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
.item-item:hover {
|
||||
background: var(--grey-2);
|
||||
transition: all 0.3s;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
|
|
@ -36,16 +32,16 @@
|
|||
.item-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
let category = list
|
||||
|
||||
const handleClick = item => {
|
||||
const handleClick = (item) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
list = item
|
||||
} else {
|
||||
|
|
@ -53,10 +53,12 @@
|
|||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
flex-wrap: wrap;
|
||||
padding: var(--spacing-l);
|
||||
min-width: 120px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -631,7 +631,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: "Groupedbar",
|
||||
name: "Grouped Bar",
|
||||
_component: "@budibase/standard-components/groupedbar",
|
||||
description: "Groupedbar chart",
|
||||
icon: "ri-bar-chart-grouped-fill",
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
background-color: var(--white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-m);
|
||||
gap: var(--spacing-l);
|
||||
padding: var(--spacing-l) var(--spacing-xl);
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--grey-2);
|
||||
|
|
@ -86,13 +86,13 @@
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-m);
|
||||
gap: var(--spacing-l);
|
||||
padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
|
||||
}
|
||||
.preview-content {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
|
||||
flex: 1 1 auto;
|
||||
margin: var(--spacing-xl) 40px;
|
||||
}
|
||||
|
||||
.components-pane {
|
||||
|
|
|
|||
Loading…
Reference in a new issue