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
: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" />

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

@ -351,9 +351,13 @@
:height common/gs-31}]
[:.app-db-path--label
{:color "#2D9CDB"
:font-variant "small-caps"
:text-transform "lowercase"
:height common/gs-19}]
;:font-variant "small-caps"
;:text-transform "lowercase"
: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"}]
])

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

@ -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]

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

@ -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
[[rc/label :label "reset app-db to:"]
[:button "initial state"]
:gap "7px"
:height "48px"
: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]
[rc/line :style {:align-self "stretch"}] ;; TODO: Add arrow head
[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
:children [">"
:height common/gs-31s
: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
[[rc/label
:class (str "app-db-path--path-text " (when (nil? p) "app-db-path--path-text__empty"))
:label (if (some? p)
(prn-str p)
"Showing all of app-db. Try entering a path like [:todos 1]")]]]
[:button "diff"]
[:button "trash"]]])
;:style {:background-color "yellow"}
: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]
^{:key (str p)}
[rc/v-box
:class "app-db-path"
:children
[[path-header p]
[rc/label :label "Main data"]
;; TODO: Make these into hyperlinks
[rc/label :class "app-db-path--label" :label "Only Before:"]
[rc/label :label "Before diff"]
[rc/label :class "app-db-path--label" :label "Only After"]
[rc/label :label "After diff"]]])
:style {:border-bottom-left-radius "3px"
:border-bottom-right-radius "3px"}
:children [[path-header p]
[rc/v-box
:height "90px"
:style {:background-color cljs-dev-tools-background
:padding "7px"
: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
(doall (for [p [["x" "y"] [:abc 123] nil]]
:children (doall (for [p [["x" "y"] [:abc 123] nil]]
[app-db-path p]))])
(defn render-state [data]
[rc/v-box
:gap common/gs-31s
:children
[[top-buttons]
[paths]]])
:style {:margin-right common/gs-19s}
:children [[top-buttons]
[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
[[:img.nav-icon
:children [[: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
[[:button.subtree-button
:children [[: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]]]]]))))

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

@ -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}
:children
[(case @selected-tab
:style {:margin-left common/gs-19s
:overflow "auto"}
:children [(case @selected-tab
:overview [overview/render traces]
:app-db [app-db/render-state db/app-db]
:subs [subs/subs-panel]