Make header match mockup

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

@@ -26,28 +26,9 @@
 
 (def outer-margins {:margin (str "0px " common/gs-19s)})
 
-(defn devtools-inner [traces opts]
+(defn right-hand-buttons [external-window?]
   (let [selected-tab      (rf/subscribe [:settings/selected-tab])
-        panel-type        (:panel-type opts)
-        external-window?  (= panel-type :popup)
-        unloading?        (rf/subscribe [:global/unloading?])
         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
-      :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
      :children
@@ -62,15 +43,63 @@
       [:img.nav-icon
        {:title    "Settings"
         :src      (str "data:image/svg+xml;utf8,"
-                          (if showing-settings?
+                       (if showing-settings? orange-settings-svg settings-svg))
-                            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])}])]]]]
+          :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)
+        external-window?  (= panel-type :popup)
+        unloading?        (rf/subscribe [:global/unloading?])
+        showing-settings? (= @selected-tab :settings)]
+    [:div.panel-content
+     {:style {:width "100%" :display "flex" :flex-direction "column" :background-color common/standard-background-color}}
+     (if showing-settings?
+       [rc/h-box
+        :class "panel-content-top nav"
+        :style {:padding "0px 19px"}
+        :children
+        (settings-header external-window?)]
+       [rc/h-box
+        :class "panel-content-top nav"
+        :style {:padding "0px 19px"}
+        :children
+        (standard-header external-window?)])
      (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"]
 
+    [settings-box
+     [[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/line]
+
+    [settings-box
+     [[rc/label :label "Remove low level trace"]
       [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"]
+      [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/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"]
+     [[:button "Factory Reset"]]
-    [:p "Will refresh page"]
+     [[:p "Reset all settings (will refresh browser)."]]]
-    ]]
+
-  )
+    ]])