diff --git a/resources/public/css/select.less b/resources/public/css/select.less index 6079ee0..89c32a7 100644 --- a/resources/public/css/select.less +++ b/resources/public/css/select.less @@ -1,3 +1,4 @@ +.stock-input { .hegex-select { position: relative; background-color: white; @@ -112,3 +113,128 @@ select { background-size: 100% auto; } + +} + + + + + + +.fancy-input { +.select { + border-radius: 5px !important; + display:flex; + font-size: 0.6em; + flex-direction: column; + position:relative; + height:45px; +} +.select.disabled { + pointer-events: none; +} + +.option { + padding:5px 30px 0 10px; + // border-radius: 5px; + min-height:41px; + display:flex; + align-items:center; + background:white; + // border-top:#222 solid 1px; + position:absolute; + color: black; + top:0; + width: 100%; + pointer-events:none; + order:2; + z-index:1; + transition:all .4s ease-in-out; + white-space:nowrap; + border-radius: 5px; + +} + +.option:hover { + background:#18D7FF !important; +} + +.select:focus > .option { + border-radius: 1px 1px 0px 0px; + background: #afecf9; +} + +.select:focus > .option ~ .option { + border-radius: 0px; + background: white; +} + + +.select:focus .option { + position:relative; + pointer-events:all; +} + +input { + opacity:0; + position:absolute; + left:-99999px; +} + +input:checked + label { + order: 1; + z-index:2; + background:white; + position:relative; +} + +.select.primary { + border: 2px solid @hegexgreen; +} + +.select.yellow { + border: 2px solid @hegexorange; +} + +.select.secondary { + border: 2px solid @hegexseablue; +} + +.little-arrow { + color: black; + display: flex; + justify-content: center; + align-items: top; + line-height: 1.2; + border-radius: 50%; + position: absolute; + top: 0.7em; + z-index: 89; + right: 10px; + width: 22px; + height: 22px; + font-size: 15px; + cursor: pointer; + pointer-events: none; + -webkit-transition: .25s all ease; + -o-transition: .25s all ease; + transition: .25s all ease; +} + +.little-arrow.primary { + background: transparent url('/images/select-green.png') no-repeat left top; + background-size: 100% auto; +} + +.little-arrow.secondary { + background: transparent url('/images/select-blue.png') no-repeat left top; + background-size: 100% auto; +} + +.little-arrow.yellow { + background: transparent url('/images/select-yellow.png') no-repeat left top; + background-size: 100% auto; +} + + +} diff --git a/resources/public/css/style.main.less b/resources/public/css/style.main.less index e5fd84c..08312aa 100644 --- a/resources/public/css/style.main.less +++ b/resources/public/css/style.main.less @@ -2810,3 +2810,28 @@ p.errors-size { p.small { font-size: 1.1em !important; } + + .stock-input select, .stock-input .hegex-select { + display: inherit; + } + + .stock-input .little-arrow { + display: none !important; + } + .fancy-input, .fancy-input .little-arrow { + display: none; + } + +@media (min-width: 720px) { + + .stock-input select, .stock-input .hegex-select, .stock-input .little-arrow { + display: none; + } + .fancy-input { + display: initial; + } + + .fancy-input .little-arrow { + display: inherit; + } +} diff --git a/src/district_hegex/ui/components/inputs.cljs b/src/district_hegex/ui/components/inputs.cljs index 8775957..3d31944 100644 --- a/src/district_hegex/ui/components/inputs.cljs +++ b/src/district_hegex/ui/components/inputs.cljs @@ -1,44 +1,27 @@ (ns district-hegex.ui.components.inputs (:require + [reagent.core :as r] + [oops.core :refer [oget oset! ocall oapply ocall! oapply! + gget + oget+ oset!+ ocall+ oapply+ ocall!+ oapply!+]] [district-hegex.ui.home.subs :as home-subs] [re-frame.core :refer [subscribe]])) -(defn- little-arrow [color] - [:span.little-arrow {:className (or color "primary")} - ]) - -#_(defn- little-arrow [color] - [:svg {:class "caret" :height "24" :viewBox "0 0 24 24" :width "24"} - [:path {:d "M7 10l5 5 5-5z"}] - [:path {:d "M0 0h24v24H0z" :fill "none"}]]) - -(defn select [& children] - (let [color (some-> children first :color) - size (some-> children first :size) - c (case color - :primary :select.primary - :secondary :select.secondary - :yellow :select.yellow - :select.primary) - s (case size - :small :div.hegex-select.small - :div.hegex-select)] - [s - [little-arrow color] - [:div.select - (into [c] children)]])) +(defn little-arrow [color] + [:span.little-arrow {:className (or color "primary")}]) (defn text-input [{:keys [type step min max on-change label color size] :as props}] (println "stepis" step) (let [el :div.hinput-wrapper ->sized #(keyword (str (name %) "." (name size)))] [(if-not size el (->sized el)) - [:input.hegex-input (merge props {:type type - :step step - :className (or color "primary") - :on-change on-change - :min min - :max max})] + [:span.stock-input + [:input.hegex-input (merge props {:type type + :step step + :className (or color "primary") + :on-change on-change + :min min + :max max})]] (when label ;;NOTE ideally should be set via less inheritance [:div.hinput-label @@ -52,3 +35,41 @@ [:div] [:div] [:div]]])) + +(defn fancy-select [] + (let [on-change #(js/console.log (oget % ".target.value"))] + [:div.fancy-input.primary + [:div {:class "select secondary" + :tabindex "1"} + [little-arrow :secondary] + [:input {:class "fancy" + :on-change on-change + :type "radio" + :id "opt1" + :value "oranges" + }] + [:label {:for "opt1" :class "option"} "Oranges"] + [:input {:class "fancy" + :on-change on-change + :value "apples" + :checked true + :type "radio" + :id "opt2"}] + [:label {:for "opt2" :class "option"} "Apples"]]])) + +(defn select [& children] + (let [color (some-> children first :color) + size (some-> children first :size) + c (case color + :primary :select.primary + :secondary :select.secondary + :yellow :select.yellow + :select.primary) + s (case size + :small :div.hegex-select.small + :div.hegex-select)] + [:span.stock-input + [s + [little-arrow color] + [:div.select + (into [c] children)]]])) diff --git a/src/district_hegex/ui/home/page.cljs b/src/district_hegex/ui/home/page.cljs index ca3f7b7..d6730e6 100644 --- a/src/district_hegex/ui/home/page.cljs +++ b/src/district_hegex/ui/home/page.cljs @@ -575,6 +575,23 @@ (js/e.persist) (swap! offer assoc :total (oget e ".?target.?value")))}]] [:div.box.d + [:div.fancy-input.primary + [:div {:class "select primary disabled" + :tabindex "1"} + [inputs/little-arrow :primary] + [:input {:class "fancy" + :type "radio" + :id "opt1" + :checked true + :value :eth}] + [:label {:for "opt1" :class "option"} "ETH"] + [:input {:class "fancy" + :value :wbtc + :disabled true + :type "radio" + :id "opt2"}] + [:label {:for "opt2" :class "option"} "WBTC"]]] + [inputs/select {:disabled true} [:option {:selected true @@ -716,6 +733,9 @@ (fn [] (let [hegic-type (some-> form-data deref :new-hegex/hegic-type) option-type (some-> form-data deref :new-hegex/option-type keyword) + on-currency-change (fn [e] + (js/e.persist) + (upd-new-hegex form-data e :new-hegex/hegic-type)) tx-pending? (subscribe [::tx-id-subs/tx-pending? :mint-hegex!]) expires-on (some-> form-data deref :new-hegex/period calc-expiration) @@ -760,11 +780,30 @@ [:div.box-grid-new {:style {:margin-top "2em"}} [:div.box.a [:div.hover-label "Currency"] + (println "currencyis" (:new-hegex/hegic-type @form-data)) + + [:div.fancy-input.primary + [:div {:class "select secondary" + :tabindex "1"} + [inputs/little-arrow :secondary] + [:input {:class "fancy" + :type "radio" + :id "opt1" + :on-change on-currency-change + :checked (= "0" (:new-hegex/hegic-type @form-data)) + :value "0"}] + [:label {:for "opt1" :class "option"} "ETH"] + [:input {:class "fancy" + :value "1" + :on-change on-currency-change + :checked (= "1" (:new-hegex/hegic-type @form-data)) + :type "radio" + :id "opt2"}] + [:label {:for "opt2" :class "option"} "BTC"]]] + [inputs/select {:color :secondary - :on-change (fn [e] - (js/e.persist) - (upd-new-hegex form-data e :new-hegex/hegic-type))} + :on-change on-currency-change} [:option {:selected true :value 0} "ETH"]