CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-09 23:28:01 +12:00
Code Issues Projects Releases Wiki Activity

Reuse component on screens

Browse source
This commit is contained in:
Adria Navarro 2023-11-23 10:38:14 +01:00
parent 54b2fec3c1
commit bf4678ad01
2 changed files with 14 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/src/components/common/NavHeader.svelte
View file

@ -7,9 +7,9 @@
export let placeholder export let placeholder
export let value export let value
export let onAdd export let onAdd
export let search
let searchInput let searchInput
let search = false
const openSearch = async () => { const openSearch = async () => {
search = true search = true

114
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { Icon, Layout, Body } from "@budibase/bbui" import { Layout } from "@budibase/bbui"
import { import {
store, store,
sortedScreens, sortedScreens,
@ -9,13 +9,14 @@
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
import RoleIndicator from "./RoleIndicator.svelte" import RoleIndicator from "./RoleIndicator.svelte"
import DropdownMenu from "./DropdownMenu.svelte" import DropdownMenu from "./DropdownMenu.svelte"
import { onMount, tick } from "svelte" import { onMount } from "svelte"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import NavHeader from "components/common/NavHeader.svelte"
let search = false let search = false
let resizing = false let resizing = false
let searchValue = "" let searchValue = ""
let searchInput
let container let container
let screensContainer let screensContainer
let scrolling = false let scrolling = false
@ -26,10 +27,9 @@
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
$: search ? openSearch() : closeSearch()
const openSearch = async () => { const openSearch = async () => {
search = true
await tick()
searchInput.focus()
screensContainer.scroll({ top: 0, behavior: "smooth" }) screensContainer.scroll({ top: 0, behavior: "smooth" })
previousHeight = $screensHeight previousHeight = $screensHeight
$screensHeight = "calc(100% + 1px)" $screensHeight = "calc(100% + 1px)"
@ -42,8 +42,6 @@
previousHeight = null previousHeight = null
await sleep(300) await sleep(300)
} }
search = false
searchValue = ""
} }
const getFilteredScreens = (screens, search) => { const getFilteredScreens = (screens, search) => {
@ -52,20 +50,6 @@
}) })
} }
const handleAddButton = () => {
if (search) {
closeSearch()
} else {
$goto("../new")
}
}
const onKeyDown = e => {
if (e.key === "Escape") {
closeSearch()
}
}
const handleScroll = e => { const handleScroll = e => {
scrolling = e.target.scrollTop !== 0 scrolling = e.target.scrollTop !== 0
} }
@ -105,7 +89,7 @@
}) })
</script> </script>
<svelte:window on:keydown={onKeyDown} /> <svelte:window />
<div <div
class="screens" class="screens"
class:search class:search
@ -114,26 +98,13 @@
bind:this={container} bind:this={container}
> >
<div class="header" class:scrolling> <div class="header" class:scrolling>
<input <NavHeader
readonly={!search} title="Screens"
bind:value={searchValue}
bind:this={searchInput}
class="input"
placeholder="Search for screens" placeholder="Search for screens"
bind:value={searchValue}
bind:search
onAdd={() => $goto("../new")}
/> />
<div class="title" class:hide={search}>
<Body size="S">Screens</Body>
</div>
<div on:click={openSearch} class="searchButton" class:hide={search}>
<Icon size="S" name="Search" />
</div>
<div
on:click={handleAddButton}
class="addButton"
class:closeButton={search}
>
<Icon name="Add" />
</div>
</div> </div>
<div on:scroll={handleScroll} bind:this={screensContainer} class="content"> <div on:scroll={handleScroll} bind:this={screensContainer} class="content">
{#if filteredScreens?.length} {#if filteredScreens?.length}
@ -177,9 +148,9 @@
min-height: 147px; min-height: 147px;
max-height: calc(100% - 147px); max-height: calc(100% - 147px);
position: relative; position: relative;
transition: height 300ms ease-out;
} }
.screens.search { .screens.search {
transition: height 300ms ease-out;
max-height: none; max-height: none;
} }
.screens.resizing { .screens.resizing {
@ -202,37 +173,6 @@
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
.input {
font-family: var(--font-sans);
position: absolute;
color: var(--ink);
background-color: transparent;
border: none;
font-size: var(--spectrum-alias-font-size-default);
width: 260px;
box-sizing: border-box;
display: none;
}
.input:focus {
outline: none;
}
.input::placeholder {
color: var(--spectrum-global-color-gray-600);
}
.screens.search input {
display: block;
}
.title {
display: flex;
align-items: center;
height: 100%;
box-sizing: border-box;
flex: 1;
opacity: 1;
z-index: 1;
}
.content { .content {
overflow: auto; overflow: auto;
flex-grow: 1; flex-grow: 1;
@ -245,34 +185,6 @@
padding-right: 8px !important; padding-right: 8px !important;
} }
.searchButton {
color: var(--grey-7);
cursor: pointer;
margin-right: 10px;
opacity: 1;
}
.searchButton:hover {
color: var(--ink);
}
.hide {
opacity: 0;
pointer-events: none;
}
.addButton {
color: var(--grey-7);
cursor: pointer;
transition: transform 300ms ease-out;
}
.addButton:hover {
color: var(--ink);
}
.closeButton {
transform: rotate(45deg);
}
.icon { .icon {
margin-left: 4px; margin-left: 4px;
margin-right: 4px; margin-right: 4px;