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>
|
||||
{#if $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}
|
||||
{:else}
|
||||
<Spinner centered />
|
||||
|
@ -542,14 +548,6 @@
|
|||
on:click={() => (showAsEntries = !showAsEntries)}
|
||||
/>
|
||||
</div>
|
||||
<IconButton
|
||||
name="trash"
|
||||
outline
|
||||
subdued
|
||||
color="#dc322f"
|
||||
on:click={deleteObject}
|
||||
title={$i18n.t('Delete object') || ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, getContext } from 'svelte';
|
||||
|
||||
import HashBadge from './HashBadge.svelte';
|
||||
import UpObjectLabel from './UpObjectLabel.svelte';
|
||||
import UpLink from './UpLink.svelte';
|
||||
|
@ -22,8 +21,13 @@
|
|||
import Editable from '$lib/components/utils/Editable.svelte';
|
||||
import type { WidgetChange } from '$lib/types/base';
|
||||
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 labels: string[] | undefined = undefined;
|
||||
|
@ -55,6 +59,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
let openActions = false;
|
||||
|
||||
// Identification
|
||||
let inferredIds: string[] = [];
|
||||
$: inferredIds = $entity?.identify() || [];
|
||||
|
@ -170,6 +176,12 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={() => {
|
||||
openActions = false;
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="upobject"
|
||||
class:left-active={address == $addresses[$index - 1]}
|
||||
|
@ -236,15 +248,34 @@
|
|||
<Icon name="download" />
|
||||
</a>
|
||||
</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}
|
||||
</div>
|
||||
|
@ -418,4 +449,44 @@
|
|||
opacity: 0.7;
|
||||
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>
|
||||
|
|
|
@ -95,7 +95,7 @@
|
|||
border-radius: 4px;
|
||||
|
||||
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 {
|
||||
|
|
Loading…
Reference in a new issue