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

style(webui): link UpObject can be clicked whole
ci/woodpecker/push/woodpecker Pipeline was successful Details 

also slight refactor on UpObject especially banner and button sizing fixes
feat/plugins-backend
Tomáš Mládek 2024-04-05 23:31:39 +02:00
parent edc666f56a
commit f9002604fe
4 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
webui/src/lib/components/display/UpObject.svelte
View File

@ -191,24 +191,17 @@
{/if} {/if}
<HashBadge {address} /> <HashBadge {address} />
<div class="label" class:resolving title={displayLabel}> <div class="label" class:resolving title={displayLabel}>
<Editable {#if banner && !link}
value={{ t: 'String', c: displayLabel }} <Editable value={{ t: 'String', c: displayLabel }} types={['String']} on:edit={onLabelEdit}>
editable={banner} <UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
types={['String']} </Editable>
on:edit={onLabelEdit} {:else if link}
> <UpLink passthrough to={{ entity: address }}>
<div class="label-inner"> <UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
{#if banner && hasFile} </UpLink>
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} /> {:else}
{:else if link} <UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
<UpLink to={{ entity: address }}> {/if}
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
</UpLink>
{:else}
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
{/if}
</div>
</Editable>
{#if $entity?.get(ATTR_KEY) && !$entity?.get(ATTR_KEY)?.toString()?.startsWith('TYPE_')} {#if $entity?.get(ATTR_KEY) && !$entity?.get(ATTR_KEY)?.toString()?.startsWith('TYPE_')}
<div class="key">{$entity.get(ATTR_KEY)}</div> <div class="key">{$entity.get(ATTR_KEY)}</div>
{/if} {/if}
@ -314,10 +307,17 @@
} }
.label { .label {
flex-grow: 1;
min-width: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: baseline; align-items: baseline;
margin-left: 0.25em; margin-left: 0.25em;
:global(a) {
text-decoration: none;
}
} }
.label-inner { .label-inner {
@ -351,8 +351,7 @@
} }
&:not(.banner) .key { &:not(.banner) .key {
flex-grow: 1; display: inline-block;
text-align: right;
} }
&.show-type .secondary, &.show-type .secondary,
@ -384,15 +383,6 @@
} }
} }
.label {
flex-grow: 1;
min-width: 0;
:global(a) {
text-decoration: none;
}
}
.icon { .icon {
margin: 0 0.1em; margin: 0 0.1em;
} }
@ -402,6 +392,7 @@
} }
.link-button { .link-button {
padding: 0.25em;
opacity: 0.66; opacity: 0.66;
transition: transition:
opacity 0.2s, opacity 0.2s,

3
webui/src/lib/components/display/UpObjectLabel.svelte
View File

@ -24,7 +24,8 @@
<style lang="scss"> <style lang="scss">
.upobject-label { .upobject-label {
max-width: 100%; flex-grow: 1;
min-width: 0;
} }
.backpath { .backpath {

1
webui/src/lib/components/utils/IconButton.svelte
View File

@ -35,6 +35,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.25em;
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;

13
webui/src/stories/UpObject.stories.ts
View File

@ -42,6 +42,12 @@ export const Link: Story = {
} }
}; };
export const Keyed: Story = {
args: {
address: 'zb2rhmpmTFPxdhaxTQg5Ug3KHFU8DZNUPh8TaPY2v8UQVJbQk'
}
};
export const Banner: Story = { export const Banner: Story = {
args: { args: {
banner: true banner: true
@ -55,6 +61,13 @@ export const BannerWithLabels: Story = {
} }
}; };
export const KeyedBanner: Story = {
args: {
address: 'zb2rhmpmTFPxdhaxTQg5Ug3KHFU8DZNUPh8TaPY2v8UQVJbQk',
banner: true
}
};
export const Overflow: Story = { export const Overflow: Story = {
args: { args: {
labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)] labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)]