[ui] brightness/contrast toolbar in ImageViewer
This commit is contained in:
parent
2b12b9ca4f
commit
889c9b59ac
1 changed files with 65 additions and 21 deletions
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
import { deleteEntry, fetchEntity, putEntry } from "../../../lib/api";
|
import { deleteEntry, fetchEntity, putEntry } from "../../../lib/api";
|
||||||
import { useEntity } from "../../../lib/entity";
|
import { useEntity } from "../../../lib/entity";
|
||||||
|
import IconButton from "../../utils/IconButton.svelte";
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
import Spinner from "../../utils/Spinner.svelte";
|
||||||
import UpObject from "../UpObject.svelte";
|
import UpObject from "../UpObject.svelte";
|
||||||
|
|
||||||
|
@ -184,16 +185,45 @@
|
||||||
document.exitFullscreen();
|
document.exitFullscreen();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let brightnesses = [0.5, 0.75, 1, 1.25, 1.5, 2, 2.5];
|
||||||
|
let brightnessIdx = 2;
|
||||||
|
function cycleBrightness() {
|
||||||
|
brightnessIdx++;
|
||||||
|
brightnessIdx = brightnessIdx % brightnesses.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
let contrasts = [0.5, 0.75, 1, 1.25, 1.5];
|
||||||
|
let contrastsIdx = 2;
|
||||||
|
function cycleContrast() {
|
||||||
|
contrastsIdx++;
|
||||||
|
contrastsIdx = contrastsIdx % contrasts.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (imageEl) {
|
||||||
|
const brightness = brightnesses[brightnessIdx];
|
||||||
|
const contrast = contrasts[contrastsIdx];
|
||||||
|
imageEl.style.filter = `brightness(${brightness}) contrast(${contrast})`;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div class="image-viewer">
|
||||||
class="image-viewer"
|
|
||||||
class:zoomable={!editable && !hasAnnotations}
|
|
||||||
on:click={clicked}
|
|
||||||
>
|
|
||||||
{#if !imageLoaded}
|
{#if !imageLoaded}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if imageLoaded}
|
||||||
|
<div class="toolbar">
|
||||||
|
<IconButton name="brightness-half" on:click={cycleBrightness} />
|
||||||
|
<IconButton name="tone" on:click={cycleContrast} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div
|
||||||
|
class="image"
|
||||||
|
class:zoomable={!editable && !hasAnnotations}
|
||||||
|
on:click={clicked}
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
class="preview-image"
|
class="preview-image"
|
||||||
src="api/{detail ? 'raw' : 'thumb'}/{address}"
|
src="api/{detail ? 'raw' : 'thumb'}/{address}"
|
||||||
|
@ -202,6 +232,7 @@
|
||||||
bind:this={imageEl}
|
bind:this={imageEl}
|
||||||
draggable="false"
|
draggable="false"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
<div class="a8sUpLink" bind:this={a8sLinkTarget}>
|
<div class="a8sUpLink" bind:this={a8sLinkTarget}>
|
||||||
{#if a8sLinkAddress}
|
{#if a8sLinkAddress}
|
||||||
<div class="link">
|
<div class="link">
|
||||||
|
@ -216,6 +247,12 @@
|
||||||
|
|
||||||
.image-viewer {
|
.image-viewer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
||||||
& > *,
|
& > *,
|
||||||
|
@ -226,11 +263,18 @@
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-image {
|
img {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.zoomable {
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomable {
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue