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

Add "add"

This commit is contained in:
Adria Navarro 2023-11-09 15:37:01 +01:00
parent baabb9066b
commit 4b9ef2ac83
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,6 +25,14 @@
closeSearch() closeSearch()
} }
} }
const handleAddButton = () => {
if (search) {
closeSearch()
} else {
alert("todo")
}
}
</script> </script>
<svelte:window on:keydown={onKeyDown} /> <svelte:window on:keydown={onKeyDown} />
@ -39,15 +47,16 @@
{placeholder} {placeholder}
/> />
<div on:click={closeSearch} class="closeButton" class:hide={!search}>
<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>
<div on:click={openSearch} class="searchButton" class:hide={search}> <div on:click={openSearch} class="searchButton" class:hide={search}>
<Icon size="S" name="Search" /> <Icon size="S" name="Search" />
</div> </div>
<div on:click={handleAddButton} class="addButton" class:rotate={search}>
<Icon name="Add" />
</div>
</div> </div>
<style> <style>
@ -68,6 +77,7 @@
justify-content: space-between; justify-content: space-between;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
transition: border-bottom 130ms ease-out; transition: border-bottom 130ms ease-out;
gap: var(--spacing-l);
} }
.searchBox { .searchBox {
@ -110,15 +120,18 @@
display: none !important; display: none !important;
} }
.closeButton { .addButton {
display: flex; display: flex;
transform: rotate(45deg); transition: transform 300ms ease-out;
color: var(--grey-7); color: var(--grey-7);
cursor: pointer; cursor: pointer;
transition: transform 300ms ease-out;
} }
.closeButton:hover { .addButton:hover {
color: var(--ink); color: var(--ink);
} }
.rotate {
transform: rotate(45deg);
}
</style> </style>