From 026b98022ca3052a36f830ae3091ffac0085bbed Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 14:00:27 +0200
Subject: [PATCH] Add clear search button in shop searchbar

---
 app/assets/images/icn-close.png                   | Bin 0 -> 540 bytes
 .../controllers/products_controller.js.coffee     |   5 ++++-
 .../stylesheets/darkswarm/shop_search.css.scss    |  13 +++++++++++++
 app/views/shop/products/_searchbar.haml           |  11 +++++++----
 4 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/images/icn-close.png

diff --git a/app/assets/images/icn-close.png b/app/assets/images/icn-close.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ef99bffec3400901080a7fe2c1a32948ce54123
GIT binary patch
literal 540
zcmV+%0^|LOP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px$)=5M`R5%f>RoiO9KoFgTMo<(*#6S^5s*%2GKE(E4Ed7Ln|I+#)(btk-UhAv(
z3jyt%Z8n%>TU+bEW_M?2&d!<H-Dso`$8ii+_rhjtnsy7b<MH^xox^R2X4`haeN432
zj3=Yf=z$#vJiJS;CFVYF)bDn?Z>RbQkU{kEc>KbB|J2~zm_Y}fPUo5X18i@k!zEzw
zMF8xJ;S)Y0!jR@G6qgD|_z3!1Sb%p1igIQc24%BZS}vD}Ahkz6pQj)QXusc|uK7H<
z2W3<<0)s`pUZ-NQNUPO~JkN`PHX02om&-Jt&uKE5z+4J2dOAK*BYPMkx?C<t?RJ}V
z9cDzWR*Ood60O&3@_hu9k{&3#thSO%oD*s`n*@5h-A+&}6bfSOx-K0KqNqtXPiIGQ
zXp<|*9U=v7L@I%Q03%?1aY>?ubAZaCfVLceV=mM>8{s-B1(ZQ^v)PE8qVkqyArhrM
zun-~cW=d+cngB!oKvU8`1L^<}7d<A`YL!gWr0sSqz)%3t1?Xb25cx#46*5#F>`W#@
zl}d%C)2T9V*laeNDG&D5ub!x~xP$y^C@B0&#YGy(XDm84;S=;{P=LW#?wqRs)gD;6
e1N#5`0zLtKr19q*Qh43~0000<MNUMnLSTX}6YgIC

literal 0
HcmV?d00001

diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
index b1004b132d..894ed5576f 100644
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
@@ -84,9 +84,12 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
     ).join(" #{t('products_or')} ") if $scope.activeProperties?
 
   $scope.clearAll = ->
-    $scope.query = ""
+    $scope.clearQuery()
     $scope.clearFilters()
 
+  $scope.clearQuery = ->
+    $scope.query = ""
+
   $scope.clearFilters = ->
     $scope.taxonSelectors.clearAll()
     $scope.propertySelectors.clearAll()
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index fdf45329ad..0822e5ba3c 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -10,6 +10,19 @@
   position: relative;
   z-index: 5;
 
+  .search-wrap {
+    position: relative;
+    width: 100%;
+
+    .clear {
+      height: 1em;
+      width: 1em;
+      margin-top: 1em;
+      position: absolute;
+      right: 1em;
+    }
+  }
+
   input#search {
     height: 3em;
     border-radius: $radius-small;
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
index c74be2b14a..2ca6f32cb0 100644
--- a/app/views/shop/products/_searchbar.haml
+++ b/app/views/shop/products/_searchbar.haml
@@ -1,10 +1,13 @@
 .shop-searchbar
   .row
     .small-12.large-5.columns.flex
-      %input#search.text{"ng-model" => "query",
-            placeholder: t(:products_search),
-            "ng-debounce" => "200",
-            "ofn-disable-enter" => true}
+      %div.search-wrap
+        %input#search.text{"ng-model" => "query",
+              placeholder: t(:products_search),
+              "ng-debounce" => "200",
+              "ofn-disable-enter" => true}
+        %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}}
+          %img{ src: "/assets/icn-close.png" }
 
       .hide-for-large-up
         %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}