Make header match mockup

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

@@ -26,6 +26,61 @@
 
 (def outer-margins {:margin (str "0px " common/gs-19s)})
 
+(defn right-hand-buttons [external-window?]
+  (let [selected-tab      (rf/subscribe [:settings/selected-tab])
+        showing-settings? (= @selected-tab :settings)]
+    [rc/h-box
+     :align :center
+     :children
+     [(when showing-settings?
+        [:button {:class    "bm-active-button"
+                  :on-click #(rf/dispatch [:settings/toggle-settings])} "Done"])
+      [:img.nav-icon
+       {:title    "Pause"
+        :src      (str "data:image/svg+xml;utf8,"
+                       pause-svg)
+        :on-click #(rf/dispatch [:settings/pause])}]
+      [:img.nav-icon
+       {:title    "Settings"
+        :src      (str "data:image/svg+xml;utf8,"
+                       (if showing-settings? orange-settings-svg settings-svg))
+        :on-click #(rf/dispatch [:settings/toggle-settings])}]
+      (when-not external-window?
+        [:img.nav-icon.active
+         {:src      (str "data:image/svg+xml;utf8,"
+                         open-external)
+          :on-click #(rf/dispatch-sync [:global/launch-external])}])]])
+  )
+
+(defn settings-header [external-window?]
+  [[rc/h-box
+    :align :center
+    :size "auto"
+    :gap common/gs-12s
+    :children
+    [[rc/label :class "bm-title-text" :label "Settings"]]]
+   ;; TODO: this line needs to be between Done and other buttons
+   [rc/gap-f :size common/gs-12s]
+   [rc/line :size "2px" :color common/sidebar-heading-divider-color]
+   [rc/gap-f :size common/gs-12s]
+   [right-hand-buttons external-window?]])
+
+(defn standard-header [external-window?]
+  [[rc/h-box
+    :align :center
+    :size "auto"
+    :gap common/gs-12s
+    :children
+    [[:span.arrow "◀"]
+     [rc/v-box
+      :size "auto"
+      :children [[:span.event-header "[:some-namespace/blah 34 \"Hello\""]]]
+     [:span.arrow "▶"]]]
+   [rc/gap-f :size common/gs-12s]
+   [rc/line :size "2px" :color common/sidebar-heading-divider-color]
+   [right-hand-buttons external-window?]]
+  )
+
 (defn devtools-inner [traces opts]
   (let [selected-tab      (rf/subscribe [:settings/selected-tab])
         panel-type        (:panel-type opts)
@@ -34,43 +89,17 @@
         showing-settings? (= @selected-tab :settings)]
     [:div.panel-content
      {:style {:width "100%" :display "flex" :flex-direction "column" :background-color common/standard-background-color}}
-     [rc/h-box
+     (if showing-settings?
-      :class "panel-content-top nav"
-      :style {:padding "0px 19px"}
-      :justify :between
-      :children
-      [[rc/h-box
-        :align :center
-        :gap common/gs-12s
-        :children
-        (if showing-settings?
-          [[rc/label :class "bm-title-text" :label "Settings"]]
-          [[:span.arrow "◀"]
-           [:span.event-header "[:some-namespace/blah 34 \"Hello\""]
-           [:span.arrow "▶"]])]
        [rc/h-box
-        :align :center
+        :class "panel-content-top nav"
+        :style {:padding "0px 19px"}
         :children
-        [(when showing-settings?
+        (settings-header external-window?)]
-           [:button {:class "bm-active-button"
+       [rc/h-box
-                     :on-click #(rf/dispatch [:settings/toggle-settings])} "Done"])
+        :class "panel-content-top nav"
-         [:img.nav-icon
+        :style {:padding "0px 19px"}
-          {:title    "Pause"
+        :children
-           :src      (str "data:image/svg+xml;utf8,"
+        (standard-header external-window?)])
-                          pause-svg)
-           :on-click #(rf/dispatch [:settings/pause])}]
-         [:img.nav-icon
-          {:title    "Settings"
-           :src      (str "data:image/svg+xml;utf8,"
-                          (if showing-settings?
-                            orange-settings-svg
-                            settings-svg))
-           :on-click #(rf/dispatch [:settings/toggle-settings])}]
-         (when-not external-window?
-           [:img.nav-icon.active
-            {:src      (str "data:image/svg+xml;utf8,"
-                            open-external)
-             :on-click #(rf/dispatch-sync [:global/launch-external])}])]]]]
      (when-not showing-settings?
        [rc/h-box
         :class "panel-content-tabs"

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

@@ -3,36 +3,59 @@
             [day8.re-frame.trace.utils.re-com :as rc]
             [day8.re-frame.trace.common-styles :as common]))
 
+(defn explanation-text [children]
+  [rc/v-box
+   :width "150px"
+   :gap common/gs-19s
+   :children children])
+
+(defn settings-box
+  "settings and explanation are both children of re-com boxes"
+  [settings explanation]
+  [rc/h-box
+   :justify :between
+   :children [[rc/v-box
+               :children settings]
+              [explanation-text explanation]]])
+
 (defn render []
   [rc/v-box
+   :style {:padding-top common/gs-31s}
    :gap common/gs-19s
    :children
-   [[rc/label
+   [[settings-box
-     :label "Limits"
+     [[rc/label :label "Retain last 10 epochs"]
-     :class "bm-heading-text"]
+      [:button "Clear All Epochs"]]
+     [[:p "8 epochs currently retained, involving 10,425 traces."]]]
 
-    [rc/label
+    [rc/line]
-     :label "Event Filters"
-     :class "bm-heading-text"
-     ]
 
-    [rc/label
+    [settings-box
-     :label "View Filters"
+     [[rc/label :label "Ignore epochs for:"]
-     :class "bm-heading-text"]
+      [:button "+ event-id"]]
+     [[:p "All trace associated with these events will be ignored."]
+      [:p "Useful if you want to ignore a periodic background polling event."]]]
 
-    [rc/label
+    [rc/line]
-     :label "Low Level Trace Filters"
-     :class "bm-heading-text"]
 
-    [rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :reagent %]) :label "reagent internals"]
+    [settings-box
-    [rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :re-frame %]) :label "re-frame internals"]
+     [[rc/label :label "Filter out trace for views in "]
+      [:button "+ namespace"]]
+     [[:p "Sometimes you want to focus on just your own views, and the trace associated with library views is just noise."]
+      [:p "Nominate one or more namespaces"]]]
 
-    [rc/label
+    [rc/line]
-     :label "Reset"
-     :class "bm-heading-text"]
 
-    [:button {:on-click #(rf/dispatch [:settings/clear-epochs])} "Clear Epochs"]
+    [settings-box
-    [:button {:on-click #(rf/dispatch [:settings/factory-reset])} "Factory Reset"]
+     [[rc/label :label "Remove low level trace"]
-    [:p "Will refresh page"]
+      [rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :reagent %]) :label "reagent internals"]
-    ]]
+      [rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :re-frame %]) :label "re-frame internals"]]
-  )
+     [[:p "Most of the time, low level trace is noisy and you want it filtered out."]]]
+
+    [rc/line]
+
+    [settings-box
+     [[:button "Factory Reset"]]
+     [[:p "Reset all settings (will refresh browser)."]]]
+
+    ]])