From 3b1e4c5d864c74769f7682699fb0724d68b9b640 Mon Sep 17 00:00:00 2001 From: "chris (daiyi)" Date: Tue, 1 Aug 2017 15:17:34 +0200 Subject: [PATCH] Add filter tag styles and extract to ns's --- src/day8/re_frame/components.cljs | 15 ++++++++ src/day8/re_frame/styles.cljs | 59 +++++++++++++++++++++++++++++ src/day8/re_frame/trace.cljs | 56 +++++++++------------------ src/day8/re_frame/trace/subvis.cljs | 1 - 4 files changed, 91 insertions(+), 40 deletions(-) create mode 100644 src/day8/re_frame/components.cljs create mode 100644 src/day8/re_frame/styles.cljs diff --git a/src/day8/re_frame/components.cljs b/src/day8/re_frame/components.cljs new file mode 100644 index 0000000..ccc9728 --- /dev/null +++ b/src/day8/re_frame/components.cljs @@ -0,0 +1,15 @@ +(ns day8.re-frame.trace.components) + +(defn icon-add [] + [:svg.icon.icon-add + {:viewBox "0 0 32 32"} + [:title "add"] + [:path + {:d "M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"}]]) + +(defn icon-remove [] + [:svg.icon.icon-remove + {:viewBox "0 0 32 32"} + [:title "remove"] + [:path + {:d "M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"}]]) diff --git a/src/day8/re_frame/styles.cljs b/src/day8/re_frame/styles.cljs new file mode 100644 index 0000000..ec6a09d --- /dev/null +++ b/src/day8/re_frame/styles.cljs @@ -0,0 +1,59 @@ +(ns day8.re-frame.trace.styles) + +(defonce panel-styles " +#--re-frame-trace-- tbody { + color: #aaa; +} +#--re-frame-trace-- tr:nth-child(even) { + background: aliceblue; +} +#--re-frame-trace-- .button + { + background: lightblue; + padding: 5px 5px 3px; + margin: 5px; + border-radius: 2px; + cursor: pointer; +} +#--re-frame-trace-- .icon-button { + vertical-align: middle; + font-size: 10px; +} +#--re-frame-trace-- .tab { + background: transparent; + border-bottom: 3px solid #eee; + padding-bottom: 1px; + border-radius: 0; +} +#--re-frame-trace-- .tab.active { + background: transparent; + border-bottom: 3px solid lightblue; + padding-bottom: 1px; + border-radius: 0; +} +#--re-frame-trace-- ul.filter-items { + list-style-type: none; + padding: 0; + margin: 0 -5px; +} +#--re-frame-trace-- .filter-items li { + background: lightblue; + color: #666; + display: inline-block; + margin: 5px; +} +#--re-frame-trace-- .filter-items li .filter-item-string { + color: #333; +} +#--re-frame-trace-- .icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +} +#--re-frame-trace-- .icon-remove { +margin-left: 10px; +} +") diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs index 23527d1..129906e 100644 --- a/src/day8/re_frame/trace.cljs +++ b/src/day8/re_frame/trace.cljs @@ -1,5 +1,7 @@ (ns day8.re-frame.trace (:require [day8.re-frame.trace.subvis :as subvis] + [day8.re-frame.trace.styles :as styles] + [day8.re-frame.trace.components :as components] [re-frame.trace :as trace :include-macros true] [cljs.pprint :as pprint] [clojure.string :as str] @@ -187,9 +189,8 @@ :filter-type @filter-type}))] [:div {:style {:padding "10px"}} - [:h1 "TRACES"] - [:span filter-msg [:button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} " Clear traces"]] [:br] - [:span "Filter events " + [:span filter-msg "(" [:button.text-button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} " Clear"] ")"] [:br] + [:span [:select {:value @filter-type :on-change (fn [e] (reset! filter-type (.. e -target -value)) (println (.. e -target -value)))} @@ -197,19 +198,21 @@ [:option "slower than"]] [search-input {:on-save save-query :on-change #(reset! filter-input (.. % -target -value))}] - [:button {:on-click save-query} "+"] + [:button.button.icon-button {:on-click save-query} + [components/icon-add]] ;; [:button {:style {:background "#aae0ec" ;; :padding 7 ;; :margin 5}} ;; "-"]] - [:br] - [:div.filter-items + [:br]] + [:ul.filter-items (map (fn [item] ^{:key (:id item)} - [:span [:div.filter-item {:style {:paddingLeft 90}} (:filter-type item) " " (:query item) - [:button {:on-click (fn [event] (swap! filter-items #(remove (comp (partial = (:query item)) :query) %)))} - "-"]]]) - @filter-items)]] + [: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 @@ -274,9 +277,9 @@ (reset! size (/ (- full-width x) full-width)))))}] [:div {:style {:width "100%" :height "100%" :overflow "auto"}} - [:button {:class (str "tab " (when (= @selected-tab :traces) "active")) + [:button {:class (str "tab button " (when (= @selected-tab :traces) "active")) :on-click #(reset! selected-tab :traces)} "Traces"] - [:button {:class (str "tab " (when (= @selected-tab :subvis) "active")) + [:button {:class (str "tab button " (when (= @selected-tab :subvis) "active")) :on-click #(reset! selected-tab :subvis)} "SubVis"] (case @selected-tab :traces [render-traces] @@ -291,39 +294,14 @@ (let [new-panel (.createElement js/document "div")] (.setAttribute new-panel "id" id) (.appendChild (.-body js/document) new-panel) + (js/window.focus new-panel) new-panel)))) (defn inject-styles [] (let [id "--re-frame-trace-styles--" styles-el (.getElementById js/document id) new-styles-el (.createElement js/document "style") - new-styles " -#--re-frame-trace-- tbody { - color: #aaa; -} -#--re-frame-trace-- tr:nth-child(even) { - background: aliceblue; -} -#--re-frame-trace-- button { - background: lightblue; - padding: 5px 5px 3px; - margin: 5px; - border-radius: 2px; - cursor: pointer; -} -#--re-frame-trace-- .tab { - background: transparent; - border-bottom: 3px solid #eee; - padding-bottom: 1px; - border-radius: 0; -} -#--re-frame-trace-- .tab.active { - background: transparent; - border-bottom: 3px solid lightblue; - padding-bottom: 1px; - border-radius: 0; -} -"] + new-styles styles/panel-styles] (.setAttribute new-styles-el "id" id) (-> new-styles-el (.-innerHTML) diff --git a/src/day8/re_frame/trace/subvis.cljs b/src/day8/re_frame/trace/subvis.cljs index eb37e1d..e46de11 100644 --- a/src/day8/re_frame/trace/subvis.cljs +++ b/src/day8/re_frame/trace/subvis.cljs @@ -44,7 +44,6 @@ (fn [] [:div {:style {:padding "10px"}} - [:h1 "SUBVIS"] [d3t/create-d3 {:render-component (fn [ratom] [:svg#d3cmp {:width width :height height}])