[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 { useEntity } from "../../../lib/entity";
|
||||
import IconButton from "../../utils/IconButton.svelte";
|
||||
import Spinner from "../../utils/Spinner.svelte";
|
||||
import UpObject from "../UpObject.svelte";
|
||||
|
||||
|
@ -184,24 +185,54 @@
|
|||
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>
|
||||
|
||||
<div
|
||||
class="image-viewer"
|
||||
class:zoomable={!editable && !hasAnnotations}
|
||||
on:click={clicked}
|
||||
>
|
||||
<div class="image-viewer">
|
||||
{#if !imageLoaded}
|
||||
<Spinner centered />
|
||||
{/if}
|
||||
<img
|
||||
class="preview-image"
|
||||
src="api/{detail ? 'raw' : 'thumb'}/{address}"
|
||||
alt={address}
|
||||
on:load={loaded}
|
||||
bind:this={imageEl}
|
||||
draggable="false"
|
||||
/>
|
||||
{#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
|
||||
class="preview-image"
|
||||
src="api/{detail ? 'raw' : 'thumb'}/{address}"
|
||||
alt={address}
|
||||
on:load={loaded}
|
||||
bind:this={imageEl}
|
||||
draggable="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="a8sUpLink" bind:this={a8sLinkTarget}>
|
||||
{#if a8sLinkAddress}
|
||||
<div class="link">
|
||||
|
@ -216,21 +247,34 @@
|
|||
|
||||
.image-viewer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
|
||||
& > *,
|
||||
img {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
.image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
|
||||
& > *,
|
||||
img {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
margin: auto;
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&.zoomable {
|
||||
.zoomable {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue