From 11fcf21e2ddd201ce4c9f185e532976b7ad50d0a Mon Sep 17 00:00:00 2001 From: "chris (daiyi)" Date: Tue, 1 Aug 2017 22:55:27 +0200 Subject: [PATCH] Improve styles and colours and composition --- src/day8/re_frame/styles.cljs | 50 +++++++++--- src/day8/re_frame/trace.cljs | 120 +++++++++++++++------------- src/day8/re_frame/trace/subvis.cljs | 8 +- 3 files changed, 106 insertions(+), 72 deletions(-) diff --git a/src/day8/re_frame/styles.cljs b/src/day8/re_frame/styles.cljs index f8592c0..26464d2 100644 --- a/src/day8/re_frame/styles.cljs +++ b/src/day8/re_frame/styles.cljs @@ -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; } ") diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index 5febecb..000ad1f 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -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--" diff --git a/src/day8/re_frame/trace/subvis.cljs b/src/day8/re_frame/trace/subvis.cljs index e46de11..f651224 100644 --- a/src/day8/re_frame/trace/subvis.cljs +++ b/src/day8/re_frame/trace/subvis.cljs @@ -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]]))) -