Add "x" button to remove app-db panel paths

README.md

@@ -105,3 +105,4 @@ If you want to work on re-frame-trace, see [DEVELOPERS.md](DEVELOPERS.md).
 * [open](https://thenounproject.com/search/?q=popout&i=334227) by Bluetip Design from the Noun Project
 * [reload](https://thenounproject.com/adnen.kadri/collection/arrows/?i=798299) by Adnen Kadri from the Noun Project
 * [Camera](https://thenounproject.com/search/?q=snapshot&i=200965) by Christian Shannon from the Noun Project
+* [Delete](https://thenounproject.com/term/delete/926276) by logan from the Noun Project

resources/day8/re_frame/trace/images/delete.svg

@@ -0,0 +1 @@
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 823.93427 823.93427" enable-background="new 0 0 2000 2000" xml:space="preserve"><path style="" d="m 776.75678,0 c -12.064,0 -24.124,4.608 -33.345,13.828 L 411.94378,345.27301 80.52575,13.879 c -18.443,-18.441 -48.255,-18.441 -66.695,0 -18.441,18.44 -18.441,48.244 0,66.685 l 331.418,331.39601 -331.418,331.399 c -18.441,18.44 -18.441,48.25 0,66.691 9.198,9.198 21.272,13.817 33.347,13.817 12.073,0 24.15,-4.619 33.348,-13.817 l 331.41803,-331.398 331.468,331.445 c 9.197,9.198 21.271,13.82 33.345,13.82 12.074,0 24.101,-4.622 33.346,-13.82 18.442,-18.441 18.442,-48.247 0,-66.687 l -331.464,-331.446 331.464,-331.44501 c 18.442,-18.441 18.442,-48.25 0,-66.691 C 800.88178,4.608 788.81678,0 776.75678,0 Z" fill="#444444"/></svg>

src/day8/re_frame/trace/styles.cljs

@@ -88,7 +88,7 @@
              :-webkit-font-smoothing "inherit"
              :letter-spacing         "inherit"
              :background             "none"
-             :cursor                 "pointer"}]
+            #_ #_  :cursor                 "pointer"}]
    [:img {:max-width (percent 100)
           :height    "auto"
           :border    "0"}]
@@ -218,7 +218,7 @@
    [:.button {:padding       "5px 5px 3px"
               :margin        "5px"
               :border-radius "2px"
-              :cursor        "pointer"}]
+            #_ #_   :cursor        "pointer"}]
    [:.text-button {:border-bottom "1px dotted #888"
                    :font-weight   "normal"}
     [(s/& s/focus) {:outline [[medium-gray "dotted" (px 1)]]}]]
@@ -257,8 +257,11 @@
             label-mixin)
      [:.filter-item-string {:color      text-color
                             :background yellow}]
-     [:.subtree-button-string {:color text-color}]
-     [(s/& s/hover) (s/& s/focus) {:text-decoration "line-through"}]]]
+     [:.subtree-button-string {:color text-color}]]
+    [:.subtree
+     [:img {:opacity "0"}]
+     [:&:hover
+      [:img {"opacity" 1}]]]]
 
    [:.icon {:display      "inline-block"
             :width        (em 1)
@@ -306,9 +309,7 @@
    [:.filter-control {:margin "10px 0 0 10px"}]
    [:.filter-items-count
     {:cursor "auto"}
-    [(s/& ".active") {:background yellow
-                      :cursor     "pointer"}
-     [(s/& ":hover") {:text-decoration "line-through"}]]]
+    [(s/& ".active") {:background yellow}]]
    [:.filter-fields {:margin-top "10px"}]
    [:.filter-category {:display    "inline-block"
                        :background "#efeef1"

src/day8/re_frame/trace/view/app_db.cljs

@@ -5,7 +5,11 @@
             [devtools.formatters.core]
             [day8.re-frame.trace.view.components :as components]
             [day8.re-frame.trace.utils.re-com :as re-com]
-            [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
+            [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
+            [day8.re-frame.trace.utils.re-com :as rc])
+  (:require-macros [day8.re-frame.trace.utils.macros :as macros]))
+
+(def delete (macros/slurp-macro "day8/re_frame/trace/images/delete.svg"))
 
 (defn render-state [data]
   (let [subtree-input (r/atom "")
@@ -21,7 +25,6 @@
          :on-submit #(rf/dispatch [:app-db/add-path %])
          :change-on-blur? false
          :placeholder ":path :into :app-db"]
-
         ;; TODO: check for input errors
         ; (if @input-error
         ;   [:div.input-error {:style {:color "red" :margin-top 5}}
@@ -35,9 +38,17 @@
                    [:div.subtree
                     [components/subtree
                      (get-in @data path)
-                     [:button.subtree-button {:on-click #(rf/dispatch [:app-db/remove-path path])}
-                      [:span.subtree-button-string
-                       (str path)]]
+                     [rc/h-box
+                      :align :center
+                      :children
+                      [[:button.subtree-button
+                        [:span.subtree-button-string
+                         (str path)]]
+                       [:img
+                        {:src      (str "data:image/svg+xml;utf8," delete)
+                         :style {:cursor "pointer"
+                                 :height "10px"}
+                         :on-click #(rf/dispatch [:app-db/remove-path path])}]]]
                      [path]]]])
                 @subtree-paths))]
         [:div {:style {:margin-bottom "20px"}}

src/day8/re_frame/trace/view/components.cljs

@@ -4,7 +4,8 @@
             [goog.fx.dom :as fx]
             [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
             [day8.re-frame.trace.utils.localstorage :as localstorage]
-            [clojure.string :as str])
+            [clojure.string :as str]
+            [day8.re-frame.trace.utils.re-com :as rc])
   (:require-macros [day8.re-frame.trace.utils.macros :refer [with-cljs-devtools-prefs]]))
 
 (defn search-input [{:keys [title placeholder on-save on-change on-stop]}]
@@ -166,21 +167,26 @@
 (defn subtree [data title path]
   (let [expanded? (rf/subscribe [:app-db/node-expanded? path])]
     (fn [data]
-      [:div
-       {:class (str/join " " ["re-frame-trace--object"
-                              (when @expanded? "expanded")])}
-       [:span {:class    "toggle"
-               :on-click #(rf/dispatch [:app-db/toggle-expansion path])}
-        [:button.expansion-button (if @expanded? "▼ " "▶ ")]]
-       (or title "data")
-       [:div {:style {:margin-left 20}}
-        (cond
-          (and @expanded?
-               (or (string? data)
-                   (number? data)
-                   (boolean? data)
-                   (nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)]
-          @expanded? (jsonml->hiccup (cljs-devtools-header data) (conj path 0)))]])))
+      [rc/v-box
+       :children
+       [[rc/h-box
+         :align :center
+         :class (str/join " " ["re-frame-trace--object"
+                               (when @expanded? "expanded")])
+         :children
+         [[:span {:class    "toggle"
+                  :on-click #(rf/dispatch [:app-db/toggle-expansion path])}
+           [:button.expansion-button (if @expanded? "▼ " "▶ ")]]
+          (or title "data")]]
+        [rc/h-box
+         :children [[:div {:style {:margin-left 20}}
+                     (cond
+                       (and @expanded?
+                            (or (string? data)
+                                (number? data)
+                                (boolean? data)
+                                (nil? data))) [:div {:style {:margin "10px 0"}} (prn-str data)]
+                       @expanded? (jsonml->hiccup (cljs-devtools-header data) (conj path 0)))]]]]])))
 
 (defn subscription-render [data title path]
   (let [expanded? (r/atom true) #_(rf/subscribe [:app-db/node-expanded? path])]