Add seachbox to sources (not functional)
This commit is contained in:
Adria Navarro
parent
5a17c6e166
commit
ab350057b6
|
|
@ -0,0 +1,162 @@
|
||||||
|
<script>
|
||||||
|
import { tick } from "svelte"
|
||||||
|
import { Icon, Body } from "@budibase/bbui"
|
||||||
|
import { screensHeight } from "builderStore"
|
||||||
|
|
||||||
|
export let title
|
||||||
|
export let placeholder
|
||||||
|
|
||||||
|
let searchValue
|
||||||
|
let searchInput
|
||||||
|
let search = false
|
||||||
|
|
||||||
|
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
|
||||||
|
|
||||||
|
const openSearch = async () => {
|
||||||
|
search = true
|
||||||
|
await tick()
|
||||||
|
searchInput.focus()
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeSearch = async () => {
|
||||||
|
search = false
|
||||||
|
searchValue = ""
|
||||||
|
}
|
||||||
|
|
||||||
|
const onKeyDown = e => {
|
||||||
|
if (e.key === "Escape") {
|
||||||
|
closeSearch()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window on:keydown={onKeyDown} />
|
||||||
|
|
||||||
|
<div class="header" class:search>
|
||||||
|
<input
|
||||||
|
readonly={!search}
|
||||||
|
bind:value={searchValue}
|
||||||
|
bind:this={searchInput}
|
||||||
|
class="input"
|
||||||
|
{placeholder}
|
||||||
|
/>
|
||||||
|
<div class="title" class:hide={search}>
|
||||||
|
<Body size="S">{title}</Body>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
on:click={openSearch}
|
||||||
|
on:keydown={openSearch}
|
||||||
|
class="searchButton"
|
||||||
|
class:hide={search}
|
||||||
|
>
|
||||||
|
<Icon size="S" name="Search" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.search {
|
||||||
|
transition: height 300ms ease-out;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-direction: row;
|
||||||
|
position: relative;
|
||||||
|
height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
transition: border-bottom 130ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
.search input {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex: 1;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
:global(.nav-item) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closeButton {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-left: 4px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-results {
|
||||||
|
color: var(--spectrum-global-color-gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translateY(50%);
|
||||||
|
height: 16px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.divider:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background: var(--spectrum-global-color-gray-200);
|
||||||
|
height: 2px;
|
||||||
|
width: 100%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transition: background 130ms ease-out;
|
||||||
|
}
|
||||||
|
.divider:hover {
|
||||||
|
cursor: row-resize;
|
||||||
|
}
|
||||||
|
.divider:hover:after {
|
||||||
|
background: var(--spectrum-global-color-gray-300);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
import Panel from "components/design/Panel.svelte"
|
import Panel from "components/design/Panel.svelte"
|
||||||
import { isActive, redirect, goto, params } from "@roxi/routify"
|
import { isActive, redirect, goto, params } from "@roxi/routify"
|
||||||
import { datasources } from "stores/backend"
|
import { datasources } from "stores/backend"
|
||||||
|
import SearchBox from "components/common/SearchBox.svelte"
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
// If we ever don't have any data other than the users table, prompt the
|
// If we ever don't have any data other than the users table, prompt the
|
||||||
|
|
@ -18,7 +19,10 @@
|
||||||
<!-- routify:options index=1 -->
|
<!-- routify:options index=1 -->
|
||||||
<div class="data">
|
<div class="data">
|
||||||
{#if !$isActive("./new")}
|
{#if !$isActive("./new")}
|
||||||
<Panel title="Sources" borderRight>
|
<Panel borderRight>
|
||||||
|
<span class="panel-title-content" slot="panel-title-content">
|
||||||
|
<SearchBox title="Sources" placeholder="search for sources" />
|
||||||
|
</span>
|
||||||
<Layout paddingX="L" paddingY="XL" gap="S">
|
<Layout paddingX="L" paddingY="XL" gap="S">
|
||||||
<Button cta on:click={() => $goto("./new")}>Add source</Button>
|
<Button cta on:click={() => $goto("./new")}>Add source</Button>
|
||||||
<DatasourceNavigator />
|
<DatasourceNavigator />
|
||||||
|
|
@ -51,4 +55,8 @@
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-title-content {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue