Change position of float buttons and dimension

* So we can show dimensions at lower image sizes
This commit is contained in:
Henrik Giesel 2021-07-21 18:35:57 +02:00 committed by Damien Elmes
parent 1472dc854c
commit 92ed342547

View file

@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let container: HTMLElement; export let container: HTMLElement;
$: showDimensions = image $: showDimensions = image
? parseInt(getComputedStyle(image).getPropertyValue("width")) > 220 ? parseInt(getComputedStyle(image).getPropertyValue("width")) > 100
: false; : false;
$: selector = `:not([src="${image?.getAttribute("src")}"])`; $: selector = `:not([src="${image?.getAttribute("src")}"])`;
@ -119,7 +119,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
width = Math.trunc(naturalWidth * heightIncrease); width = Math.trunc(naturalWidth * heightIncrease);
} }
showDimensions = width > 220; showDimensions = width > 100;
image!.style.width = `${width}px`; image!.style.width = `${width}px`;
image!.style.height = `${height}px`; image!.style.height = `${height}px`;
@ -146,7 +146,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mousedown|preventDefault on:mousedown|preventDefault
on:dblclick={onDblclick} on:dblclick={onDblclick}
/> />
<div class="image-handle-buttons" class:is-rtl={isRtl}> <div class="image-handle-float" class:is-rtl={isRtl}>
<ImageHandleFloat {isRtl} bind:float={image.style.float} /> <ImageHandleFloat {isRtl} bind:float={image.style.float} />
</div> </div>
<div class="image-handle-size-select" class:is-rtl={isRtl}> <div class="image-handle-size-select" class:is-rtl={isRtl}>
@ -215,7 +215,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
opacity: 0.2; opacity: 0.2;
} }
.image-handle-buttons { .image-handle-float {
top: 3px; top: 3px;
left: 3px; left: 3px;
@ -226,12 +226,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
.image-handle-size-select { .image-handle-size-select {
bottom: 3px; top: 3px;
left: 3px; right: 3px;
&.is-rtl { &.is-rtl {
left: auto; right: auto;
right: 3px; left: 3px;
} }
} }