MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add close functionallity

This commit is contained in:
Adria Navarro 2023-11-09 12:53:47 +01:00
parent ab350057b6
commit 04f67f3199
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/builder/src/components/common/SearchBox.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { tick } from "svelte" import { tick } from "svelte"
import { Icon, Body } from "@budibase/bbui" import { Icon, Body } from "@budibase/bbui"
import { screensHeight } from "builderStore"
export let title export let title
export let placeholder export let placeholder
@ -10,8 +9,6 @@
let searchInput let searchInput
let search = false let search = false
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const openSearch = async () => { const openSearch = async () => {
search = true search = true
await tick() await tick()
@ -40,6 +37,10 @@
class="input" class="input"
{placeholder} {placeholder}
/> />
<div on:click={closeSearch} on:keydown={closeSearch} class="closeButton">
<Icon name="Add" />
</div>
<div class="title" class:hide={search}> <div class="title" class:hide={search}>
<Body size="S">{title}</Body> <Body size="S">{title}</Body>
</div> </div>
@ -90,7 +91,8 @@
.input::placeholder { .input::placeholder {
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);
} }
.search input { .search input,
.search .closeButton {
display: block; display: block;
} }
@ -124,7 +126,15 @@
} }
.closeButton { .closeButton {
display: none;
transform: rotate(45deg); transform: rotate(45deg);
color: var(--grey-7);
cursor: pointer;
transition: transform 300ms ease-out;
}
.closeButton:hover {
color: var(--ink);
} }
.icon { .icon {