GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -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" class="d-contents"
style="--offsetX: {offsetX}px; --offsetY: {offsetY}px; --activeSize: {activeSize}px;" style="--offsetX: {offsetX}px; --offsetY: {offsetY}px; --activeSize: {activeSize}px;"
> >
<div class:nightMode class="bordered" on:mousedown|preventDefault />
<div <div
class:nightMode class:nightMode
class:active class:active
class="nw" class="control nw"
on:mousedown|preventDefault on:mousedown|preventDefault
on:click on:click
on:pointerdown={onPointerdown(true, true)} on:pointerdown={onPointerdown(true, true)}
@ -39,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div <div
class:nightMode class:nightMode
class:active class:active
class="ne" class="control ne"
on:mousedown|preventDefault on:mousedown|preventDefault
on:click on:click
on:pointerdown={onPointerdown(true, false)} on:pointerdown={onPointerdown(true, false)}
@ -49,7 +50,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div <div
class:nightMode class:nightMode
class:active class:active
class="sw" class="control sw"
on:mousedown|preventDefault on:mousedown|preventDefault
on:click on:click
on:pointerdown={onPointerdown(false, true)} on:pointerdown={onPointerdown(false, true)}
@ -59,7 +60,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div <div
class:nightMode class:nightMode
class:active class:active
class="se" class="control se"
on:mousedown|preventDefault on:mousedown|preventDefault
on:click on:click
on:pointerdown={onPointerdown(false, false)} 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; 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; position: absolute;
width: var(--activeSize); width: var(--activeSize);
height: var(--activeSize); height: var(--activeSize);
border: 1px solid black;
&.active { &.active {
background-color: black; background-color: black;
@ -95,8 +111,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&.nw { &.nw {
top: calc(0px - var(--offsetY)); top: calc(0px - var(--offsetY));
left: calc(0px - var(--offsetX)); left: calc(0px - var(--offsetX));
border-bottom: none;
border-right: none;
&.active { &.active {
cursor: nw-resize; cursor: nw-resize;
@ -106,8 +120,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&.ne { &.ne {
top: calc(0px - var(--offsetY)); top: calc(0px - var(--offsetY));
right: calc(0px - var(--offsetX)); right: calc(0px - var(--offsetX));
border-bottom: none;
border-left: none;
&.active { &.active {
cursor: ne-resize; cursor: ne-resize;
@ -117,8 +129,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&.sw { &.sw {
bottom: calc(0px - var(--offsetY)); bottom: calc(0px - var(--offsetY));
left: calc(0px - var(--offsetX)); left: calc(0px - var(--offsetX));
border-top: none;
border-right: none;
&.active { &.active {
cursor: sw-resize; cursor: sw-resize;
@ -128,8 +138,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
&.se { &.se {
bottom: calc(0px - var(--offsetY)); bottom: calc(0px - var(--offsetY));
right: calc(0px - var(--offsetX)); right: calc(0px - var(--offsetX));
border-top: none;
border-left: none;
&.active { &.active {
cursor: se-resize; 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 <HandleControl
{active} {active}
activeSize={7} activeSize={8}
offsetX={5} offsetX={5}
offsetY={5} offsetY={5}
on:click={(event) => event.stopPropagation()} on:click={(event) => event.stopPropagation()}