GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 08:46:37 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Add a dashed border around pictures when image-editing

Browse source
This commit is contained in:
Henrik Giesel 2021-08-31 22:52:23 +02:00 committed by Damien Elmes
parent af7f2c06df
commit 1a79e9aac9
2 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
ts/editor/HandleControl.svelte
View file

@ -26,10 +26,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class="d-contents"
style="--offsetX: {offsetX}px; --offsetY: {offsetY}px; --activeSize: {activeSize}px;"
>
<div class:nightMode class="bordered" on:mousedown|preventDefault />
<div
class:nightMode
class:active
class="nw"
class="control nw"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(true, true)}
@ -39,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div
class:nightMode
class:active
class="ne"
class="control ne"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(true, false)}
@ -49,7 +50,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div
class:nightMode
class:active
class="sw"
class="control sw"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(false, true)}
@ -59,7 +60,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div
class:nightMode
class:active
class="se"
class="control se"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(false, false)}
@ -73,12 +74,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
display: contents;
}
div > div {
.bordered {
position: absolute;
top: calc(0px - var(--activeSize) + var(--offsetY));
bottom: calc(0px - var(--activeSize) + var(--offsetY));
left: calc(0px - var(--activeSize) + var(--offsetX));
right: calc(0px - var(--activeSize) + var(--offsetX));
pointer-events: none;
border: 2px dashed black;
&.nightMode {
border-color: white;
}
}
.control {
position: absolute;
width: var(--activeSize);
height: var(--activeSize);
border: 1px solid black;
&.active {
background-color: black;
@ -95,8 +111,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&.nw {
top: calc(0px - var(--offsetY));
left: calc(0px - var(--offsetX));
border-bottom: none;
border-right: none;
&.active {
cursor: nw-resize;
@ -106,8 +120,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&.ne {
top: calc(0px - var(--offsetY));
right: calc(0px - var(--offsetX));
border-bottom: none;
border-left: none;
&.active {
cursor: ne-resize;
@ -117,8 +129,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&.sw {
bottom: calc(0px - var(--offsetY));
left: calc(0px - var(--offsetX));
border-top: none;
border-right: none;
&.active {
cursor: sw-resize;
@ -128,8 +138,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&.se {
bottom: calc(0px - var(--offsetY));
right: calc(0px - var(--offsetX));
border-top: none;
border-left: none;
&.active {
cursor: se-resize;

2
ts/editor/ImageHandle.svelte
View file

@ -179,7 +179,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<HandleControl
{active}
activeSize={7}
activeSize={8}
offsetX={5}
offsetY={5}
on:click={(event) => event.stopPropagation()}