status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Pin filter input to top of panel

This commit is contained in:
chris (daiyi) 2017-08-15 18:51:09 +02:00
parent 775d61c4b0
commit 30b836cd8b
2 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/day8/re_frame/styles.cljs
View File

@ -54,6 +54,7 @@
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0 -5px; margin: 0 -5px;
margin-top: 10px;
} }
#--re-frame-trace-- .filter-items li { #--re-frame-trace-- .filter-items li {
color: #333; color: #333;
@ -89,9 +90,12 @@
flex: 1; flex: 1;
} }
#--re-frame-trace-- .panel-content-scrollable { #--re-frame-trace-- .panel-content-scrollable {
padding: 10px; margin: 10px 0 0 10px;
flex: 1 0 auto; flex: 1 0 auto;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
#--re-frame-trace-- .filter-control {
margin: 10px 0 0 10px;
}
") ")

46
src/day8/re_frame/trace.cljs
View File

@ -192,10 +192,9 @@
(str/lower-case @filter-input) (str/lower-case @filter-input)
(js/parseFloat @filter-input)) (js/parseFloat @filter-input))
:filter-type @filter-type}))))] :filter-type @filter-type}))))]
[:div [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
[:div.filter-control {:style {:margin-bottom 20}} [:div.filter-control
[:div.filter-control-input [:div.filter-control-input
{:style {:margin-bottom 10}}
[:select {:value @filter-type [:select {:value @filter-type
:on-change #(reset! filter-type (keyword (.. % -target -value)))} :on-change #(reset! filter-type (keyword (.. % -target -value)))}
[:option {:value "contains"} "contains"] [:option {:value "contains"} "contains"]
@ -207,8 +206,7 @@
[components/icon-add]] [components/icon-add]]
(if @input-error (if @input-error
[:div.input-error {:style {:color "red" :margin-top 5}} [:div.input-error {:style {:color "red" :margin-top 5}}
"Please enter a valid number."]) "Please enter a valid number."])]
[:br]]
[:ul.filter-items [:ul.filter-items
(map (fn [item] (map (fn [item]
^{:key (:id item)} ^{:key (:id item)}
@ -219,20 +217,21 @@
(:filter-type item) ": " [:span.filter-item-string (:query item)] (:filter-type item) ": " [:span.filter-item-string (:query item)]
[:span.icon-button [components/icon-remove]]]]) [:span.icon-button [components/icon-remove]]]])
@filter-items)]] @filter-items)]]
[:table [:div.panel-content-scrollable
{:cell-spacing "0" :width "100%"} [:table
[:thead>tr {:cell-spacing "0" :width "100%"}
[:th "operations"] [:thead>tr
[:th [:th "operations"]
(when (pos? (count @filter-items)) [:th
(str (count showing-traces) " of ")) (when (pos? (count @filter-items))
(when (pos? (count @traces)) (str (count showing-traces) " of "))
(str (count @traces))) (when (pos? (count @traces))
" events " (str (count @traces)))
(when (pos? (count @traces)) " events "
[:span "(" [:button.text-button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} "clear"] ")"])] (when (pos? (count @traces))
[:th "meta"]] [:span "(" [:button.text-button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} "clear"] ")"])]
[:tbody (render-traces showing-traces)]]])))) [:th "meta"]]
[:tbody (render-traces showing-traces)]]]]))))
(defn resizer-style [draggable-area] (defn resizer-style [draggable-area]
{:position "absolute" :z-index 2 :opacity 0 {:position "absolute" :z-index 2 :opacity 0
@ -301,11 +300,10 @@
:on-click #(reset! selected-tab :traces)} "Traces"] :on-click #(reset! selected-tab :traces)} "Traces"]
[:button {:class (str "tab button " (when (= @selected-tab :subvis) "active")) [:button {:class (str "tab button " (when (= @selected-tab :subvis) "active"))
:on-click #(reset! selected-tab :subvis)} "SubVis"]]] :on-click #(reset! selected-tab :subvis)} "SubVis"]]]
[:div.panel-content-scrollable (case @selected-tab
(case @selected-tab :traces [render-trace-panel]
:traces [render-trace-panel] :subvis [subvis/render-subvis traces
:subvis [subvis/render-subvis traces] [:div.panel-content-scrollable]])]]]))})))
[render-trace-panel])]]]]))})))
(defn panel-div [] (defn panel-div []
(let [id "--re-frame-trace--" (let [id "--re-frame-trace--"