thm
/
upend
1
0
Fork 0
Code Issues 73 Pull Requests Packages Projects Releases 5 Wiki Activity

refactor(webui): upobject label into own component
ci/woodpecker/push/woodpecker Pipeline was successful Details

refactor/errors
Tomáš Mládek 2023-11-02 11:29:09 +01:00
parent 8f1c713ef8
commit 52098758a1
2 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
webui/src/components/display/UpObject.svelte
View File

@ -2,7 +2,7 @@
import { createEventDispatcher, getContext } from "svelte";
import HashBadge from "./HashBadge.svelte";
import Ellipsis from "../utils/Ellipsis.svelte";
import UpObjectLabel from "./UpObjectLabel.svelte";
import UpLink from "./UpLink.svelte";
import Icon from "../utils/Icon.svelte";
import { readable, writable, type Readable } from "svelte/store";
@ -163,34 +163,13 @@
<div class="separator" />
<div class="label" class:resolving title={displayLabel}>
{#if banner && isFile}
<Ellipsis value={displayLabel}>
{#if resolvedBackpath}
<span class="backpath">
{resolvedBackpath.join("/")}
</span>
{/if}
{displayLabel}
</Ellipsis>
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
{:else if link}
<UpLink to={{ entity: address }}>
<Ellipsis value={displayLabel}>
{#if resolvedBackpath}
<span class="backpath">
{resolvedBackpath.join("/")}
</span>
{/if}
{displayLabel}
</Ellipsis>
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
</UpLink>
{:else}
<Ellipsis value={displayLabel}>
{#if resolvedBackpath}
<span class="backpath">
{resolvedBackpath.join("/")}
</span>
{/if}
{displayLabel}
</Ellipsis>
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
{/if}
<div class="type">
{$entityInfo?.t}
@ -304,11 +283,6 @@
margin: 0 0.1em;
}
.backpath {
opacity: 0.66;
margin-right: 0.25em;
}
.resolving {
opacity: 0.7;
}

44
webui/src/components/display/UpObjectLabel.svelte Normal file
View File

@ -0,0 +1,44 @@
<script lang="ts">
import Ellipsis from "../utils/Ellipsis.svelte";
export let label: string;
export let backpath: string[] = [];
</script>
<div class="upobject-label">
<Ellipsis value={label}>
{#if backpath.length}
<span class="backpath">
{#each backpath as component}
<span class="component">
{component}
</span>
{/each}
</span>
{/if}
<span class="label">
{label}
</span>
</Ellipsis>
</div>
<style scoped lang="scss">
.backpath {
opacity: 0.66;
margin-right: 0.25em;
.component::after {
content: "∋";
margin-left: 0.2em;
margin-right: 0.4em;
font-size: .66em;
font-weight: bold;
position: relative;
top: -0.125em;
}
.component:last-child::after {
content: "";
}
}
</style>