Improve styles and colours and composition
This commit is contained in:
chris (daiyi)
parent
d04a114838
commit
11fcf21e2d
|
|
@ -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;
|
||||
}
|
||||
")
|
||||
|
|
|
|||
|
|
@ -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,8 +185,9 @@
|
|||
:query (str/lower-case @filter-input)
|
||||
:filter-type @filter-type}))]
|
||||
[:div
|
||||
{:style {:padding "10px"}}
|
||||
[:span
|
||||
[: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)))}
|
||||
|
|
@ -194,7 +195,8 @@
|
|||
[:option "slower than"]]
|
||||
[search-input {:on-save save-query
|
||||
:on-change #(reset! filter-input (.. % -target -value))}]
|
||||
[:button.button.icon-button {:on-click save-query}
|
||||
[:button.button.icon-button {:on-click save-query
|
||||
:style {:margin 0}}
|
||||
[components/icon-add]]
|
||||
;; [:button {:style {:background "#aae0ec"
|
||||
;; :padding 7
|
||||
|
|
@ -208,7 +210,7 @@
|
|||
{: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)]
|
||||
@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,11 +267,13 @@
|
|||
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"
|
||||
[: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.resizer {:style (resizer-style draggable-area)
|
||||
[: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]
|
||||
|
|
@ -279,15 +283,19 @@
|
|||
(.preventDefault e)
|
||||
(reset! size (/ (- full-width x)
|
||||
full-width)))))}]
|
||||
[:div {:style {:width "100%" :height "100%" :overflow "auto"}}
|
||||
[: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"]
|
||||
: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])]]]))})))
|
||||
[render-trace-panel])]]]]))})))
|
||||
|
||||
(defn panel-div []
|
||||
(let [id "--re-frame-trace--"
|
||||
|
|
|
|||
|
|
@ -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]])))
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue