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