Use common dropdown components in more places to reduce duplication
This commit is contained in:
Andrew Kingston
parent
2114822c90
commit
748955e3d9
5 changed files with 25 additions and 183 deletions
|
|
@ -4,11 +4,11 @@
|
|||
export let subtitle
|
||||
</script>
|
||||
|
||||
<div class="dropdown-item" on:click>
|
||||
<div class="dropdown-item" on:click class:big={subtitle != null}>
|
||||
{#if icon}<i class={icon} />{/if}
|
||||
<div class="content">
|
||||
<div class="title">{title}</div>
|
||||
{#if subtitle}
|
||||
{#if subtitle != null}
|
||||
<div class="subtitle">{subtitle}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -21,6 +21,9 @@
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
padding: var(--spacing-xs) var(--spacing-l);
|
||||
}
|
||||
.dropdown-item.big {
|
||||
padding: var(--spacing-s) var(--spacing-l);
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import { store } from "builderStore"
|
||||
import components from "./temporaryPanelStructure.js"
|
||||
import { DropdownMenu } from "@budibase/bbui"
|
||||
import Tab from "./ItemTab/Tab.svelte"
|
||||
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
|
||||
|
||||
const categories = components.categories
|
||||
let selectedIndex
|
||||
|
|
@ -50,9 +50,16 @@
|
|||
bind:this={popover}
|
||||
{anchor}
|
||||
align="left">
|
||||
<Tab
|
||||
list={categories[selectedIndex]}
|
||||
on:selectItem={(e) => onComponentChosen(e.detail)} />
|
||||
<DropdownContainer>
|
||||
{#each categories[selectedIndex].children as item}
|
||||
{#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
|
||||
<DropdownItem
|
||||
icon={item.icon}
|
||||
title={item.name}
|
||||
on:click={() => onComponentChosen(item)} />
|
||||
{/if}
|
||||
{/each}
|
||||
</DropdownContainer>
|
||||
</DropdownMenu>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
<script>
|
||||
export let item
|
||||
</script>
|
||||
|
||||
<div data-cy={item.name} class="item-item" on:click>
|
||||
<div class="item-icon"><i class={item.icon} /></div>
|
||||
<div class="item-text">
|
||||
<div class="item-name">{item.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.item-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
.item-item:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { store } from "builderStore"
|
||||
import Item from "./Item.svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let list
|
||||
|
||||
let category = list
|
||||
|
||||
const handleClick = (item) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
list = item
|
||||
} else {
|
||||
dispatch("selectItem", item)
|
||||
}
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
list = category
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !list.isCategory}
|
||||
<button class="back-button" on:click={goBack}>Back</button>
|
||||
{/if}
|
||||
<div class="list">
|
||||
{#each list.children as item}
|
||||
{#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
|
||||
<Item {item} on:click={() => handleClick(item)} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.back-button {
|
||||
grid-column: 1 / span 2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
border: solid 1px var(--grey-3);
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: Inter;
|
||||
transition: all 0.3ms;
|
||||
}
|
||||
.back-button:hover {
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
flex-wrap: wrap;
|
||||
padding: var(--spacing-l);
|
||||
min-width: 120px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,9 +2,8 @@
|
|||
import { goto } from "@sveltech/routify"
|
||||
import { store } from "builderStore"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import api from "builderStore/api"
|
||||
import Portal from "svelte-portal"
|
||||
import { DropdownMenu } from "@budibase/bbui"
|
||||
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
|
||||
|
||||
export let screen
|
||||
|
||||
|
|
@ -12,14 +11,10 @@
|
|||
let dropdown
|
||||
let anchor
|
||||
|
||||
const hideDropdown = () => {
|
||||
dropdown.hide()
|
||||
}
|
||||
|
||||
const deleteScreen = () => {
|
||||
store.deleteScreens(screen, $store.currentPageName)
|
||||
// update the page if required
|
||||
store.update(state => {
|
||||
store.update((state) => {
|
||||
if (state.currentPreviewItem.name === screen.name) {
|
||||
store.setCurrentPage($store.currentPageName)
|
||||
$goto(`./:page/page-layout`)
|
||||
|
|
@ -29,23 +24,19 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={anchor}
|
||||
class="root boundary"
|
||||
on:click|stopPropagation={() => {}}>
|
||||
<div bind:this={anchor} on:click|stopPropagation={() => {}}>
|
||||
<div class="icon" on:click={() => dropdown.show()}>
|
||||
<i class="ri-more-line" />
|
||||
</div>
|
||||
<DropdownMenu bind:this={dropdown} {anchor} align="left">
|
||||
<ul on:click={hideDropdown}>
|
||||
<li on:click={() => confirmDeleteDialog.show()}>
|
||||
<i class="ri-delete-bin-2-line" />
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
<DropdownContainer>
|
||||
<DropdownItem
|
||||
icon="ri-delete-bin-line"
|
||||
title="Delete"
|
||||
on:click={() => confirmDeleteDialog.show()} />
|
||||
</DropdownContainer>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
title="Confirm Delete"
|
||||
|
|
@ -54,54 +45,6 @@
|
|||
onOk={deleteScreen} />
|
||||
|
||||
<style>
|
||||
.root {
|
||||
overflow: hidden;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.root button {
|
||||
border-style: none;
|
||||
border-radius: 2px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
z-index: 100000;
|
||||
overflow: visible;
|
||||
margin: var(--spacing-s) 0;
|
||||
border-radius: var(--border-radius-s);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--ink);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
margin: auto 0;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
li:not(.disabled):hover {
|
||||
background-color: var(--grey-2);
|
||||
}
|
||||
li:active {
|
||||
color: var(--blue);
|
||||
}
|
||||
li i {
|
||||
margin-right: 8px;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
li.disabled {
|
||||
color: var(--grey-4);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue