dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-24 08:16:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

css for command palette

Browse Source
This commit is contained in:
Jan Prochazka
2021-03-22 19:01:57 +01:00
parent 5531705433
commit 15c9e93e8a
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/web/src/commands/CommandPalette.svelte
View File

@@ -72,23 +72,29 @@
<div class="search"> <div class="search">
<input type="text" bind:this={domInput} bind:value={filter} on:keydown={handleKeyDown} /> <input type="text" bind:this={domInput} bind:value={filter} on:keydown={handleKeyDown} />
</div> </div>
{#each filteredItems as command, index} <div class="content">
<div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}> {#each filteredItems as command, index}
<div>{command.text}</div> <div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}>
{#if command.keyText} <div>{command.text}</div>
<div class="shortcut">{command.keyText}</div> {#if command.keyText}
{/if} <div class="shortcut">{command.keyText}</div>
</div> {/if}
{/each} </div>
{/each}
</div>
</div> </div>
<style> <style>
.main { .main {
width: 500px; width: 500px;
max-height: 500px;
background: var(--theme-bg-2); background: var(--theme-bg-2);
padding: 5px; padding: 5px;
} }
.content {
max-height: 400px;
overflow-y: scroll;
}
.search { .search {
display: flex; display: flex;
} }