Add filter tag styles and extract to ns's

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"}]])

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;
+}
+")

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-trace-panel]
@@ -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)

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}])