mirror of
https://github.com/garraflavatra/rolens.git
synced 2025-07-19 22:18:03 +00:00
Nice blank state messages
This commit is contained in:
@ -8,6 +8,7 @@
|
||||
import ContextMenu from './components/contextmenu.svelte';
|
||||
import Modal from './components/modal.svelte';
|
||||
import { input } from './actions';
|
||||
import BlankState from './components/blankstate.svelte';
|
||||
|
||||
const connections = {};
|
||||
let hosts = {};
|
||||
@ -106,7 +107,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<main class:empty={!host || !connection}>
|
||||
<AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
|
||||
|
||||
{#if host && connection}
|
||||
@ -162,6 +163,8 @@
|
||||
collectionKey={activeCollKey}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<BlankState label="A database client is nothing without a host" image="/fish.svg" />
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
@ -203,6 +206,10 @@
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
main.empty {
|
||||
grid-template: 3rem auto / 1fr;
|
||||
}
|
||||
|
||||
main > :global(.addressbar) {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
33
frontend/src/components/blankstate.svelte
Normal file
33
frontend/src/components/blankstate.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script>
|
||||
export let label = 'No items';
|
||||
export let image = '/empty.svg';
|
||||
</script>
|
||||
|
||||
<div class="blankstate">
|
||||
<div class="content">
|
||||
<img src={image} alt="">
|
||||
<p>{label}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.blankstate {
|
||||
display: flex;
|
||||
}
|
||||
.content {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100px;
|
||||
width: auto;
|
||||
filter: grayscale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 2rem;
|
||||
color: #777;
|
||||
}
|
||||
</style>
|
@ -1,4 +1,5 @@
|
||||
<script>
|
||||
import BlankState from '../../components/blankstate.svelte';
|
||||
import { tick } from 'svelte';
|
||||
import TabBar from '../../components/tabbar.svelte';
|
||||
import Find from './find.svelte';
|
||||
@ -50,7 +51,7 @@
|
||||
</div>
|
||||
{/key}
|
||||
{:else}
|
||||
No collection selected
|
||||
<BlankState label="Select a collection to continue" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -61,6 +62,9 @@
|
||||
grid-template: auto 1fr / 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.collection.empty {
|
||||
grid-template: 1fr / 1fr;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 0.5rem;
|
||||
|
Reference in New Issue
Block a user