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)
(defonce panel-styles "
#--re-frame-trace-- {
background: white;
color: black;
font-family: 'courier new', monospace;
}
#--re-frame-trace-- tbody {
color: #aaa;
}
#--re-frame-trace-- tr:nth-child(even) {
background: aliceblue;
}
#--re-frame-trace-- .button
{
background: lightblue;
#--re-frame-trace-- .button {
padding: 5px 5px 3px;
margin: 5px;
border-radius: 2px;
@ -20,20 +23,26 @@
font-weight: normal;
}
#--re-frame-trace-- .icon-button {
vertical-align: middle;
font-size: 10px;
}
#--re-frame-trace-- button.tab {
}
#--re-frame-trace-- .tab {
background: transparent;
border-bottom: 3px solid #eee;
padding-bottom: 1px;
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 {
background: transparent;
border-bottom: 3px solid lightblue;
padding-bottom: 1px;
border-radius: 0;
padding-bottom: 1px;
}
#--re-frame-trace-- ul.filter-items {
list-style-type: none;
@ -41,13 +50,14 @@
margin: 0 -5px;
}
#--re-frame-trace-- .filter-items li {
background: lightblue;
color: #666;
color: #333;
background: #efefef;
display: inline-block;
font-size: 0.9em;
margin: 5px;
}
#--re-frame-trace-- .filter-items li .filter-item-string {
color: #333;
color: #616cdb;
}
#--re-frame-trace-- .icon {
display: inline-block;
@ -58,6 +68,24 @@
fill: currentColor;
}
#--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
:tags {:component-path (reagent.impl.component/component-path c)}
:operation (last (str/split name #" > "))}
(real-renderer c)
(real-renderer c)))))
))))
(set! reagent.impl.component/static-fns static-fns)
@ -90,8 +90,8 @@
#_(set! reagent.impl.batching/schedule schedule
#_(fn []
(reagent.impl.batching/do-after-render (fn [] (trace/with-trace {:op-type :raf-end})))
(real-schedule)))
))
(real-schedule)))))
(def traces (interop/ratom []))
(defn log-trace? [trace]
@ -115,8 +115,8 @@
(defn init-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]}]
(let [val (r/atom title)
@ -124,9 +124,9 @@
(when (pos? (count v))
(on-save v)))]
(fn []
[:input {:type "text"
[:input {:style {:margin-left 7}
:type "text"
:value @val
:style {:margin 7}
:auto-focus true
:on-change #(do (reset! val (-> % .-target .-value))
(on-change %))
@ -185,30 +185,32 @@
:query (str/lower-case @filter-input)
:filter-type @filter-type}))]
[:div
{:style {:padding "10px"}}
[:span
[:select {:value @filter-type :on-change (fn [e]
(reset! filter-type (.. e -target -value))
(println (.. e -target -value)))}
[:option "contains"]
[:option "slower than"]]
[search-input {:on-save save-query
:on-change #(reset! filter-input (.. % -target -value))}]
[:button.button.icon-button {:on-click save-query}
[components/icon-add]]
;; [:button {:style {:background "#aae0ec"
;; :padding 7
;; :margin 5}}
;; "-"]]
[:br]]
[:ul.filter-items
(map (fn [item]
^{:key (:id item)}
[:li.filter-item.button
{:on-click (fn [event] (swap! filter-items #(remove (comp (partial = (:query item)) :query) %)))}
(:filter-type item) ": " [:span.filter-item-string (:query item)]
[:button.icon-button [components/icon-remove]]])
@filter-items)]
[:div.filter-control {:style {:margin-bottom 20}}
[:div.filter-control-input
{:style {:margin-bottom 10}}
[:select {:value @filter-type :on-change (fn [e]
(reset! filter-type (.. e -target -value))
(println (.. e -target -value)))}
[:option "contains"]
[:option "slower than"]]
[search-input {:on-save save-query
:on-change #(reset! filter-input (.. % -target -value))}]
[:button.button.icon-button {:on-click save-query
:style {:margin 0}}
[components/icon-add]]
;; [:button {:style {:background "#aae0ec"
;; :padding 7
;; :margin 5}}
;; "-"]]
[:br]]
[:ul.filter-items
(map (fn [item]
^{:key (:id item)}
[:li.filter-item.button
{:on-click (fn [event] (swap! filter-items #(remove (comp (partial = (:query item)) :query) %)))}
(:filter-type item) ": " [:span.filter-item-string (:query item)]
[:button.icon-button [components/icon-remove]]])
@filter-items)]]
[:table
{:cell-spacing "0" :width "100%"}
[:thead>tr
@ -234,7 +236,7 @@
;; Add clear button
;; Filter out different trace types
(let [position (r/atom :right)
size (r/atom 0.3)
size (r/atom 0.35)
showing? (r/atom false)
dragging? (r/atom false)
pin-to-bottom? (r/atom true)
@ -265,29 +267,35 @@
transition (if @showing?
ease-transition
(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 {:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.298039) 0px 0px 4px" :background "white"
:left left :top "0px" :width (str (* 100 @size) "%") :height "100%"
:transition transition}}
[:div.resizer {:style (resizer-style draggable-area)
:on-mouse-down #(reset! dragging? true)
:on-mouse-up #(reset! dragging? false)
:on-mouse-move (fn [e]
(when @dragging?
(let [x (.-clientX e)
y (.-clientY e)]
(.preventDefault e)
(reset! size (/ (- full-width x)
full-width)))))}]
[:div {:style {:width "100%" :height "100%" :overflow "auto"}}
[:button {:class (str "tab button " (when (= @selected-tab :traces) "active"))
:on-click #(reset! selected-tab :traces)} "Traces"]
[:button {:class (str "tab button " (when (= @selected-tab :subvis) "active"))
:on-click #(reset! selected-tab :subvis)} "SubVis"]
(case @selected-tab
:traces [render-trace-panel]
:subvis [subvis/render-subvis traces]
[render-trace-panel])]]]))})))
[:div.panel-wrapper
{:style {:position "fixed" :width "0px" :height "0px" :top "0px" :left "0px" :z-index 99999999}}
[:div.panel
{:style {:position "fixed" :z-index 1 :box-shadow "rgba(0, 0, 0, 0.298039) 0px 0px 4px" :background "white"
:left left :top "0px" :width (str (* 100 @size) "%") :height "100%"
:transition transition}}
[:div.panel-resizer {:style (resizer-style draggable-area)
:on-mouse-down #(reset! dragging? true)
:on-mouse-up #(reset! dragging? false)
:on-mouse-move (fn [e]
(when @dragging?
(let [x (.-clientX e)
y (.-clientY e)]
(.preventDefault e)
(reset! size (/ (- full-width x)
full-width)))))}]
[:div.panel-content
{:style {:width "100%" :height "100%" :display "flex" :flex-direction "column"}}
[:div.panel-content-top
[:div.nav
[:button {:class (str "tab button " (when (= @selected-tab :traces) "active"))
:on-click #(reset! selected-tab :traces)} "Traces"]
[: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 []
(let [id "--re-frame-trace--"

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

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