From 78080df6fd29fd846dcd97c5084c6ec62c95949c Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 19 Dec 2017 05:30:40 +0300
Subject: [PATCH] show "click to uninstall" overlay, hide install/delete
 buttons

---
 _locales/en/messages.json |  4 ++++
 popup.html                |  2 +-
 popup/search-results.css  | 17 +++++++++++++----
 popup/search-results.js   |  7 ++-----
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 11148287..1f0e84cf 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -103,6 +103,10 @@
   "updateCheckHistory": {
     "message": "History of update checks"
   },
+  "clickToUninstall": {
+    "message": "Click to uninstall",
+    "description": "Label for the overlay on a style thumbnail when installed via inline search in the popup"
+  },
   "configureStyle": {
     "message": "Configure",
     "description": "Label for the button to configure usercss userstyle"
diff --git a/popup.html b/popup.html
index 63804646..e2d50968 100644
--- a/popup.html
+++ b/popup.html
@@ -88,8 +88,8 @@
     <div class="search-result">
       <a class="search-result-title"><span></span></a>
       <div class="search-result-info">
-        <div class="search-result-status"></div>
         <img class="search-result-screenshot" i18n-title="installButton">
+        <div class="search-result-status"></div>
         <div class="search-result-actions">
           <button class="search-result-install hidden" i18n-text="installButton"></button>
           <button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button>
diff --git a/popup/search-results.css b/popup/search-results.css
index fb0e619a..fe08f70d 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -103,24 +103,33 @@ body.search-results-shown {
   line-height: 18px;
   text-align: center;
   position: absolute;
-  background-color: rgba(0, 128, 0, 0.76);
+  background-color: hsla(180, 100%, 27%, .75);
   color: #fff;
+  transition: background-color .5s;
+  pointer-events: none;
 }
 
-.search-result:hover .search-result-actions {
-  opacity: 1;
+.search-result-screenshot:hover ~ .search-result-status {
+  background-color: hsla(180, 100%, 27%, 1);
 }
 
 .search-result-actions {
   bottom: 20px;
   text-align: center;
   z-index: 10;
-  opacity: 0;
   position: absolute;
   width: 100%;
+}
+
+.search-result:not([data-installed]) .search-result-actions {
+  opacity: 0;
   transition: opacity .5s;
 }
 
+.search-result:not([data-installed]):hover .search-result-actions {
+  opacity: 1;
+}
+
 #search-results .search-result-actions button {
   background-color: #fff;
   box-shadow: 2px 2px 20px #000;
diff --git a/popup/search-results.js b/popup/search-results.js
index 70e23c31..502e8a3c 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -498,7 +498,7 @@ window.addEventListener('showStyles:done', function _() {
 
     if (result.installed && !('installed' in entry.dataset)) {
       entry.dataset.installed = '';
-      $('.search-result-status', entry).textContent = t('installButtonInstalled');
+      $('.search-result-status', entry).textContent = t('clickToUninstall');
     } else if (!result.installed && 'installed' in entry.dataset) {
       delete entry.dataset.installed;
       $('.search-result-status', entry).textContent = '';
@@ -506,7 +506,7 @@ window.addEventListener('showStyles:done', function _() {
 
     const screenshot = $('.search-result-screenshot', entry);
     screenshot.onclick = result.installed ? onUninstallClicked : onInstallClicked;
-    screenshot.title = result.installed ? t('deleteStyleLabel') : t('installButton');
+    screenshot.title = result.installed ? '' : t('installButton');
 
     const uninstallButton = $('.search-result-uninstall', entry);
     uninstallButton.onclick = onUninstallClicked;
@@ -528,9 +528,6 @@ window.addEventListener('showStyles:done', function _() {
         handleEvent.openURLandHide.call(this, event);
       };
     }
-
-    //installButton.classList.toggle('hidden', Boolean(result.installed));
-    uninstallButton.classList.toggle('hidden', !result.installed);
   }
 
   function onUninstallClicked(event) {