From 06960543db930317cff90d5803bb5e57092bc18d Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Mon, 11 Feb 2019 08:04:24 +0800
Subject: [PATCH] Fix: use simple menu toggle

---
 popup.html      | 52 +++++++++++++++++++++++++------------------------
 popup/popup.css | 23 ++++++++++++----------
 popup/popup.js  |  9 ---------
 3 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/popup.html b/popup.html
index 72317782..6d0d499a 100644
--- a/popup.html
+++ b/popup.html
@@ -24,31 +24,33 @@
 
   <template data-id="style">
     <div class="entry">
-      <div class="main-controls">
-        <label class="style-name">
-          <input class="checker" type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </label>
-      </div>
-      <div class="actions">
-        <a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
-          <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
-        </a>
-        <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
-          <svg class="svg-icon edit" viewBox="0 0 14 16">
-            <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
-          </svg>
-        </a>
-        <!-- <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
-          <svg class="svg-icon remove" viewBox="0 0 14 16">
-            <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
-          </svg>
-        </a> -->
-        <a href="##" class="menu-button">
-          <svg class="svg-icon edit" viewBox="0 0 14 16">
-            <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
-          </svg>
-        </a>
+      <div class="entry-content">
+        <div class="main-controls">
+          <label class="style-name">
+            <input class="checker" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
+        </div>
+        <div class="actions">
+          <a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
+            <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
+          </a>
+          <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
+            <svg class="svg-icon edit" viewBox="0 0 14 16">
+              <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
+            </svg>
+          </a>
+          <!-- <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
+            <svg class="svg-icon remove" viewBox="0 0 14 16">
+              <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
+            </svg>
+          </a> -->
+          <a href="##" class="menu-button">
+            <svg class="svg-icon edit" viewBox="0 0 14 16">
+              <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
+            </svg>
+          </a>
+        </div>
       </div>
       <div class="menu">
         <label class="menu-item exclude-by-domain button">
diff --git a/popup/popup.css b/popup/popup.css
index 44f50348..7b93aa14 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -173,16 +173,17 @@ body.blocked > DIV {
 }
 
 /* entry */
-
 .entry {
+  position: relative;
+}
+.entry-content {
   display: flex;
   align-items: center;
   height: 26px;
   padding: 0 14px 0 0;
-  position: relative;
 }
 
-html[style] .entry {
+html[style] .entry-content {
   padding: 0 16px 0 0;
 }
 
@@ -288,14 +289,19 @@ html[style*="border"] .entry:nth-child(11):before {
 
 /* entry menu */
 .entry .menu {
-  position: absolute;
   display: flex;
   flex-direction: column;
   top: 100%;
   width: 100%;
   z-index: 1;
   box-sizing: border-box;
-  background-color: white;
+  height: 0;
+  transition: height .25s ease-out;
+  overflow: hidden;
+}
+.entry.menu-active .menu {
+  /* FIXME: avoid hard coded height */
+  height: 75px;
 }
 .entry .menu-item {
   display: flex;
@@ -304,16 +310,13 @@ html[style*="border"] .entry:nth-child(11):before {
   padding: 0 0 0 20px;
   cursor: pointer;
   height: 25px;
-  background: unset;
+  background: none;
 }
 .entry .menu-item:hover,
 .entry .menu-item:active {
-  background-color: hsl(0, 0%, 95%);
+  background-color: rgba(0, 0, 0, 0.1);
   transition: background-color .25s;
 }
-.entry:not(.menu-active) .menu {
-  display: none;
-}
 .entry .menu-icon {
   width: 26px;
 }
diff --git a/popup/popup.js b/popup/popup.js
index 22cc952d..b6fd8135 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -361,15 +361,6 @@ Object.assign(handleEvent, {
   toggleMenu(event) {
     const entry = handleEvent.getClickedStyleElement(event);
     entry.classList.toggle('menu-active');
-    if (entry.classList.contains('menu-active')) {
-      document.addEventListener('click', function handler(e) {
-        if ($('.menu', entry).contains(e.target)) {
-          return;
-        }
-        entry.classList.toggle('menu-active');
-        document.removeEventListener('click', handler);
-      });
-    }
   },
 
   delete(event) {