status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

app-db panel UI redesign WIP

This commit is contained in:
Gregg8 2018-01-09 18:09:31 +11:00
parent ac19e04572
commit f4a6c3e9b9
5 changed files with 247 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.idea/codeStyleSettings.xml
View File

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

13
src/day8/re_frame/trace/styles.cljs
View File

@ -351,9 +351,13 @@
:height common/gs-31}] :height common/gs-31}]
[:.app-db-path--label [:.app-db-path--label
{:color "#2D9CDB" {: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 [:.app-db-path--path-header
{:background-color common/white-background-color {:background-color common/white-background-color
:color "#48494A" :color "#48494A"
@ -373,6 +377,9 @@
:width (px 16) :width (px 16)
:padding "0 2px" :padding "0 2px"
:vertical-align "middle"}] :vertical-align "middle"}]
[:.bm-muted-button {:font-size "14px"
:height "23px"
:padding "0px 7px"}]
]) ])

28
src/day8/re_frame/trace/utils/re_com.cljs
View File

@ -387,6 +387,34 @@
attr) attr)
label]]) 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 (defn checkbox
"I return the markup for a checkbox, with an optional RHS label" "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] [& {:keys [model on-change label disabled? label-class label-style class style attr]

300
src/day8/re_frame/trace/view/app_db.cljs
View File

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

22
src/day8/re_frame/trace/view/container.cljs
View File

@ -122,14 +122,14 @@
(when-not (re-frame.trace/is-trace-enabled?) (when-not (re-frame.trace/is-trace-enabled?)
[: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"]]) [: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 [rc/v-box
:size "auto" :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] :overview [overview/render traces]
:app-db [app-db/render-state db/app-db] :app-db [app-db/render-state db/app-db]
:subs [subs/subs-panel] :subs [subs/subs-panel]
:views [views/render] :views [views/render]
:traces [traces/render-trace-panel traces] :traces [traces/render-trace-panel traces]
:settings [settings/render] :settings [settings/render]
[app-db/render-state db/app-db])]]])) [app-db/render-state db/app-db])]]]))