some filter markup and behaviour

src/cljs/commiteth/bounties.cljs

@@ -45,48 +45,90 @@
       [:div.ui.tiny.circular.image
        [:img {:src avatar-url}]]]]))
 
-(defn bounties-filter [name]
+(defn bounties-filter-tooltip [& content]
+  [:div.open-bounties-filter-element-tooltip
+   content])
+
+(defn bounties-filter-tooltip-value-input [label tooltip-open?]
+  [:div.open-bounties-filter-element-tooltip-value-input-container
+   [:div.:input.open-bounties-filter-element-tooltip-value-input-label
+    label]
+   [:input.open-bounties-filter-element-tooltip-value-input
+    {:type     "range"
+     :min      0
+     :max      1000
+     :step     10
+     :on-focus #(reset! tooltip-open? true)}]])
+
+(defn bounties-filter-tooltip-value [tooltip-open?]
+  [bounties-filter-tooltip
+   "$0 - $1000+"
+   [bounties-filter-tooltip-value-input "Min" tooltip-open?]
+   [bounties-filter-tooltip-value-input "Max" tooltip-open?]])
+
+(defn bounties-filter-tooltip-currency []
+  [bounties-filter-tooltip "CURRENCY"])
+
+(defn bounties-filter-tooltip-date []
+  [bounties-filter-tooltip
+   [:div.open-bounties-filter-list
+    (for [t ["Last week" "Last month" "Last 3 months"]]
+      [:div.open-bounties-filter-list-option
+       t])]])
+
+(defn bounties-filter-tooltip-owner [tooltip-open?]
+  [bounties-filter-tooltip
+   [:div.open-bounties-filter-list
+    (for [t ["status-im" "aragon"]]
+      [:div.open-bounties-filter-list-option-checkbox
+       [:label
+        [:input
+         {:type     "checkbox"
+          :on-focus #(reset! tooltip-open? true)}]
+        [:div.text t]]])]])
+
+(defn bounties-filter [name tooltip]
   (let [open? (r/atom false)]
-    (fn [name]
+    (fn [name tooltip]
       [:div.open-bounties-filter-element-container
        {:tab-index 0
+        :on-focus  #(reset! open? true)
         :on-blur   #(reset! open? false)}
        [:div.open-bounties-filter-element
-        {:on-click #(swap! open? not)
+        {:on-mouse-down #(swap! open? not)
-         :class    (when @open? "open-bounties-filter-element-active")}
+         :class         (when @open? "open-bounties-filter-element-active")}
         name]
        (when @open?
-         [:div.open-bounties-filter-element-tooltip
+         [tooltip open?])])))
-          "TOOLTIP"])])))
 
 (defn bounties-filters []
   [:div.open-bounties-filter
-   [bounties-filter "Value"]
+   [bounties-filter "Value" bounties-filter-tooltip-value]
-   [bounties-filter "Currency"]
+   [bounties-filter "Currency" bounties-filter-tooltip-currency]
-   [bounties-filter "Date"]
+   [bounties-filter "Date" bounties-filter-tooltip-date]
-   [bounties-filter "Owner"]])
+   [bounties-filter "Owner" bounties-filter-tooltip-owner]])
 
 (defn bounties-sort []
   (let [open? (r/atom false)]
     (fn []
       (let [current-sorting (rf/subscribe [::db/bounty-sorting-type])]
         [:div.open-bounties-sort
-        {:tab-index 0
+         {:tab-index 0
-         :on-blur   #(reset! open? false)}
+          :on-blur   #(reset! open? false)}
-        [:div.open-bounties-sort-element
+         [:div.open-bounties-sort-element
-         {:on-click #(swap! open? not)}
+          {:on-click #(swap! open? not)}
-         (db/bounty-sorting-types @current-sorting)
+          (db/bounty-sorting-types @current-sorting)
-         [:div.icon-forward-white-box
+          [:div.icon-forward-white-box
-          [:img
+           [:img
-           {:src "icon-forward-white.svg"}]]]
+            {:src "icon-forward-white.svg"}]]]
-        (when @open?
+         (when @open?
-          [:div.open-bounties-sort-element-tooltip
+           [:div.open-bounties-sort-element-tooltip
-           (for [[sorting-type sorting-name] db/bounty-sorting-types]
+            (for [[sorting-type sorting-name] db/bounty-sorting-types]
-             [:div.open-bounties-sort-type
+              [:div.open-bounties-sort-type
-              {:on-click #(do
+               {:on-click #(do
-                            (reset! open? false)
+                             (reset! open? false)
-                            (rf/dispatch [::handlers/set-bounty-sorting-type sorting-type]))}
+                             (rf/dispatch [::handlers/set-bounty-sorting-type sorting-type]))}
-              sorting-name])])]))))
+               sorting-name])])]))))
 
 (defn bounties-list [open-bounties]
   [:div.ui.container.open-bounties-container

src/less/style.less

@@ -425,6 +425,7 @@
     }
 
     .open-bounties-filter-element {
+        font-family: "PostGrotesk-Book";
         font-size: 15px;
         font-weight: 500;
         line-height: 1.0;
@@ -451,11 +452,175 @@
 
     .open-bounties-filter-element-tooltip {
         position: absolute;
+        min-width: 227px;
         margin-top: 12px;
-        padding: 16px 24px;
+        padding: 24px 16px;
         border-radius: 10px;
         background-color: #ffffff;
         box-shadow: 0 15px 12px 0 rgba(161, 174, 182, 0.53), 0 0 38px 0 rgba(0, 0, 0, 0.05);
+        font-family: "PostGrotesk-Book";
+        font-size: 16px;
+        line-height: 1.5;
+
+        .open-bounties-filter-element-tooltip-value-input-container {
+            display: flex;
+            margin-top: 10px;
+        }
+
+        .open-bounties-filter-element-tooltip-value-input-label {
+            width: 60px;
+        }
+
+        .open-bounties-filter-element-tooltip-value-input {
+            margin-top: 24px;
+            width: 288.5px;
+            height: 4px;
+            background-color: #55a5ea;
+        }
+
+        // generated with http://danielstern.ca/range.css/#/
+        input[type=range] {
+            -webkit-appearance: none;
+            //width: 100%;
+            margin: 14.5px 0;
+        }
+        input[type=range]:focus {
+            outline: none;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 4px;
+            cursor: pointer;
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            background: #55a5ea;
+            border-radius: 0px;
+            border: 0px solid #010101;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            border: 0px solid #000000;
+            height: 33px;
+            width: 33px;
+            border-radius: 50px;
+            background: #55a5ea;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -14.5px;
+        }
+        input[type=range]:focus::-webkit-slider-runnable-track {
+            background: #5aa7eb;
+        }
+        input[type=range]::-moz-range-track {
+            width: 100%;
+            height: 4px;
+            cursor: pointer;
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            background: #55a5ea;
+            border-radius: 0px;
+            border: 0px solid #010101;
+        }
+        input[type=range]::-moz-range-thumb {
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            border: 0px solid #000000;
+            height: 33px;
+            width: 33px;
+            border-radius: 50px;
+            background: #55a5ea;
+            cursor: pointer;
+        }
+        input[type=range]::-ms-track {
+            width: 100%;
+            height: 4px;
+            cursor: pointer;
+            background: transparent;
+            border-color: transparent;
+            color: transparent;
+        }
+        input[type=range]::-ms-fill-lower {
+            background: #50a3e9;
+            border: 0px solid #010101;
+            border-radius: 0px;
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+        }
+        input[type=range]::-ms-fill-upper {
+            background: #55a5ea;
+            border: 0px solid #010101;
+            border-radius: 0px;
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+        }
+        input[type=range]::-ms-thumb {
+            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            border: 0px solid #000000;
+            height: 33px;
+            width: 33px;
+            border-radius: 50px;
+            background: #55a5ea;
+            cursor: pointer;
+            height: 4px;
+        }
+        input[type=range]:focus::-ms-fill-lower {
+            background: #55a5ea;
+        }
+        input[type=range]:focus::-ms-fill-upper {
+            background: #5aa7eb;
+        }
+
+        .open-bounties-filter-list {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .open-bounties-filter-list-option {
+            font-family: "PostGrotesk-Book";
+            font-size: 15px;
+            font-weight: 500;
+            line-height: 1.0;
+            color: #42505c;
+            padding: 8px 12px;
+            border-radius: 8px;
+            border: solid 1px rgba(151, 151, 151, 0.2);
+        }
+
+        .open-bounties-filter-list-option:not(:first-child) {
+            margin-top: 8px;
+        }
+
+        .open-bounties-filter-list-option:hover {
+            cursor: pointer;
+            background-color: #57a7ed;
+            color: #ffffff;
+        }
+
+        .open-bounties-filter-list-option-checkbox {
+            label {
+                display: flex;
+            }
+
+            label:hover {
+                cursor: pointer;
+            }
+
+            input {
+                background: green;
+                transform: scale(1.3);
+            }
+
+            input:hover {
+                cursor: pointer;
+            }
+
+            .text {
+                font-size: 15px;
+                font-weight: 500;
+                line-height: 1.0;
+                margin-left: 12px;
+            }
+        }
+
+        .open-bounties-filter-list-option-checkbox:not(:first-child) {
+            margin-top: 12px;
+        }
     }
 
     .open-bounties-sort {
@@ -488,7 +653,7 @@
         min-width: 200px;
         border-radius: 8px;
         background-color: #1e3751;
-        font-family: "PostGrotesk-Medium";
+        font-family: "PostGrotesk-Book";
         font-size: 15px;
         line-height: 1.0;
         text-align: left;