app-db panel UI redesign WIP

.idea/codeStyleSettings.xml

@@ -9,6 +9,9 @@
   :cursive.formatting/align-binding-forms true
   :day8.re-frame.trace.utils.macros/with-cljs-devtools-prefs 1
 }</ClojureCodeStyleSettings>
+        <MarkdownNavigatorCodeStyleSettings>
+          <option name="RIGHT_MARGIN" value="72" />
+        </MarkdownNavigatorCodeStyleSettings>
       </value>
     </option>
     <option name="USE_PER_PROJECT_SETTINGS" value="true" />

src/day8/re_frame/trace/styles.cljs

@@ -351,9 +351,13 @@
      :height           common/gs-31}]
    [:.app-db-path--label
     {:color          "#2D9CDB"
-     :font-variant   "small-caps"
+     ;:font-variant   "small-caps"
-     :text-transform "lowercase"
+     ;:text-transform "lowercase"
-     :height         common/gs-19}]
+     :text-decoration "underline"
+     :font-size       "11px"
+     :margin-bottom   "2px"
+     ;:height         common/gs-19
+     }]
    [:.app-db-path--path-header
     {:background-color common/white-background-color
      :color            "#48494A"
@@ -373,6 +377,9 @@
                         :width          (px 16)
                         :padding        "0 2px"
                         :vertical-align "middle"}]
+   [:.bm-muted-button {:font-size "14px"
+                       :height    "23px"
+                       :padding   "0px 7px"}]
    ])
 
 

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

@@ -387,6 +387,34 @@
              attr)
            label]])
 
+(defn button
+  "Returns the markup for a basic button"
+  []
+  (let [showing? (reagent/atom false)]
+    (fn
+      [& {:keys [label on-click disabled? class style attr]
+          :or   {class "btn-default"}
+          :as   args}]
+      (let [disabled?  (deref-or-value disabled?)
+            the-button [:button
+                        (merge
+                          {:class    (str "rc-button btn " class)
+                           :style    (merge
+                                       (flex-child-style "none")
+                                       style)
+                           :disabled disabled?
+                           :on-click (handler-fn
+                                       (when (and on-click (not disabled?))
+                                         (on-click event)))}
+                          attr)
+                        label]]
+        (when disabled?
+          (reset! showing? false))
+        [box ;; Wrapper box is unnecessary but keeps the same structure as the re-com button
+         :class "rc-button-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

@@ -3,7 +3,6 @@
             [devtools.prefs]
             [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.reagent.v0v6v0.reagent.core :as r]
             [day8.re-frame.trace.utils.re-com :as rc]
@@ -16,71 +15,164 @@
 (def snapshot (macros/slurp-macro "day8/re_frame/trace/images/snapshot.svg"))
 (def snapshot-ready (macros/slurp-macro "day8/re_frame/trace/images/snapshot-ready.svg"))
 
+(def cljs-dev-tools-background "#e8ffe8")
+
 (defn top-buttons []
   [rc/h-box
    :justify  :between
-   :children [[:button "+ path viewer"]
+   :margin   "19px 0px"
+   :align    :center
+   :children [[rc/button
+               :class    "bm-muted-button"
+               :style    {:width   "129px"
+                          :padding "0px"}
+               :label    [rc/v-box
+                          :align    :center
+                          :children ["+ path inspector"]]
+               :on-click #()]
               [rc/h-box
                :align :center
-               :children
+               :gap "7px"
-               [[rc/label :label "reset app-db to:"]
+               :height  "48px"
-                [:button "initial state"]
+               :padding "0px 12px"
+               :style {:background-color "#fafbfc"
+                       :border "1px solid #e8edf1"         ;; TODO: Need to get proper color from Figma
+                       :border-radius "3px"}
+               :children [[rc/label :label "reset app-db to:"]
+                          [rc/button
+                           :class    "bm-muted-button"
+                           :style    {:width   "79px"
+                                      :padding "0px"}
+                           :label    [rc/v-box
+                                      :align    :center
+                                      :children ["initial state"]]
+                           :on-click #()]
                           [rc/v-box
                            :width common/gs-81s
                            :align :center
                            :children [[rc/label :label "event"]
-                            ;; TODO: arrow doesn't show up when there is an alignment
+                                      [rc/line :style {:align-self "stretch"}] ;; TODO: Add arrow head
-                            [rc/line]
                                       [rc/label :label "processing"]]]
-                [:button "end state"]]]]])
+                          [rc/button
+                           :class    "bm-muted-button"
+                           :style    {:width   "79px"
+                                      :padding "0px"}
+                           :label    [rc/v-box
+                                      :align    :center
+                                      :children ["end state"]]
+                           :on-click #()]]]]])
 
 (defn path-header [p]
+  (let [search-string (rf/subscribe [:app-db/search-string])]
     [rc/h-box
      :class "app-db-path--header"
+     :style {:border-top-left-radius "3px"
+             :border-top-right-radius "3px"}
      :align :center
-   :gap common/gs-12s
+     :height common/gs-31s
-   :children [">"
+     :children [[rc/box
+                 :width "36px"
+                 :height "31px"
+                 :child  [rc/box :margin "auto" :child [:span.arrow "▶"]]]
                 [rc/h-box
                  :size "auto"
                  :class "app-db-path--path-header"
-               :children
+                 ;:style {:background-color "yellow"}
-               [[rc/label
+                 :children [[rc/input-text
-                 :class (str "app-db-path--path-text " (when (nil? p) "app-db-path--path-text__empty"))
+                             ;:class           (str "app-db-path--path-text " (when (nil? p) "app-db-path--path-text__empty"))
-                 :label (if (some? p)
+                             :style           {:height           "25px"
-                          (prn-str p)
+                                               :padding          "0px 7px"
-                          "Showing all of app-db. Try entering a path like [:todos 1]")]]]
+                                               ;:background-color "lightgreen"
-              [:button "diff"]
+                                               :width            "-webkit-fill-available"} ;; This took a bit of finding!
-              [:button "trash"]]])
+                             :width           "100%"
+                             :model           search-string
+                             :on-change       (fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
+                             :on-submit       #(rf/dispatch [:app-db/add-path %])
+                             :change-on-blur? false
+                             :placeholder     "Showing all of app-db. Try entering a path like [:todos 1]"]]]
+                [rc/gap-f :size common/gs-12s]
+                [rc/button
+                 :class "bm-muted-button"
+                 :style {:width "25px"
+                         :height "25px"
+                         :padding "0px"}
+                 :label [:img
+                         {:src      (str "data:image/svg+xml;utf8," snapshot-ready)
+                          :style    {:cursor "pointer"
+                                     :height "19px"
+                                     :margin "3px"}
+                          :on-click #() #_#(rf/dispatch [:app-db/remove-path path])}]
+                 :on-click #()]
+                [rc/gap-f :size common/gs-12s]
+                [rc/button
+                 :class "bm-muted-button"
+                 :style {:width "25px"
+                         :height "25px"
+                         :padding "0px"}
+                 :label [:img
+                         {:src      (str "data:image/svg+xml;utf8," delete)
+                          :style    {:cursor "pointer"
+                                     :height "19px"
+                                     :margin "3px"}
+                          :on-click #() #_#(rf/dispatch [:app-db/remove-path path])}]
+                 :on-click #()]
+                [rc/gap-f :size common/gs-12s]]]))
 
 (defn app-db-path [p]
   ^{:key (str p)}
   [rc/v-box
    :class "app-db-path"
-   :children
+   :style {:border-bottom-left-radius "3px"
-   [[path-header p]
+           :border-bottom-right-radius "3px"}
-    [rc/label :label "Main data"]
+   :children [[path-header p]
-    ;; TODO: Make these into hyperlinks
+              [rc/v-box
-    [rc/label :class "app-db-path--label" :label "Only Before:"]
+               :height "90px"
-    [rc/label :label "Before diff"]
+               :style {:background-color cljs-dev-tools-background
-    [rc/label :class "app-db-path--label" :label "Only After"]
+                       :padding  "7px"
-    [rc/label :label "After diff"]]])
+                       :margin "12px 12px 0px 12px"}
+               :children ["---main-section---"]]
+
+              [rc/v-box
+               :height  "19px"
+               :justify  :end
+               :style    {:margin "0px 12px"}
+               :children [[rc/label :class "app-db-path--label" :label "ONLY BEFORE"]]]
+              [rc/v-box
+               :height "60px"
+               :style {:background-color cljs-dev-tools-background
+                       :padding  "7px"
+                       :margin "0px 12px"}
+               :children ["---before-diff---"]]
+
+              [rc/v-box
+               :height   "19px"
+               :justify  :end
+               :style    {:margin "0px 12px"}
+               :children [[rc/label :class "app-db-path--label" :label "ONLY AFTER"]]]
+              [rc/v-box
+               :height "60px"
+               :style {:background-color cljs-dev-tools-background
+                       :padding  "7px"
+                       :margin "0px 12px"}
+               :children ["---after-diff---"]]
+              [rc/gap-f :size "12px"]]])
 
 (defn paths []
   [rc/v-box
    :gap common/gs-31s
-   :children
+   :children (doall (for [p [["x" "y"] [:abc 123] nil]]
-   (doall (for [p [["x" "y"] [:abc 123] nil]]
                       [app-db-path p]))])
 
 
 (defn render-state [data]
   [rc/v-box
-   :gap common/gs-31s
+   :style    {:margin-right common/gs-19s}
-   :children
+   :children [[top-buttons]
-   [[top-buttons]
+              [paths]
-    [paths]]])
+              [rc/gap-f :size common/gs-19s]]])
 
 
+(comment
   (defn old-render-state [data]
     (let [subtree-input   (r/atom "")
           subtree-paths   (rf/subscribe [:app-db/paths])
@@ -90,7 +182,7 @@
       (fn []
         [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}}
          [:div.panel-content-scrollable
-        [re-com/input-text
+          [rc/input-text
            :model search-string
            :on-change (fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
            :on-submit #(rf/dispatch [:app-db/add-path %])
@@ -102,8 +194,7 @@
           ;    "Please enter a valid path."])]]
 
           [rc/h-box
-         :children
+           :children [[:img.nav-icon
-         [[:img.nav-icon
                        {:title    "Load app-db snapshot"
                         :class    (when-not @snapshot-ready? "inactive")
                         :src      (str "data:image/svg+xml;utf8,"
@@ -130,8 +221,7 @@
                        (get-in @data path)
                        [rc/h-box
                         :align :center
-                      :children
+                        :children [[:button.subtree-button
-                      [[:button.subtree-button
                                     [:span.subtree-button-string
                                      (str path)]]
                                    [:img
@@ -142,4 +232,4 @@
                        [path]]]])
                   @subtree-paths))]
           [:div {:style {:margin-bottom "20px"}}
-         [components/subtree @data [:span.label "app-db"] [:app-db]]]]])))
+           [components/subtree @data [:span.label "app-db"] [:app-db]]]]]))))

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

@@ -123,9 +123,9 @@
        [:h1.host-closed {:style {:word-wrap "break-word"}} "Tracing is not enabled. Please set " [:pre "{\"re_frame.trace.trace_enabled_QMARK_\" true}"] " in " [:pre ":closure-defines"]])
      [rc/v-box
       :size     "auto"
-      :style {:margin-left common/gs-19s}
+      :style    {:margin-left common/gs-19s
-      :children
+                 :overflow "auto"}
-      [(case @selected-tab
+      :children [(case @selected-tab
                    :overview [overview/render traces]
                    :app-db [app-db/render-state db/app-db]
                    :subs [subs/subs-panel]