feat, style: switch up groups display, add types, add highlight
This commit is contained in:
parent
ad334065fd
commit
30152a40ce
2 changed files with 45 additions and 20 deletions
|
@ -16,6 +16,7 @@
|
||||||
export let editable = false;
|
export let editable = false;
|
||||||
export let reverse = false;
|
export let reverse = false;
|
||||||
export let initialWidget: string | undefined = undefined;
|
export let initialWidget: string | undefined = undefined;
|
||||||
|
export let highlighted = false;
|
||||||
|
|
||||||
let currentWidget: string | undefined;
|
let currentWidget: string | undefined;
|
||||||
|
|
||||||
|
@ -61,7 +62,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="attribute-view labelborder">
|
<section class="attribute-view labelborder" class:highlighted>
|
||||||
<header>
|
<header>
|
||||||
<h3>
|
<h3>
|
||||||
{#if !title && type?.address}
|
{#if !title && type?.address}
|
||||||
|
@ -122,6 +123,14 @@
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@use "./util";
|
@use "./util";
|
||||||
|
|
||||||
|
section h3 {
|
||||||
|
transition: text-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.highlighted h3 {
|
||||||
|
text-shadow: #cb4b16 0 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
export let detail: boolean;
|
export let detail: boolean;
|
||||||
export let editable = false;
|
export let editable = false;
|
||||||
let showAsEntries = false;
|
let showAsEntries = false;
|
||||||
|
let highlightedType: string | undefined;
|
||||||
|
|
||||||
let blobHandled = false;
|
let blobHandled = false;
|
||||||
|
|
||||||
|
@ -246,12 +247,33 @@
|
||||||
{#if !showAsEntries}
|
{#if !showAsEntries}
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<div class="detail-col">
|
<div class="detail-col">
|
||||||
{#if groups?.length || editable}
|
<div class="blob-viewer">
|
||||||
<section class="groups labelborder">
|
<BlobViewer
|
||||||
<header><h3>{$i18n.t("Groups")}</h3></header>
|
{address}
|
||||||
|
{editable}
|
||||||
|
{detail}
|
||||||
|
on:handled={(ev) => (blobHandled = ev.detail)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<NotesEditor {address} {editable} on:change={onChange} />
|
||||||
|
{#if !$error}
|
||||||
|
<section class="tags labelborder">
|
||||||
|
<header><h3>{$i18n.t("Tags")}</h3></header>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
{#each Object.values(allTypes) as type}
|
||||||
|
<div
|
||||||
|
class="tag type"
|
||||||
|
on:mouseenter={() => (highlightedType = type.address)}
|
||||||
|
on:mouseleave={() => (highlightedType = undefined)}
|
||||||
|
>
|
||||||
|
<UpObject address={type.address} link />
|
||||||
|
{#if editable}
|
||||||
|
<IconButton name="x-circle" />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
{#each groups as [entryAddress, address]}
|
{#each groups as [entryAddress, address]}
|
||||||
<div class="group">
|
<div class="tag group">
|
||||||
<UpObject {address} link />
|
<UpObject {address} link />
|
||||||
{#if editable}
|
{#if editable}
|
||||||
<IconButton
|
<IconButton
|
||||||
|
@ -274,17 +296,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
|
||||||
<div class="blob-viewer">
|
|
||||||
<BlobViewer
|
|
||||||
{address}
|
|
||||||
{editable}
|
|
||||||
{detail}
|
|
||||||
on:handled={(ev) => (blobHandled = ev.detail)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<NotesEditor {address} {editable} on:change={onChange} />
|
|
||||||
{#if !$error}
|
|
||||||
{#if Boolean($allTypeEntries)}
|
{#if Boolean($allTypeEntries)}
|
||||||
<div class="attributes">
|
<div class="attributes">
|
||||||
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
|
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
|
||||||
|
@ -295,6 +306,7 @@
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
initialWidget={String($entity.get("LAST_ATTRIBUTE_WIDGET"))}
|
initialWidget={String($entity.get("LAST_ATTRIBUTE_WIDGET"))}
|
||||||
on:widgetSwitched={onAttributeWidgetSwitch}
|
on:widgetSwitched={onAttributeWidgetSwitch}
|
||||||
|
highlighted={highlightedType == typeAddr}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
|
@ -362,12 +374,16 @@
|
||||||
<EntryList
|
<EntryList
|
||||||
{editable}
|
{editable}
|
||||||
entries={$entity.attributes}
|
entries={$entity.attributes}
|
||||||
columns={detail ? "timestamp, provenance, attribute, value" : "attribute, value"}
|
columns={detail
|
||||||
|
? "timestamp, provenance, attribute, value"
|
||||||
|
: "attribute, value"}
|
||||||
/>
|
/>
|
||||||
<h2>{$i18n.t("Backlinks")}</h2>
|
<h2>{$i18n.t("Backlinks")}</h2>
|
||||||
<EntryList
|
<EntryList
|
||||||
entries={$entity.backlinks}
|
entries={$entity.backlinks}
|
||||||
columns={detail ? "timestamp, provenance, entity, attribute" : "entity, attribute"}
|
columns={detail
|
||||||
|
? "timestamp, provenance, entity, attribute"
|
||||||
|
: "entity, attribute"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -397,7 +413,7 @@
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.groups {
|
.tags {
|
||||||
margin: 0.25rem 0;
|
margin: 0.25rem 0;
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -406,7 +422,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group {
|
.tag {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue