[ui] add fullscreen viewing for images
This commit is contained in:
parent
0213b3c9c1
commit
d21dbebd66
1 changed files with 19 additions and 1 deletions
|
@ -171,9 +171,19 @@
|
||||||
|
|
||||||
imageLoaded = true;
|
imageLoaded = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clicked() {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
if (!editable) {
|
||||||
|
imageEl.requestFullscreen();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="image-viewer">
|
<div class="image-viewer" class:editable on:click={clicked}>
|
||||||
{#if !imageLoaded}
|
{#if !imageLoaded}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -212,6 +222,14 @@
|
||||||
.preview-image {
|
.preview-image {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:not(.editable) {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:fullscreen {
|
||||||
|
cursor: zoom-out;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.r6o-editor {
|
.r6o-editor {
|
||||||
|
|
Loading…
Reference in a new issue