From 11e4a00ac6c9ed9d7fe66e2f9cf06f0c55a7fb63 Mon Sep 17 00:00:00 2001 From: pablodip Date: Thu, 18 Jan 2018 09:08:37 +0100 Subject: [PATCH] some filter markup and behaviour --- src/cljs/commiteth/bounties.cljs | 94 ++++++++++++----- src/less/style.less | 169 ++++++++++++++++++++++++++++++- 2 files changed, 235 insertions(+), 28 deletions(-) diff --git a/src/cljs/commiteth/bounties.cljs b/src/cljs/commiteth/bounties.cljs index 7da81fa..e64e11f 100644 --- a/src/cljs/commiteth/bounties.cljs +++ b/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) - :class (when @open? "open-bounties-filter-element-active")} + {:on-mouse-down #(swap! open? not) + :class (when @open? "open-bounties-filter-element-active")} name] (when @open? - [:div.open-bounties-filter-element-tooltip - "TOOLTIP"])]))) + [tooltip open?])]))) (defn bounties-filters [] [:div.open-bounties-filter - [bounties-filter "Value"] - [bounties-filter "Currency"] - [bounties-filter "Date"] - [bounties-filter "Owner"]]) + [bounties-filter "Value" bounties-filter-tooltip-value] + [bounties-filter "Currency" bounties-filter-tooltip-currency] + [bounties-filter "Date" bounties-filter-tooltip-date] + [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 - :on-blur #(reset! open? false)} - [:div.open-bounties-sort-element - {:on-click #(swap! open? not)} - (db/bounty-sorting-types @current-sorting) - [:div.icon-forward-white-box - [:img - {:src "icon-forward-white.svg"}]]] - (when @open? - [:div.open-bounties-sort-element-tooltip - (for [[sorting-type sorting-name] db/bounty-sorting-types] - [:div.open-bounties-sort-type - {:on-click #(do - (reset! open? false) - (rf/dispatch [::handlers/set-bounty-sorting-type sorting-type]))} - sorting-name])])])))) + {:tab-index 0 + :on-blur #(reset! open? false)} + [:div.open-bounties-sort-element + {:on-click #(swap! open? not)} + (db/bounty-sorting-types @current-sorting) + [:div.icon-forward-white-box + [:img + {:src "icon-forward-white.svg"}]]] + (when @open? + [:div.open-bounties-sort-element-tooltip + (for [[sorting-type sorting-name] db/bounty-sorting-types] + [:div.open-bounties-sort-type + {:on-click #(do + (reset! open? false) + (rf/dispatch [::handlers/set-bounty-sorting-type sorting-type]))} + sorting-name])])])))) (defn bounties-list [open-bounties] [:div.ui.container.open-bounties-container diff --git a/src/less/style.less b/src/less/style.less index e52f7fa..4e4b05e 100644 --- a/src/less/style.less +++ b/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;