Add doc links for only-before and only-after diffing

src/day8/re_frame/trace/styles.cljs

@@ -41,9 +41,9 @@
           :font-size   (em 1)}]
 
    ;; Text-level semantics
-   [(s/a) (s/a s/visited) {:color         text-color
+   [(s/a) (s/a s/visited) {:color           text-color
-                           :border-bottom [[(px 1) "#333" "dotted"]]}]
+                           :cursor          "pointer"
-   [(s/a s/hover) (s/a s/focus) {:border-bottom [[(px 1) "#666666" "solid"]]}]
+                           :text-decoration "underline"}]
 
    [:code {:font-family "monospace"
            :font-size   (em 1)}]
@@ -124,7 +124,7 @@
    ["svg:not(:root), symbol, image, marker, pattern, foreignObject"
     {:overflow "hidden"}]
    ["svg:root"
-    {:width "100%"
+    {:width  "100%"
      :height "100%"}]
    ["text, foreignObject"
     {:display "block"}]
@@ -326,7 +326,7 @@
                   :padding          (px 5)
                   :cursor           "pointer"
                   :user-select      "none"}]
-    [:span.arrow__disabled {:color common/disabled-background-color
+    [:span.arrow__disabled {:color  common/disabled-background-color
                             :cursor "auto"}]
     [:span.event-header {:color            common/text-color
                          :background-color common/standard-background-color
@@ -375,7 +375,7 @@
      :color            "white"
      :height           common/gs-31}]
    [:.app-db-path--label
-    {:color          "#2D9CDB"
+    {:color           "#2D9CDB"
      ;:font-variant   "small-caps"
      ;:text-transform "lowercase"
      :text-decoration "underline"

src/day8/re_frame/trace/utils/re_com.cljs

@@ -445,6 +445,35 @@
          :align :start
          :child the-button]))))
 
+(defn hyperlink-href
+  "Renders an underlined text hyperlink component.
+   This is very similar to the button component above but styled to looks like a hyperlink.
+   Useful for providing button functionality for less important functions, e.g. Cancel"
+  []
+  (let [showing? (reagent/atom false)]
+    (fn
+      [& {:keys [label href target tooltip tooltip-position class style attr] :as args}]
+      (when-not tooltip (reset! showing? false)) ;; To prevent tooltip from still showing after button drag/drop
+      (let [label      (deref-or-value label)
+            href       (deref-or-value href)
+            target     (deref-or-value target)
+            the-button [:a
+                        (merge {:class  (str "rc-hyperlink-href noselect " class)
+                                :style  (merge (flex-child-style "none")
+                                               style)
+                                :href   href
+                                :target target}
+                               (when tooltip
+                                 {:on-mouse-over (handler-fn (reset! showing? true))
+                                  :on-mouse-out  (handler-fn (reset! showing? false))})
+                               attr)
+                        label]]
+
+        [box
+         :class "rc-hyperlink-href-wrapper display-inline-flex"
+         :align :start
+         :child the-button]))))
+
 (defn checkbox
   "I return the markup for a checkbox, with an optional RHS label"
   [& {:keys [model on-change label disabled? label-class label-style class style attr]

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

@@ -182,9 +182,7 @@
                    :style {:background-color cljs-dev-tools-background
                            :padding          common/gs-7s
                            :margin           (css-join pad-padding pad-padding "0px" pad-padding)}
-                   :children [
+                   :children [[components/simple-render
-
-                              [components/simple-render
                                @app-db-after
 
                                #_{:todos [1 2 3]}
@@ -207,10 +205,10 @@
                    :height common/gs-19s
                    :justify :end
                    :style {:margin (css-join "0px" pad-padding)}
-                   :children [[rc/hyperlink
+                   :children [[rc/hyperlink-href
                                ;:class "app-db-path--label"
                                :label "ONLY BEFORE"
-                               :on-click #(println "Clicked [ONLY BEFORE]")]]])
+                               :href "https://github.com/Day8/re-frame-trace/wiki/app-db#diff"]]])
                 (when render-diff?
                   [rc/v-box
                    :height "60px"
@@ -225,10 +223,10 @@
                    :height common/gs-19s
                    :justify :end
                    :style {:margin (css-join "0px" pad-padding)}
-                   :children [[rc/hyperlink
+                   :children [[rc/hyperlink-href
                                ;:class "app-db-path--label"
                                :label "ONLY AFTER"
-                               :on-click #(println "Clicked [ONLY AFTER]")]]])
+                               :href "https://github.com/Day8/re-frame-trace/wiki/app-db#diff"]]])
                 (when render-diff?
                   [rc/v-box
                    :height "60px"