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

Add clear icon to screen search field

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> <option value={role._id}>{role.name}</option>
{/each} {/each}
</Select> </Select>
<Input <div class="search-screens">
extraThin <Input
placeholder="Enter a route to search" extraThin
label="Search Screens" placeholder="Enter a route to search"
bind:value={$screenSearchString} /> label="Search Screens"
bind:value={$screenSearchString} />
<i
class="ri-close-line"
on:click={() => ($screenSearchString = null)} />
</div>
</div> </div>
<div class="nav-items-container"> <div class="nav-items-container">
<ComponentNavigationTree /> <ComponentNavigationTree />
@ -139,4 +144,23 @@
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
gap: 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> </style>