wip: multiple modes of display for surface
parent
0be4239b6e
commit
2cab32ec32
|
@ -20,6 +20,15 @@ main {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
background: var(--background-lighter);
|
||||||
|
color: var(--foreground);
|
||||||
|
font-family: var(--default-font);
|
||||||
|
|
||||||
|
border: 1px solid var(--foreground-lighter);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,9 @@
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import type { ZoomTransform } from "d3";
|
import type { ZoomTransform } from "d3";
|
||||||
import Spinner from "../components/utils/Spinner.svelte";
|
import Spinner from "../components/utils/Spinner.svelte";
|
||||||
|
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
||||||
|
import BlobPreview from "../components/display/BlobPreview.svelte";
|
||||||
|
import { i18n } from "../i18n";
|
||||||
|
|
||||||
const urlSearch = window.location.href.substring(
|
const urlSearch = window.location.href.substring(
|
||||||
window.location.href.indexOf("?")
|
window.location.href.indexOf("?")
|
||||||
|
@ -14,6 +17,7 @@
|
||||||
|
|
||||||
let x: string = urlParams.get("x");
|
let x: string = urlParams.get("x");
|
||||||
let y: string = urlParams.get("y");
|
let y: string = urlParams.get("y");
|
||||||
|
let viewMode = "link";
|
||||||
|
|
||||||
let loaded = false;
|
let loaded = false;
|
||||||
let viewHeight = 0;
|
let viewHeight = 0;
|
||||||
|
@ -117,6 +121,14 @@
|
||||||
<div class="axis-selector">
|
<div class="axis-selector">
|
||||||
Y: <Selector type="attribute" bind:attribute={y} />
|
Y: <Selector type="attribute" bind:attribute={y} />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="view-mode-selector">
|
||||||
|
{$i18n.t("View as")}
|
||||||
|
<select bind:value={viewMode}>
|
||||||
|
<option value="link">{$i18n.t("Link")}</option>
|
||||||
|
<option value="card">{$i18n.t("Card")}</option>
|
||||||
|
<!-- <option value="preview">{$i18n.t("Preview")}</option> -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="view"
|
class="view"
|
||||||
|
@ -136,7 +148,13 @@
|
||||||
style="left: {point.x}px; top: {viewHeight - point.y}px"
|
style="left: {point.x}px; top: {viewHeight - point.y}px"
|
||||||
>
|
>
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<UpObject point link address={point.address} />
|
{#if viewMode == "link"}
|
||||||
|
<UpObject point link address={point.address} />
|
||||||
|
{:else if viewMode == "card"}
|
||||||
|
<UpObjectCard address={point.address} />
|
||||||
|
{:else if viewMode == "preview"}
|
||||||
|
<BlobPreview address={point.address} />
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
Loading…
Reference in New Issue