[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;
|
||||
}
|
||||
|
||||
function clicked() {
|
||||
if (!document.fullscreenElement) {
|
||||
if (!editable) {
|
||||
imageEl.requestFullscreen();
|
||||
}
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="image-viewer">
|
||||
<div class="image-viewer" class:editable on:click={clicked}>
|
||||
{#if !imageLoaded}
|
||||
<Spinner centered />
|
||||
{/if}
|
||||
|
@ -212,6 +222,14 @@
|
|||
.preview-image {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&:not(.editable) {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
img:fullscreen {
|
||||
cursor: zoom-out;
|
||||
}
|
||||
}
|
||||
|
||||
.r6o-editor {
|
||||
|
|
Loading…
Reference in a new issue