Change component bar to popovers and adjust page layout to match

This commit is contained in:
Andrew Kingston 2020-10-22 20:22:09 +01:00
parent f56662dac4
commit e5742dc7f6
7 changed files with 48 additions and 87 deletions

View File

@ -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);

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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",

View File

@ -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 {