From 1c31fd34130e4aa8e0a224f36863efe3ae744e74 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 19 Dec 2019 16:54:30 +0000
Subject: [PATCH] Apply new design to highlighted tags and add toggle mechanic

---
 res/css/structures/_TagPanel.scss | 24 +++++++++---------------
 src/stores/TagOrderStore.js       |  9 +++++++--
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index b03d36a592..8efd0796f5 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -68,7 +68,7 @@ limitations under the License.
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
     height: 40px;
-    padding: 5px 0 4px 0;
+    padding: 10px 0 9px 0;
 }
 
 .mx_TagPanel .mx_TagTile {
@@ -82,21 +82,15 @@ limitations under the License.
     // opacity: 1;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
+    content: '';
+    height: 56px;
     background-color: $accent-color;
-    border-radius: 40px;
-
-    /* In case this is a "initial" avatar */
-    display: block;
-    height: 40px;
-    width: 40px;
-}
-
-.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
-    border: 3px solid $accent-color;
-    height: 40px;
-    width: 40px;
-    box-sizing: border-box;
+    width: 5px;
+    position: absolute;
+    left: -15px;
+    border-radius: 0 2px 2px 0;
+    top: -8px; // (56 - 40)/2
 }
 
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
diff --git a/src/stores/TagOrderStore.js b/src/stores/TagOrderStore.js
index 48a8817270..973d27f4e7 100644
--- a/src/stores/TagOrderStore.js
+++ b/src/stores/TagOrderStore.js
@@ -141,8 +141,13 @@ class TagOrderStore extends Store {
                             newTags = [...this._state.selectedTags, payload.tag];
                         }
                     } else {
-                        // Select individual tag
-                        newTags = [payload.tag];
+                        if (this._state.selectedTags.length === 1 && this._state.selectedTags.includes(payload.tag)) {
+                            // Existing (only) selected tag is being normally clicked again, clear tags
+                            newTags = [];
+                        } else {
+                            // Select individual tag
+                            newTags = [payload.tag];
+                        }
                     }
                     // Only set the anchor tag if the tag was previously unselected, otherwise
                     // the next range starts with an unselected tag.