1
0
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:
2023-01-15 17:10:30 +01:00
parent d139a077d9
commit 4e5e00907d
5 changed files with 48 additions and 2 deletions

View File

@ -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;
}

View 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>

View File

@ -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;