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 { createEventDispatcher } from 'svelte';
|
||||
import { type Address } from '@upnd/upend/types';
|
||||
import Icon from '$lib/components/utils/Icon.svelte';
|
||||
const dispatch = createEventDispatcher<{
|
||||
highlighted: string | undefined;
|
||||
add: Address;
|
||||
|
@ -16,6 +17,7 @@
|
|||
export let hide = false;
|
||||
|
||||
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 emptyMessage = $i18n.t('Nothing to show.');
|
||||
|
||||
|
@ -39,7 +41,10 @@
|
|||
</script>
|
||||
|
||||
<LabelBorder {hide}>
|
||||
<span slot="header">{header}</span>
|
||||
<span slot="header"
|
||||
>{#if icon}<Icon plain name={icon} />
|
||||
{/if}{header}</span
|
||||
>
|
||||
|
||||
{#if adding}
|
||||
<div class="selector">
|
||||
|
|
|
@ -90,14 +90,14 @@
|
|||
{#if group}
|
||||
{#if icon}
|
||||
<div class="icon">
|
||||
<Icon name={icon} />
|
||||
<Icon plain name={icon} />
|
||||
</div>
|
||||
{/if}
|
||||
<UpObject link address={group} labels={title ? [title] : undefined} />
|
||||
{:else}
|
||||
{#if icon}
|
||||
<div class="icon">
|
||||
<Icon name={icon} />
|
||||
<Icon plain name={icon} />
|
||||
</div>
|
||||
{/if}
|
||||
{title || ''}
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
import { debug } from 'debug';
|
||||
import { Any } from '@upnd/upend/query';
|
||||
import { isDefined } from '$lib/util/werk';
|
||||
import Icon from '$lib/components/utils/Icon.svelte';
|
||||
const dbg = debug('kestrel:Inspect');
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
|
@ -443,6 +444,7 @@
|
|||
{#if currentUntypedProperties.length > 0}
|
||||
<EntryView
|
||||
title={$i18n.t('Other Properties') || ''}
|
||||
icon="shape-triangle"
|
||||
widgets={attributeWidgets}
|
||||
entries={currentUntypedProperties}
|
||||
on:change={onChange}
|
||||
|
@ -453,6 +455,7 @@
|
|||
{#if currentUntypedLinks.length > 0}
|
||||
<EntryView
|
||||
title={$i18n.t('Links') || ''}
|
||||
icon="right-arrow-circle"
|
||||
widgets={linkWidgets}
|
||||
entries={currentUntypedLinks}
|
||||
on:change={onChange}
|
||||
|
@ -463,6 +466,7 @@
|
|||
{#if !correctlyTagged || !incorrectlyTagged}
|
||||
<EntryView
|
||||
title={`${$i18n.t('Members')}`}
|
||||
icon="link"
|
||||
widgets={taggedWidgets}
|
||||
entries={tagged}
|
||||
on:change={onChange}
|
||||
|
@ -471,6 +475,7 @@
|
|||
{:else}
|
||||
<EntryView
|
||||
title={`${$i18n.t('Typed Members')} (${correctlyTagged.length})`}
|
||||
icon="link"
|
||||
widgets={taggedWidgets}
|
||||
entries={tagged.filter((e) => correctlyTagged?.includes(e.entity))}
|
||||
on:change={onChange}
|
||||
|
@ -478,6 +483,7 @@
|
|||
/>
|
||||
<EntryView
|
||||
title={`${$i18n.t('Untyped members')} (${incorrectlyTagged.length})`}
|
||||
icon="unlink"
|
||||
widgets={taggedWidgets}
|
||||
entries={tagged.filter((e) => incorrectlyTagged?.includes(e.entity))}
|
||||
on:change={onChange}
|
||||
|
@ -488,6 +494,7 @@
|
|||
{#if currentBacklinks.length > 0}
|
||||
<EntryView
|
||||
title={`${$i18n.t('Referred to')} (${currentBacklinks.length})`}
|
||||
icon="left-arrow-circle"
|
||||
entries={currentBacklinks}
|
||||
on:change={onChange}
|
||||
{address}
|
||||
|
@ -496,7 +503,10 @@
|
|||
|
||||
{#if $entityInfo?.t === 'Attribute'}
|
||||
<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 />
|
||||
</LabelBorder>
|
||||
{/if}
|
||||
|
|
|
@ -39,6 +39,7 @@
|
|||
<EntitySetEditor
|
||||
entities={Object.keys(groups)}
|
||||
header={$i18n.t('Groups') || ''}
|
||||
icon="link-alt"
|
||||
hide={Object.keys(groups).length === 0}
|
||||
on:add={(e) => addGroup(e.detail)}
|
||||
on:remove={(e) => removeGroup(e.detail)}
|
||||
|
|
|
@ -101,7 +101,7 @@
|
|||
|
||||
{#if types.length || $entity?.attr['~IN']?.length}
|
||||
<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}
|
||||
<div class="selector">
|
||||
<Selector
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
import LabelBorder from './LabelBorder.svelte';
|
||||
import { i18n } from '$lib/i18n';
|
||||
import { format } from 'date-fns';
|
||||
import Icon from '$lib/components/utils/Icon.svelte';
|
||||
const dispatch = createEventDispatcher<{ change: WidgetChange }>();
|
||||
|
||||
export let address: string;
|
||||
|
@ -34,7 +35,7 @@
|
|||
</script>
|
||||
|
||||
<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}>
|
||||
{#each (notes || '\n').split('\n') as line, idx}
|
||||
{#if idx > 0}<br />{/if}
|
||||
|
|
Loading…
Reference in a new issue