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