CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-30 03:50:37 +12:00
Code Issues Projects Releases Wiki Activity

Add clear icon to screen search field

Browse source
This commit is contained in:
Andrew Kingston 2021-03-11 15:53:31 +00:00
parent 141d3be174
commit f209a1e91b
1 changed files with 29 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View file

@ -85,11 +85,16 @@
<option value={role._id}>{role.name}</option>
{/each}
</Select>
<Input
extraThin
placeholder="Enter a route to search"
label="Search Screens"
bind:value={$screenSearchString} />
<div class="search-screens">
<Input
extraThin
placeholder="Enter a route to search"
label="Search Screens"
bind:value={$screenSearchString} />
<i
class="ri-close-line"
on:click={() => ($screenSearchString = null)} />
</div>
</div>
<div class="nav-items-container">
<ComponentNavigationTree />
@ -139,4 +144,23 @@
margin-bottom: var(--spacing-m);
gap: var(--spacing-m);
}
.search-screens {
position: relative;
}
.search-screens i {
right: 2px;
bottom: 2px;
position: absolute;
box-sizing: border-box;
padding: var(--spacing-s);
border-left: 1px solid var(--grey-4);
background-color: var(--grey-2);
border-top-right-radius: var(--border-radius-m);
border-bottom-right-radius: var(--border-radius-m);
color: var(--grey-7);
font-size: 14px;
line-height: 15px;
top: auto;
}
</style>