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

Improve styles and colours and composition

This commit is contained in:
chris (daiyi) 2017-08-01 22:55:27 +02:00
parent d04a114838
commit 11fcf21e2d
3 changed files with 106 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,18 @@
(ns day8.re-frame.trace.styles) (ns day8.re-frame.trace.styles)
(defonce panel-styles " (defonce panel-styles "
#--re-frame-trace-- {
background: white;
color: black;
font-family: 'courier new', monospace;
}
#--re-frame-trace-- tbody { #--re-frame-trace-- tbody {
color: #aaa; color: #aaa;
} }
#--re-frame-trace-- tr:nth-child(even) { #--re-frame-trace-- tr:nth-child(even) {
background: aliceblue; background: aliceblue;
} }
#--re-frame-trace-- .button #--re-frame-trace-- .button {
{
background: lightblue;
padding: 5px 5px 3px; padding: 5px 5px 3px;
margin: 5px; margin: 5px;
border-radius: 2px; border-radius: 2px;
@ -20,20 +23,26 @@
font-weight: normal; font-weight: normal;
} }
#--re-frame-trace-- .icon-button { #--re-frame-trace-- .icon-button {
vertical-align: middle;
font-size: 10px; font-size: 10px;
}
#--re-frame-trace-- button.tab {
} }
#--re-frame-trace-- .tab { #--re-frame-trace-- .tab {
background: transparent; background: transparent;
border-bottom: 3px solid #eee;
padding-bottom: 1px;
border-radius: 0; border-radius: 0;
text-transform: uppercase;
font-family: monospace;
letter-spacing: 2px;
margin-bottom: 0;
padding-bottom: 4px;
vertical-align: bottom;
} }
#--re-frame-trace-- .tab.active { #--re-frame-trace-- .tab.active {
background: transparent; background: transparent;
border-bottom: 3px solid lightblue; border-bottom: 3px solid lightblue;
padding-bottom: 1px;
border-radius: 0; border-radius: 0;
padding-bottom: 1px;
} }
#--re-frame-trace-- ul.filter-items { #--re-frame-trace-- ul.filter-items {
list-style-type: none; list-style-type: none;
@ -41,13 +50,14 @@
margin: 0 -5px; margin: 0 -5px;
} }
#--re-frame-trace-- .filter-items li { #--re-frame-trace-- .filter-items li {
background: lightblue; color: #333;
color: #666; background: #efefef;
display: inline-block; display: inline-block;
font-size: 0.9em;
margin: 5px; margin: 5px;
} }
#--re-frame-trace-- .filter-items li .filter-item-string { #--re-frame-trace-- .filter-items li .filter-item-string {
color: #333; color: #616cdb;
} }
#--re-frame-trace-- .icon { #--re-frame-trace-- .icon {
display: inline-block; display: inline-block;
@ -58,6 +68,24 @@
fill: currentColor; fill: currentColor;
} }
#--re-frame-trace-- .icon-remove { #--re-frame-trace-- .icon-remove {
margin-left: 10px; margin-left: 10px;
}
#--re-frame-trace-- select {
background: white;
font-family: 'courier new', monospace;
font-size: 1em;
}
#--re-frame-trace-- .nav {
background: #efeef1;
color: #222;
}
#--re-frame-trace-- .panel-content-top {
flex: 1;
}
#--re-frame-trace-- .panel-content-scrollable {
padding: 10px;
flex: 1 0 auto;
height: 100%;
overflow: auto;
} }
") ")

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

@ -63,9 +63,9 @@
(trace/with-trace {:op-type :render (trace/with-trace {:op-type :render
:tags {:component-path (reagent.impl.component/component-path c)} :tags {:component-path (reagent.impl.component/component-path c)}
:operation (last (str/split name #" > "))} :operation (last (str/split name #" > "))}
(real-renderer c) (real-renderer c)))))
))))
(set! reagent.impl.component/static-fns static-fns) (set! reagent.impl.component/static-fns static-fns)
@ -90,8 +90,8 @@
#_(set! reagent.impl.batching/schedule schedule #_(set! reagent.impl.batching/schedule schedule
#_(fn [] #_(fn []
(reagent.impl.batching/do-after-render (fn [] (trace/with-trace {:op-type :raf-end}))) (reagent.impl.batching/do-after-render (fn [] (trace/with-trace {:op-type :raf-end})))
(real-schedule))) (real-schedule)))))
))
(def traces (interop/ratom [])) (def traces (interop/ratom []))
(defn log-trace? [trace] (defn log-trace? [trace]
@ -115,8 +115,8 @@
(defn init-tracing! (defn init-tracing!
"Sets up any intial state that needs to be there for tracing. Does not enable tracing." "Sets up any intial state that needs to be there for tracing. Does not enable tracing."
[] []
(monkey-patch-reagent) (monkey-patch-reagent))
)
(defn search-input [{:keys [title on-save on-change on-stop]}] (defn search-input [{:keys [title on-save on-change on-stop]}]
(let [val (r/atom title) (let [val (r/atom title)
@ -124,9 +124,9 @@
(when (pos? (count v)) (when (pos? (count v))
(on-save v)))] (on-save v)))]
(fn [] (fn []
[:input {:type "text" [:input {:style {:margin-left 7}
:type "text"
:value @val :value @val
:style {:margin 7}
:auto-focus true :auto-focus true
:on-change #(do (reset! val (-> % .-target .-value)) :on-change #(do (reset! val (-> % .-target .-value))
(on-change %)) (on-change %))
@ -185,30 +185,32 @@
:query (str/lower-case @filter-input) :query (str/lower-case @filter-input)
:filter-type @filter-type}))] :filter-type @filter-type}))]
[:div [:div
{:style {:padding "10px"}} [:div.filter-control {:style {:margin-bottom 20}}
[:span [:div.filter-control-input
[:select {:value @filter-type :on-change (fn [e] {:style {:margin-bottom 10}}
(reset! filter-type (.. e -target -value)) [:select {:value @filter-type :on-change (fn [e]
(println (.. e -target -value)))} (reset! filter-type (.. e -target -value))
[:option "contains"] (println (.. e -target -value)))}
[:option "slower than"]] [:option "contains"]
[search-input {:on-save save-query [:option "slower than"]]
:on-change #(reset! filter-input (.. % -target -value))}] [search-input {:on-save save-query
[:button.button.icon-button {:on-click save-query} :on-change #(reset! filter-input (.. % -target -value))}]
[components/icon-add]] [:button.button.icon-button {:on-click save-query
;; [:button {:style {:background "#aae0ec" :style {:margin 0}}
;; :padding 7 [components/icon-add]]
;; :margin 5}} ;; [:button {:style {:background "#aae0ec"
;; "-"]] ;; :padding 7
[:br]] ;; :margin 5}}
[:ul.filter-items ;; "-"]]
(map (fn [item] [:br]]
^{:key (:id item)} [:ul.filter-items
[:li.filter-item.button (map (fn [item]
{:on-click (fn [event] (swap! filter-items #(remove (comp (partial = (:query item)) :query) %)))} ^{:key (:id item)}
(:filter-type item) ": " [:span.filter-item-string (:query item)] [:li.filter-item.button
[:button.icon-button [components/icon-remove]]]) {:on-click (fn [event] (swap! filter-items #(remove (comp (partial = (:query item)) :query) %)))}
@filter-items)] (:filter-type item) ": " [:span.filter-item-string (:query item)]
[:button.icon-button [components/icon-remove]]])
@filter-items)]]
[:table [:table
{:cell-spacing "0" :width "100%"} {:cell-spacing "0" :width "100%"}
[:thead>tr [:thead>tr
@ -234,7 +236,7 @@
;; Add clear button ;; Add clear button
;; Filter out different trace types ;; Filter out different trace types
(let [position (r/atom :right) (let [position (r/atom :right)
size (r/atom 0.3) size (r/atom 0.35)
showing? (r/atom false) showing? (r/atom false)
dragging? (r/atom false) dragging? (r/atom false)
pin-to-bottom? (r/atom true) pin-to-bottom? (r/atom true)
@ -265,29 +267,35 @@
transition (if @showing? transition (if @showing?
ease-transition ease-transition
(str ease-transition ", opacity 0.01s linear 0.2s"))] (str ease-transition ", opacity 0.01s linear 0.2s"))]
[:div {:style {:position "fixed" :width "0px" :height "0px" :top "0px" :left "0px" :z-index 99999999}} [:div.panel-wrapper
[:div {:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.298039) 0px 0px 4px" :background "white" {:style {:position "fixed" :width "0px" :height "0px" :top "0px" :left "0px" :z-index 99999999}}
:left left :top "0px" :width (str (* 100 @size) "%") :height "100%" [:div.panel
:transition transition}} {:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.298039) 0px 0px 4px" :background "white"
[:div.resizer {:style (resizer-style draggable-area) :left left :top "0px" :width (str (* 100 @size) "%") :height "100%"
:on-mouse-down #(reset! dragging? true) :transition transition}}
:on-mouse-up #(reset! dragging? false) [:div.panel-resizer {:style (resizer-style draggable-area)
:on-mouse-move (fn [e] :on-mouse-down #(reset! dragging? true)
(when @dragging? :on-mouse-up #(reset! dragging? false)
(let [x (.-clientX e) :on-mouse-move (fn [e]
y (.-clientY e)] (when @dragging?
(.preventDefault e) (let [x (.-clientX e)
(reset! size (/ (- full-width x) y (.-clientY e)]
full-width)))))}] (.preventDefault e)
[:div {:style {:width "100%" :height "100%" :overflow "auto"}} (reset! size (/ (- full-width x)
[:button {:class (str "tab button " (when (= @selected-tab :traces) "active")) full-width)))))}]
:on-click #(reset! selected-tab :traces)} "Traces"] [:div.panel-content
[:button {:class (str "tab button " (when (= @selected-tab :subvis) "active")) {:style {:width "100%" :height "100%" :display "flex" :flex-direction "column"}}
:on-click #(reset! selected-tab :subvis)} "SubVis"] [:div.panel-content-top
(case @selected-tab [:div.nav
:traces [render-trace-panel] [:button {:class (str "tab button " (when (= @selected-tab :traces) "active"))
:subvis [subvis/render-subvis traces] :on-click #(reset! selected-tab :traces)} "Traces"]
[render-trace-panel])]]]))}))) [:button {:class (str "tab button " (when (= @selected-tab :subvis) "active"))
:on-click #(reset! selected-tab :subvis)} "SubVis"]]]
[:div.panel-content-scrollable
(case @selected-tab
:traces [render-trace-panel]
:subvis [subvis/render-subvis traces]
[render-trace-panel])]]]]))})))
(defn panel-div [] (defn panel-div []
(let [id "--re-frame-trace--" (let [id "--re-frame-trace--"

8
src/day8/re_frame/trace/subvis.cljs
View File

@ -43,7 +43,6 @@
simulation-a (atom nil)] simulation-a (atom nil)]
(fn [] (fn []
[:div [:div
{:style {:padding "10px"}}
[d3t/create-d3 [d3t/create-d3
{:render-component (fn [ratom] {:render-component (fn [ratom]
[:svg#d3cmp {:width width :height height}]) [:svg#d3cmp {:width width :height height}])
@ -183,9 +182,8 @@
(.. simulation (.. simulation
(restart) (restart)
(alpha 0.3))))) (alpha 0.3)))))]))))}
]
))))}
traces-ratom] traces-ratom]
[:hr]]))) [:hr]])))