From 503e643fd45bd242b0396ee7e87ccd3921a34064 Mon Sep 17 00:00:00 2001
From: artemisSystem <39034386+artemisSystem@users.noreply.github.com>
Date: Mon, 7 Dec 2020 13:11:41 +0100
Subject: [PATCH] add separate unpin button to pinned shapes (#839)

Co-authored-by: 3ddy <39034386+3ddyy@users.noreply.github.com>
---
 src/css/ingame_hud/pinned_shapes.scss  | 23 ++++++++++++++++++++++-
 src/js/game/hud/parts/pinned_shapes.js |  7 +++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/css/ingame_hud/pinned_shapes.scss b/src/css/ingame_hud/pinned_shapes.scss
index 671f5aa5..6f44522b 100644
--- a/src/css/ingame_hud/pinned_shapes.scss
+++ b/src/css/ingame_hud/pinned_shapes.scss
@@ -19,7 +19,6 @@
         color: #333438;
 
         &.removable {
-            cursor: pointer;
             pointer-events: all;
         }
 
@@ -86,6 +85,28 @@
             }
         }
 
+        > .unpinButton {
+            @include S(width, 8px);
+            @include S(height, 8px);
+            position: absolute;
+            opacity: 0.7;
+            @include S(top, 3px);
+            @include S(left, -7px);
+            @include DarkThemeInvert;
+            @include IncreasedClickArea(2px);
+            transition: opacity 0.12s ease-in-out;
+            z-index: 100;
+
+            &:hover {
+                opacity: 0.8;
+            }
+
+            & {
+                /* @load-async */
+                background: uiResource("icons/pin.png") center center / 95% no-repeat;
+            }
+        }
+
         &.goal,
         &.blueprint {
             .amountLabel::after {
diff --git a/src/js/game/hud/parts/pinned_shapes.js b/src/js/game/hud/parts/pinned_shapes.js
index 542a38b2..bf1f7525 100644
--- a/src/js/game/hud/parts/pinned_shapes.js
+++ b/src/js/game/hud/parts/pinned_shapes.js
@@ -217,11 +217,14 @@ export class HUDPinnedShapes extends BaseHUDPart {
 
         let detector = null;
         if (canUnpin) {
+            const unpinButton = document.createElement("button");
+            unpinButton.classList.add("unpinButton");
+            element.appendChild(unpinButton);
             element.classList.add("removable");
-            detector = new ClickDetector(element, {
+            detector = new ClickDetector(unpinButton, {
                 consumeEvents: true,
                 preventDefault: true,
-                targetOnly: false,
+                targetOnly: true,
             });
             detector.click.add(() => this.unpinShape(key));
         } else {