revoke dropdown menu

still a few styling tweaks to go

src/cljs/commiteth/handlers.cljs

@@ -532,6 +532,21 @@
    (.removeEventListener js/window "click" close-dropdown)
    (assoc db :user-dropdown-open? false)))
 
+(defn close-three-dots []
+  (dispatch [:three-dots-close]))
+
+(reg-event-db
+ :three-dots-open
+ (fn [db [_]]
+   (.addEventListener js/window "click" close-three-dots)
+   (assoc db :three-dots-open? true)))
+
+(reg-event-db
+ :three-dots-close
+ (fn [db [_]]
+   (.removeEventListener js/window "click" close-three-dots)
+   (assoc db :three-dots-open? false)))
+
 (reg-event-db
  ::open-bounty-claim
  (fn [db [_ opening-issue-id]]

src/cljs/commiteth/manage_payouts.cljs

@@ -249,20 +249,30 @@
   [:span.pt2
    [:img.o-50.pl3.pt2 {:src image-src}]])
 
-(defn revoke-button [bounty]
+(defn three-dots [bounty]
   (let [{:keys [issue-id value-usd]} bounty]
    (when (pos? value-usd)
      [:div.fl.w-20
       [:div
-       {:on-click #_#(rf/dispatch [:revoke-bounty {:issue-id issue-id}])
+       {:on-click #(rf/dispatch [:three-dots-open])}
-        #(js/alert "hey")}
        [three-dots-box "ic-more-vert-black-24dp-1x.png"]]])))
 
+(defn revoke-dropdown [bounty]
+  (let [menu (if @(rf/subscribe [:three-dots-open?])
+               [:div.ui.menu.revoke-transition {:tab-index -1}]
+               [:div.ui.menu.transition.hidden])]
+    [:div
+     [three-dots bounty]
+     (into menu [[:div.revoke-item
+                  [:a
+                   {:on-click #(rf/dispatch [:revoke-bounty {:issue-id (:issue-id bounty)}])}
+                   "Revoke"]]])]))
+
 (defn unclaimed-bounty [bounty]
   [:div.w-third-l.fl-l.pa2
    [square-card
     [bounty-title-link bounty {:show-date? true :max-length 60}]
-    [:div [small-card-balances bounty] [revoke-button bounty]]]])
+    [:div [small-card-balances bounty] [revoke-dropdown bounty]]]])
 
 (defn paid-bounty [bounty]
   [:div.w-third-l.fl-l.pa2

src/cljs/commiteth/subscriptions.cljs

@@ -179,6 +179,11 @@
   (fn [db _]
     (:user-dropdown-open? db)))
 
+(reg-sub
+  :three-dots-open?
+  (fn [db _]
+    (:three-dots-open? db)))
+
 (reg-sub
   ::open-bounty-claims
   (fn [db _]

src/less/style.less

@@ -253,6 +253,25 @@ label[for="input-hidden"] {
     }
 }
 
+.ui.menu.revoke-transition {
+    font-family: "PostGrotesk-Book";
+    font-size: 1em;
+    border-radius: 8px;
+    border: none;
+    padding: .5em;
+    background-color: #fff;
+    z-index: 1000;
+    @media  (max-width: 767px) {
+        transform: translateY(-172px);
+    }
+
+    a {
+        color: #8d99a4;
+        pointer: default;
+    }
+}
+
+
 .logout-link {
     color: #fff!important;
 }
@@ -1266,4 +1285,4 @@ body {
 }
 
 
-@import (inline) "tachyons-utils.css";
+@import (inline) "tachyons-utils.css";