diff --git a/frontend/src/components/grid-items.svelte b/frontend/src/components/grid-items.svelte index 50656c9..330fb8e 100644 --- a/frontend/src/components/grid-items.svelte +++ b/frontend/src/components/grid-items.svelte @@ -9,6 +9,7 @@ export let activeKey = ''; export let activeChildKey = ''; export let level = 0; + export let striped = true; const dispatch = createEventDispatcher(); let childrenOpen = {}; @@ -90,6 +91,7 @@ on:dblclick={() => doubleClick(item[key])} on:contextmenu|preventDefault={evt => showContextMenu(evt, item)} class:selected={activeKey === item[key] && !activeChildKey} + class:striped > {#if item.children?.length} @@ -117,6 +119,7 @@ + tr.striped:nth-of-type(even) td { + background-color: #eee; + } + tr.selected td { + background-color: #00008b !important; + color: #fff; + } + td { padding: 0.3rem; text-overflow: ellipsis; @@ -145,11 +156,6 @@ max-width: 25em; } - tbody tr.selected td { - background-color: #00008b; - color: #fff; - } - button.toggle { color: inherit; padding: 0; diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte index b68d00c..53d14df 100644 --- a/frontend/src/components/grid.svelte +++ b/frontend/src/components/grid.svelte @@ -9,10 +9,10 @@ export let activeKey = ''; export let activeChildKey = ''; export let showHeaders = true; - export let level = 0; + export let striped = true; -
0}> +
{#if actions?.length}
{#each actions as action} @@ -37,7 +37,7 @@ {/if} - +
@@ -48,9 +48,6 @@ height: 100%; background-color: #fff; } - .subgrid { - width: 100%; - } .actions { margin-bottom: 0.5rem; @@ -64,7 +61,7 @@ table { border-collapse: collapse; width: 100%; - /* table-layout: fixed; */ + background-color: #fff; } table thead { diff --git a/frontend/src/components/objectgrid.svelte b/frontend/src/components/objectgrid.svelte index 9d8d5b5..6fec75b 100644 --- a/frontend/src/components/objectgrid.svelte +++ b/frontend/src/components/objectgrid.svelte @@ -20,8 +20,10 @@ if (Array.isArray(data)) { for (const item of data) { const newItem = {}; - newItem.key = item[key]; - newItem.children = dissectObject(item); + newItem.key = key; + newItem.value = item[key]; + newItem.type = getType(item[key]); + newItem.children = dissectObject(item, key); newItem.menu = item.menu; items = [ ...items, newItem ]; } @@ -53,9 +55,9 @@ } } - function dissectObject(object) { + function dissectObject(object, exclude) { const entries = [ ...Array.isArray(object) ? object.entries() : Object.entries(object) ]; - return entries.map(([ key, value ]) => { + return entries.filter(([ key ]) => key != exclude).map(([ key, value ]) => { key = key + ''; const type = getType(value); const child = { key, value, type, menu: value.menu }; diff --git a/frontend/src/organisms/addressbar/hostmodal.svelte b/frontend/src/organisms/addressbar/hostmodal.svelte index 8f5d45e..ace8ae0 100644 --- a/frontend/src/organisms/addressbar/hostmodal.svelte +++ b/frontend/src/organisms/addressbar/hostmodal.svelte @@ -60,6 +60,7 @@ border-radius: 0; background: #eee; color: inherit; + border: none; border-left: 1px solid #ccc; } .host button:hover { diff --git a/frontend/src/organisms/connection/dblist.svelte b/frontend/src/organisms/connection/dblist.svelte index 856f403..b5c456c 100644 --- a/frontend/src/organisms/connection/dblist.svelte +++ b/frontend/src/organisms/connection/dblist.svelte @@ -74,6 +74,7 @@ {#if host && connection} ({ id: dbKey,