style(frontend): Add action dropdown to UpObject banner in Inspect column
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
99f15dd584
commit
663597c3f3
3 changed files with 90 additions and 21 deletions
|
@ -405,7 +405,13 @@
|
||||||
<h2>
|
<h2>
|
||||||
{#if $entity}
|
{#if $entity}
|
||||||
{#key $entity}
|
{#key $entity}
|
||||||
<UpObject banner {address} on:resolved={onResolved} on:change={onChange} />
|
<UpObject
|
||||||
|
banner
|
||||||
|
{address}
|
||||||
|
on:resolved={onResolved}
|
||||||
|
on:change={onChange}
|
||||||
|
on:delete={deleteObject}
|
||||||
|
/>
|
||||||
{/key}
|
{/key}
|
||||||
{:else}
|
{:else}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
|
@ -542,14 +548,6 @@
|
||||||
on:click={() => (showAsEntries = !showAsEntries)}
|
on:click={() => (showAsEntries = !showAsEntries)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<IconButton
|
|
||||||
name="trash"
|
|
||||||
outline
|
|
||||||
subdued
|
|
||||||
color="#dc322f"
|
|
||||||
on:click={deleteObject}
|
|
||||||
title={$i18n.t('Delete object') || ''}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher, getContext } from 'svelte';
|
import { createEventDispatcher, getContext } from 'svelte';
|
||||||
|
|
||||||
import HashBadge from './HashBadge.svelte';
|
import HashBadge from './HashBadge.svelte';
|
||||||
import UpObjectLabel from './UpObjectLabel.svelte';
|
import UpObjectLabel from './UpObjectLabel.svelte';
|
||||||
import UpLink from './UpLink.svelte';
|
import UpLink from './UpLink.svelte';
|
||||||
|
@ -22,8 +21,13 @@
|
||||||
import Editable from '$lib/components/utils/Editable.svelte';
|
import Editable from '$lib/components/utils/Editable.svelte';
|
||||||
import type { WidgetChange } from '$lib/types/base';
|
import type { WidgetChange } from '$lib/types/base';
|
||||||
import type { SelectorValue } from '$lib/components/utils/Selector.svelte';
|
import type { SelectorValue } from '$lib/components/utils/Selector.svelte';
|
||||||
|
import { slide } from 'svelte/transition';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher<{ change: WidgetChange; resolved: string[] }>();
|
const dispatch = createEventDispatcher<{
|
||||||
|
change: WidgetChange;
|
||||||
|
resolved: string[];
|
||||||
|
delete: null;
|
||||||
|
}>();
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let labels: string[] | undefined = undefined;
|
export let labels: string[] | undefined = undefined;
|
||||||
|
@ -55,6 +59,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let openActions = false;
|
||||||
|
|
||||||
// Identification
|
// Identification
|
||||||
let inferredIds: string[] = [];
|
let inferredIds: string[] = [];
|
||||||
$: inferredIds = $entity?.identify() || [];
|
$: inferredIds = $entity?.identify() || [];
|
||||||
|
@ -170,6 +176,12 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:body
|
||||||
|
on:click={() => {
|
||||||
|
openActions = false;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="upobject"
|
class="upobject"
|
||||||
class:left-active={address == $addresses[$index - 1]}
|
class:left-active={address == $addresses[$index - 1]}
|
||||||
|
@ -236,15 +248,34 @@
|
||||||
<Icon name="download" />
|
<Icon name="download" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{#if $vaultInfo?.desktop && hasFile}
|
|
||||||
<div class="icon">
|
|
||||||
<IconButton
|
|
||||||
name="window-alt"
|
|
||||||
on:click={nativeOpen}
|
|
||||||
title={$i18n.t('Open in default application...') || ''}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
<IconButton
|
||||||
|
name="shape-circle"
|
||||||
|
title={$i18n.t('Actions') || ''}
|
||||||
|
on:click={() => (openActions = true)}
|
||||||
|
/>
|
||||||
|
{#if openActions}
|
||||||
|
<ul class="actions" transition:slide>
|
||||||
|
{#if $vaultInfo?.desktop && hasFile}
|
||||||
|
<li>
|
||||||
|
<button on:click={nativeOpen}>
|
||||||
|
<Icon name="window-alt" />
|
||||||
|
{$i18n.t('Open in default application...')}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<hr />
|
||||||
|
{/if}
|
||||||
|
<slot name="actions" />
|
||||||
|
{#if $$slots.actions}
|
||||||
|
<hr />
|
||||||
|
{/if}
|
||||||
|
<li>
|
||||||
|
<button on:click={() => dispatch('delete')} style="color: #dc322f">
|
||||||
|
<Icon name="trash" />
|
||||||
|
{$i18n.t('Delete object')}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
@ -418,4 +449,44 @@
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
z-index: 99;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.2em;
|
||||||
|
right: 0.2em;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.5em;
|
||||||
|
border: 1px solid var(--foreground);
|
||||||
|
border-radius: 0.2em;
|
||||||
|
background: var(--background);
|
||||||
|
box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.5);
|
||||||
|
font-size: 1rem;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
& li {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
& hr {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.25em auto;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
& button {
|
||||||
|
display: block;
|
||||||
|
padding: 0.25em 1em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition:
|
||||||
|
background 0.2s,
|
||||||
|
border-color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--foreground);
|
||||||
|
background: var(--background-lightest);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -95,7 +95,7 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
|
box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.user {
|
.user {
|
||||||
|
|
Loading…
Reference in a new issue