feat(webui): display `COVER` image as the column background
ci/woodpecker/push/woodpecker Pipeline failed
Details
ci/woodpecker/push/woodpecker Pipeline failed
Details
parent
2faa113691
commit
794b130645
|
@ -11,7 +11,7 @@
|
|||
export let address: string | undefined = undefined;
|
||||
export let index: number;
|
||||
export let only: boolean;
|
||||
export let background = 'var(--background-lighter)';
|
||||
export let background: string | undefined = undefined;
|
||||
export let forceDetail = false;
|
||||
let shifted = false;
|
||||
let key = Math.random();
|
||||
|
@ -64,6 +64,19 @@
|
|||
window.addEventListener('mouseup', onMouseUp);
|
||||
}
|
||||
|
||||
let resultBackground = background;
|
||||
let imageBackground: string | undefined = undefined;
|
||||
$: {
|
||||
if (background?.startsWith('url(')) {
|
||||
imageBackground = background;
|
||||
resultBackground = 'transparent';
|
||||
} else {
|
||||
resultBackground = background;
|
||||
imageBackground = undefined;
|
||||
}
|
||||
resultBackground ||= 'var(--background-lighter)';
|
||||
}
|
||||
|
||||
function reload() {
|
||||
key = Math.random();
|
||||
}
|
||||
|
@ -73,9 +86,13 @@
|
|||
<div
|
||||
class="browse-column"
|
||||
class:detail
|
||||
style="--background-color: {background}"
|
||||
style="--background: {resultBackground}"
|
||||
class:image-background={Boolean(imageBackground)}
|
||||
on:mousemove={(ev) => (shifted = ev.shiftKey)}
|
||||
>
|
||||
{#if imageBackground}
|
||||
<div class="background" style="background-image: {imageBackground}" />
|
||||
{/if}
|
||||
<div class="view" style="--width: {width}px">
|
||||
<header>
|
||||
{#if address}
|
||||
|
@ -120,7 +137,11 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use 'sass:color';
|
||||
@use '../styles/colors.scss';
|
||||
|
||||
.browse-column {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
@ -144,12 +165,14 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: var(--background-color);
|
||||
background: var(--background);
|
||||
color: var(--foreground-lighter);
|
||||
border: 1px solid var(--foreground-lightest);
|
||||
border-radius: 0.5em;
|
||||
padding: 1rem;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
// transition: min-width 0.2s, max-width 0.2s;
|
||||
// TODO - container has nowhere to scroll, breaking `detail` scroll
|
||||
|
||||
|
@ -165,6 +188,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
.browse-column.image-background {
|
||||
--foreground: var(--foreground-lighter);
|
||||
--background-lighter: rgba(255, 255, 255, 0.08);
|
||||
--color-active: #{color.scale(colors.$orange, $alpha: -75%)};
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 0.5rem);
|
||||
height: 100%;
|
||||
border-radius: 0.5em;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(0.5rem) brightness(0.3) contrast(1.1);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.resizeHandle {
|
||||
cursor: ew-resize;
|
||||
height: 100%;
|
||||
|
|
|
@ -22,10 +22,13 @@
|
|||
import { debug } from 'debug';
|
||||
import { Any } from '@upnd/upend/query';
|
||||
import { isDefined } from '$lib/util/werk';
|
||||
|
||||
const dbg = debug('kestrel:Inspect');
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher<{
|
||||
resolved: string[];
|
||||
close: void;
|
||||
background: string | undefined;
|
||||
}>();
|
||||
|
||||
export let address: string;
|
||||
export let detail: boolean;
|
||||
|
@ -147,14 +150,15 @@
|
|||
'NOTE',
|
||||
'LAST_VISITED',
|
||||
'NUM_VISITED',
|
||||
'LAST_ATTRIBUTE_WIDGET'
|
||||
'LAST_ATTRIBUTE_WIDGET',
|
||||
'COVER'
|
||||
].includes(entry.attribute)
|
||||
);
|
||||
|
||||
$: currentUntypedProperties = filteredUntypedProperties;
|
||||
|
||||
$: filteredUntypedLinks = untypedLinks.filter(
|
||||
(entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute)
|
||||
(entry) => ![ATTR_IN, ATTR_OF, 'COVER'].includes(entry.attribute)
|
||||
);
|
||||
|
||||
$: currentUntypedLinks = filteredUntypedLinks;
|
||||
|
@ -389,6 +393,19 @@
|
|||
);
|
||||
}
|
||||
});
|
||||
|
||||
$: {
|
||||
const cover = $entity?.attr['COVER']?.[0];
|
||||
if (!cover) {
|
||||
dispatch('background', undefined);
|
||||
} else {
|
||||
switch (cover.value.t) {
|
||||
case 'Address':
|
||||
dispatch('background', `url('${api.getRaw(cover.value.c)}')`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
|
@ -248,12 +248,12 @@
|
|||
border-radius: 4px;
|
||||
|
||||
&.left-active {
|
||||
background: linear-gradient(90deg, colors.$orange 0%, transparent 100%);
|
||||
background: linear-gradient(90deg, var(--color-active) 0%, transparent 100%);
|
||||
padding: 2px 0 2px 2px;
|
||||
}
|
||||
|
||||
&.right-active {
|
||||
background: linear-gradient(90deg, transparent 0%, colors.$orange 100%);
|
||||
background: linear-gradient(90deg, transparent 0%, var(--color-active) 100%);
|
||||
padding: 2px 2px 2px 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
--background-lightest: #{color.adjust($rebase02, $lightness: 1.5%)};
|
||||
--primary: #{colors.$blue};
|
||||
--primary-lighter: #{color.adjust(colors.$blue, $lightness: 25%)};
|
||||
--color-active: #{colors.$orange};
|
||||
|
||||
background-color: $rebase03;
|
||||
color: $rebase0;
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
let root: HTMLDivElement;
|
||||
let identities: string[] = [];
|
||||
$: addresses = $page.params.addresses.split(',');
|
||||
let backgrounds: Record<string, string | undefined> = {};
|
||||
|
||||
function add(value: SelectorValue) {
|
||||
if (value.t !== 'Address') return;
|
||||
|
@ -147,13 +148,20 @@
|
|||
{address}
|
||||
{index}
|
||||
{only}
|
||||
background={backgrounds[address]}
|
||||
on:close={() => close(index)}
|
||||
on:resolved={(ev) => onIdentified(index, ev)}
|
||||
on:detail={(ev) => onDetailChanged(index, ev)}
|
||||
on:combine={() => addCombine(address)}
|
||||
let:detail
|
||||
>
|
||||
<Inspect {address} {detail} on:resolved on:close />
|
||||
<Inspect
|
||||
{address}
|
||||
{detail}
|
||||
on:resolved
|
||||
on:close
|
||||
on:background={(ev) => (backgrounds[address] = ev.detail)}
|
||||
/>
|
||||
</BrowseColumn>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue