thm
/
upend
1
0
Fork 0
Code Issues 73 Pull Requests Packages Projects Releases 5 Wiki Activity

[ui] horizontal detail mode?

feat/vaults
Tomáš Mládek 2022-03-25 14:11:00 +01:00
parent 889c9b59ac
commit 6afad56f3b
2 changed files with 123 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
webui/src/components/Inspect.svelte
View File

@ -26,6 +26,8 @@
export let detail: boolean;
export let editable = false;
let blobHandled = false;
let indexStore = writable(index);
$: $indexStore = index;
@ -216,7 +218,7 @@
});
</script>
<div class="inspect">
<div class="inspect" class:detail class:blob={blobHandled}>
<header>
<h2>
{#if $entity}
@ -227,83 +229,90 @@
</h2>
</header>
<div class="main-content">
{#if groups?.length || editable}
<section class="groups labelborder">
<header><h3>Groups</h3></header>
<div class="content">
{#each groups as [entryAddress, address]}
<div class="group">
<UpObject {address} link />
{#if editable}
<IconButton
name="x-circle"
on:click={() => removeGroup(entryAddress)}
<div class="show-detail blob-viewer">
<BlobViewer {address} {editable} {detail} bind:handled={blobHandled} />
</div>
<div class="detail-col">
{#if groups?.length || editable}
<section class="groups labelborder">
<header><h3>Groups</h3></header>
<div class="content">
{#each groups as [entryAddress, address]}
<div class="group">
<UpObject {address} link />
{#if editable}
<IconButton
name="x-circle"
on:click={() => removeGroup(entryAddress)}
/>
{/if}
</div>
{/each}
{#if editable}
<div class="selector">
<Selector
type="value"
valueTypes={["Address"]}
bind:value={groupToAdd}
on:input={addGroup}
placeholder="Choose an entity..."
/>
{/if}
</div>
{/each}
{#if editable}
<div class="selector">
<Selector
type="value"
valueTypes={["Address"]}
bind:value={groupToAdd}
on:input={addGroup}
placeholder="Choose an entity..."
/>
</div>
{/if}
</div>
</section>
{/if}
<BlobViewer {address} {editable} {detail} />
<NotesEditor {address} {editable} on:change={onChange} />
{#if !$error}
{#if Boolean($allTypeEntries)}
<div class="attributes">
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
<AttributeView
{entries}
type={allTypes[typeAddr]}
{editable}
on:change={onChange}
initialWidget={String($entity.get("LAST_ATTRIBUTE_WIDGET"))}
on:widgetSwitched={onAttributeWidgetSwitch}
/>
{/each}
{#if currentUntypedAttributes.length > 0 || editable}
<AttributeView
title="Other attributes"
{editable}
entries={currentUntypedAttributes}
on:change={onChange}
/>
{/if}
{#if currentBacklinks.length > 0}
<AttributeView
title={`Referred to (${$entity.backlinks.length})`}
entries={currentBacklinks}
reverse
on:change={onChange}
/>
{/if}
</div>
{#if editable}
<div class="button" on:click={deleteObject}>
<Icon name="trash" />
</div>
{/if}
</div>
</section>
{/if}
<div class="hide-detail">
<BlobViewer {address} {editable} {detail} />
</div>
<NotesEditor {address} {editable} on:change={onChange} />
{#if !$error}
{#if Boolean($allTypeEntries)}
<div class="attributes">
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
<AttributeView
{entries}
type={allTypes[typeAddr]}
{editable}
on:change={onChange}
initialWidget={String($entity.get("LAST_ATTRIBUTE_WIDGET"))}
on:widgetSwitched={onAttributeWidgetSwitch}
/>
{/each}
{#if currentUntypedAttributes.length > 0 || editable}
<AttributeView
title="Other attributes"
{editable}
entries={currentUntypedAttributes}
on:change={onChange}
/>
{/if}
{#if currentBacklinks.length > 0}
<AttributeView
title={`Referred to (${$entity.backlinks.length})`}
entries={currentBacklinks}
reverse
on:change={onChange}
/>
{/if}
</div>
{#if editable}
<div class="button" on:click={deleteObject}>
<Icon name="trash" />
</div>
{/if}
{:else}
<Spinner centered />
{/if}
{:else}
<Spinner centered />
<div class="error">
{$error}
</div>
{/if}
{:else}
<div class="error">
{$error}
</div>
{/if}
</div>
</div>
</div>
@ -362,6 +371,42 @@
}
}
.inspect {
.show-detail {
display: none;
}
.hide-detail {
display: unset;
}
}
.inspect.detail {
.hide-detail {
display: none;
}
.show-detail {
display: unset;
}
&:not(.blob) {
.blob-viewer {
display: none;
}
}
.main-content {
flex-direction: row;
.blob-viewer {
min-width: 75%;
}
.detail-col {
overflow-y: auto;
}
}
}
.error {
color: red;
}

8
webui/src/components/display/BlobViewer.svelte
View File

@ -12,6 +12,8 @@
export let editable: boolean;
export let detail: boolean;
export let handled = false;
$: ({ entity, entityInfo } = useEntity(address));
$: mimeType = String($entity?.get("FILE_MIME"));
@ -38,7 +40,7 @@
</script>
{#if handled}
<div class="preview" class:detail class:full={image || pdf}>
<div class="preview" class:detail>
{#if text}
<div class="text">
<TextViewer {address} />
@ -107,8 +109,8 @@
min-height: 33vh;
max-height: 50vh;
&.detail.full {
max-height: unset;
&.detail {
max-height: 100%;
flex-grow: 1;
// min-height: 0;
}