style(webui): add icons to Inspect sections
This commit is contained in:
parent
85c613f09a
commit
3d982a16b5
6 changed files with 23 additions and 6 deletions
|
@ -6,6 +6,7 @@
|
||||||
import LabelBorder from './utils/LabelBorder.svelte';
|
import LabelBorder from './utils/LabelBorder.svelte';
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import { type Address } from '@upnd/upend/types';
|
import { type Address } from '@upnd/upend/types';
|
||||||
|
import Icon from '$lib/components/utils/Icon.svelte';
|
||||||
const dispatch = createEventDispatcher<{
|
const dispatch = createEventDispatcher<{
|
||||||
highlighted: string | undefined;
|
highlighted: string | undefined;
|
||||||
add: Address;
|
add: Address;
|
||||||
|
@ -16,6 +17,7 @@
|
||||||
export let hide = false;
|
export let hide = false;
|
||||||
|
|
||||||
export let header = '';
|
export let header = '';
|
||||||
|
export let icon: string | null = null;
|
||||||
export let confirmRemoveMessage: string | null = $i18n.t('Are you sure you want to remove this?');
|
export let confirmRemoveMessage: string | null = $i18n.t('Are you sure you want to remove this?');
|
||||||
export let emptyMessage = $i18n.t('Nothing to show.');
|
export let emptyMessage = $i18n.t('Nothing to show.');
|
||||||
|
|
||||||
|
@ -39,7 +41,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LabelBorder {hide}>
|
<LabelBorder {hide}>
|
||||||
<span slot="header">{header}</span>
|
<span slot="header"
|
||||||
|
>{#if icon}<Icon plain name={icon} />
|
||||||
|
{/if}{header}</span
|
||||||
|
>
|
||||||
|
|
||||||
{#if adding}
|
{#if adding}
|
||||||
<div class="selector">
|
<div class="selector">
|
||||||
|
|
|
@ -90,14 +90,14 @@
|
||||||
{#if group}
|
{#if group}
|
||||||
{#if icon}
|
{#if icon}
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<Icon name={icon} />
|
<Icon plain name={icon} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<UpObject link address={group} labels={title ? [title] : undefined} />
|
<UpObject link address={group} labels={title ? [title] : undefined} />
|
||||||
{:else}
|
{:else}
|
||||||
{#if icon}
|
{#if icon}
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<Icon name={icon} />
|
<Icon plain name={icon} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{title || ''}
|
{title || ''}
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
import { debug } from 'debug';
|
import { debug } from 'debug';
|
||||||
import { Any } from '@upnd/upend/query';
|
import { Any } from '@upnd/upend/query';
|
||||||
import { isDefined } from '$lib/util/werk';
|
import { isDefined } from '$lib/util/werk';
|
||||||
|
import Icon from '$lib/components/utils/Icon.svelte';
|
||||||
const dbg = debug('kestrel:Inspect');
|
const dbg = debug('kestrel:Inspect');
|
||||||
|
|
||||||
const dispatch = createEventDispatcher<{
|
const dispatch = createEventDispatcher<{
|
||||||
|
@ -443,6 +444,7 @@
|
||||||
{#if currentUntypedProperties.length > 0}
|
{#if currentUntypedProperties.length > 0}
|
||||||
<EntryView
|
<EntryView
|
||||||
title={$i18n.t('Other Properties') || ''}
|
title={$i18n.t('Other Properties') || ''}
|
||||||
|
icon="shape-triangle"
|
||||||
widgets={attributeWidgets}
|
widgets={attributeWidgets}
|
||||||
entries={currentUntypedProperties}
|
entries={currentUntypedProperties}
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
|
@ -453,6 +455,7 @@
|
||||||
{#if currentUntypedLinks.length > 0}
|
{#if currentUntypedLinks.length > 0}
|
||||||
<EntryView
|
<EntryView
|
||||||
title={$i18n.t('Links') || ''}
|
title={$i18n.t('Links') || ''}
|
||||||
|
icon="right-arrow-circle"
|
||||||
widgets={linkWidgets}
|
widgets={linkWidgets}
|
||||||
entries={currentUntypedLinks}
|
entries={currentUntypedLinks}
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
|
@ -463,6 +466,7 @@
|
||||||
{#if !correctlyTagged || !incorrectlyTagged}
|
{#if !correctlyTagged || !incorrectlyTagged}
|
||||||
<EntryView
|
<EntryView
|
||||||
title={`${$i18n.t('Members')}`}
|
title={`${$i18n.t('Members')}`}
|
||||||
|
icon="link"
|
||||||
widgets={taggedWidgets}
|
widgets={taggedWidgets}
|
||||||
entries={tagged}
|
entries={tagged}
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
|
@ -471,6 +475,7 @@
|
||||||
{:else}
|
{:else}
|
||||||
<EntryView
|
<EntryView
|
||||||
title={`${$i18n.t('Typed Members')} (${correctlyTagged.length})`}
|
title={`${$i18n.t('Typed Members')} (${correctlyTagged.length})`}
|
||||||
|
icon="link"
|
||||||
widgets={taggedWidgets}
|
widgets={taggedWidgets}
|
||||||
entries={tagged.filter((e) => correctlyTagged?.includes(e.entity))}
|
entries={tagged.filter((e) => correctlyTagged?.includes(e.entity))}
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
|
@ -478,6 +483,7 @@
|
||||||
/>
|
/>
|
||||||
<EntryView
|
<EntryView
|
||||||
title={`${$i18n.t('Untyped members')} (${incorrectlyTagged.length})`}
|
title={`${$i18n.t('Untyped members')} (${incorrectlyTagged.length})`}
|
||||||
|
icon="unlink"
|
||||||
widgets={taggedWidgets}
|
widgets={taggedWidgets}
|
||||||
entries={tagged.filter((e) => incorrectlyTagged?.includes(e.entity))}
|
entries={tagged.filter((e) => incorrectlyTagged?.includes(e.entity))}
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
|
@ -488,6 +494,7 @@
|
||||||
{#if currentBacklinks.length > 0}
|
{#if currentBacklinks.length > 0}
|
||||||
<EntryView
|
<EntryView
|
||||||
title={`${$i18n.t('Referred to')} (${currentBacklinks.length})`}
|
title={`${$i18n.t('Referred to')} (${currentBacklinks.length})`}
|
||||||
|
icon="left-arrow-circle"
|
||||||
entries={currentBacklinks}
|
entries={currentBacklinks}
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
{address}
|
{address}
|
||||||
|
@ -496,7 +503,10 @@
|
||||||
|
|
||||||
{#if $entityInfo?.t === 'Attribute'}
|
{#if $entityInfo?.t === 'Attribute'}
|
||||||
<LabelBorder>
|
<LabelBorder>
|
||||||
<span slot="header">{$i18n.t('Used')} ({attributesUsed.length})</span>
|
<span slot="header">
|
||||||
|
<Icon plain name="color" />
|
||||||
|
{$i18n.t('Used')} ({attributesUsed.length})
|
||||||
|
</span>
|
||||||
<EntryList columns="entity,value" entries={attributesUsed} orderByValue />
|
<EntryList columns="entity,value" entries={attributesUsed} orderByValue />
|
||||||
</LabelBorder>
|
</LabelBorder>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -39,6 +39,7 @@
|
||||||
<EntitySetEditor
|
<EntitySetEditor
|
||||||
entities={Object.keys(groups)}
|
entities={Object.keys(groups)}
|
||||||
header={$i18n.t('Groups') || ''}
|
header={$i18n.t('Groups') || ''}
|
||||||
|
icon="link-alt"
|
||||||
hide={Object.keys(groups).length === 0}
|
hide={Object.keys(groups).length === 0}
|
||||||
on:add={(e) => addGroup(e.detail)}
|
on:add={(e) => addGroup(e.detail)}
|
||||||
on:remove={(e) => removeGroup(e.detail)}
|
on:remove={(e) => removeGroup(e.detail)}
|
||||||
|
|
|
@ -101,7 +101,7 @@
|
||||||
|
|
||||||
{#if types.length || $entity?.attr['~IN']?.length}
|
{#if types.length || $entity?.attr['~IN']?.length}
|
||||||
<LabelBorder hide={types.length === 0}>
|
<LabelBorder hide={types.length === 0}>
|
||||||
<span slot="header">{$i18n.t('Type Attributes')}</span>
|
<span slot="header"><Icon plain name="list-check" /> {$i18n.t('Type Attributes')}</span>
|
||||||
{#if adding}
|
{#if adding}
|
||||||
<div class="selector">
|
<div class="selector">
|
||||||
<Selector
|
<Selector
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
import LabelBorder from './LabelBorder.svelte';
|
import LabelBorder from './LabelBorder.svelte';
|
||||||
import { i18n } from '$lib/i18n';
|
import { i18n } from '$lib/i18n';
|
||||||
import { format } from 'date-fns';
|
import { format } from 'date-fns';
|
||||||
|
import Icon from '$lib/components/utils/Icon.svelte';
|
||||||
const dispatch = createEventDispatcher<{ change: WidgetChange }>();
|
const dispatch = createEventDispatcher<{ change: WidgetChange }>();
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
|
@ -34,7 +35,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LabelBorder hide={!notes?.length}>
|
<LabelBorder hide={!notes?.length}>
|
||||||
<span slot="header">Notes</span>
|
<span slot="header"><Icon plain name="note" /> {$i18n.t('Notes')}</span>
|
||||||
<div class="notes" contenteditable on:input={onInput} bind:this={contentEl}>
|
<div class="notes" contenteditable on:input={onInput} bind:this={contentEl}>
|
||||||
{#each (notes || '\n').split('\n') as line, idx}
|
{#each (notes || '\n').split('\n') as line, idx}
|
||||||
{#if idx > 0}<br />{/if}
|
{#if idx > 0}<br />{/if}
|
||||||
|
|
Loading…
Reference in a new issue