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

In app-db panel, made many fine adjustments to looks like the updated spec, buttons and hyperlinks now have hover styles

This commit is contained in:
Gregg8 2018-01-18 17:09:29 +11:00
parent e6415c849c
commit 08fd487377
4 changed files with 105 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/day8/re_frame/trace/common_styles.cljs
View File

@ -170,7 +170,10 @@
:border (str "1px solid " active-button-background-color)}]
[:.bm-muted-button {:color muted-button-text-color
:background-color muted-button-background-color
:border (str "1px solid " strong-button-border-color)}]
:border (str "1px solid " muted-button-border-color)
:cursor "pointer"}
[:&:hover {:color strong-button-border-color
:border (str "1px solid " strong-button-border-color)}]]
[:.bm-disabled-button {;:color disabled-text-color (not yet defined)
:background-color disabled-background-color

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

@ -42,9 +42,10 @@
:font-size (em 1)}]
;; Text-level semantics
[(s/a) (s/a s/visited) {:color text-color
:cursor "pointer"
:text-decoration "underline"}]
[(s/a) (s/a s/visited) {:color text-color
:cursor "pointer"}
[:&:hover {:color "#23527c"
:text-decoration "underline"}]]
[:code {:font-family "monospace"
:font-size (em 1)}]

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

@ -22,25 +22,31 @@
(def cljs-dev-tools-background "#e8ffe8")
(def pod-gap common/gs-19s)
(def pad-padding "0px")
(def pod-padding "0px")
(def pod-border-color "#daddde")
(def pod-border-edge (str "1px solid " pod-border-color))
(def border-radius "3px")
(def app-db-styles
[:#--re-frame-trace--
[:.app-db-path
#_[:.app-db-path
{:background-color common/white-background-color
:border-bottom-left-radius border-radius
:border-bottom-right-radius border-radius}]
[:.app-db-path--pod-border
{:border-left pod-border-edge
:border-right pod-border-edge
:border-bottom pod-border-edge
:border-bottom-left-radius border-radius
:border-bottom-right-radius border-radius}]
[:.app-db-path--header
{:background-color "#797B7B" ; Name this navbar tint-lighter
:color "white"
:height common/gs-31
:border-top-left-radius border-radius
:border-top-right-radius border-radius}]
[:.app-db-path--header__closed
{:border-bottom-left-radius border-radius
:border-bottom-right-radius border-radius}]
[:.app-db-path--button
{:width "25px"
@ -52,13 +58,9 @@
[:.app-db-path--label
{:color "#2D9CDB"
;:font-variant "small-caps"
;:text-transform "lowercase"
:text-decoration "underline"
:font-size "11px"
:margin-bottom "2px"
;:height common/gs-19
}]
:margin-bottom "2px"}]
[:.app-db-path--path-header
{:background-color common/white-background-color
:color "#48494A"
@ -67,19 +69,24 @@
{:font-style "italic"}]
[:.app-db-path--link
{:margin (css-join "0px" pad-padding)
{:margin (css-join "0px" pod-padding)
:height common/gs-19s}]
[:.app-db-panel-button
{:width "129px"
:padding "0px"}]
[:.rounded-bottom
{:border-bottom-left-radius border-radius
:border-bottom-right-radius border-radius}]
[:.data-viewer
{:background-color cljs-dev-tools-background
:padding common/gs-7s
:margin (css-join "0px" pad-padding)
:min-width "100px"
}]
:margin (css-join "0px" pod-padding)
:min-width "100px"}]
[:.data-viewer--top-rule
{:border-top pod-border-edge}]
])
@ -120,7 +127,7 @@
:align :center
:margin (css-join common/gs-19s "0px")
:children [[rc/button
:class "app-db-panel-button bm-muted-button"
:class "bm-muted-button app-db-panel-button"
:label [rc/v-box
:align :center
:children ["+ path inspector"]]
@ -135,7 +142,7 @@
:border-radius border-radius}
:children [[rc/label :label "reset app-db to:"]
[rc/button
:class "app-db-panel-button bm-muted-button"
:class "bm-muted-button app-db-panel-button"
:label [rc/v-box
:align :center
:children ["initial epoch state"]]
@ -152,7 +159,7 @@
:margin-top "-1px"}
:label "PROCESSING"]]]
[rc/button
:class "app-db-panel-button bm-muted-button"
:class "bm-muted-button app-db-panel-button"
:label [rc/v-box
:align :center
:children ["end epoch state"]]
@ -160,7 +167,7 @@
(defn pod-header [{:keys [id path path-str open? diff?]}]
[rc/h-box
:class (str "app-db-path--header " (when-not open? "app-db-path--header__closed"))
:class (str "app-db-path--header " (when-not open? "rounded-bottom"))
:align :center
:height common/gs-31s
:children [[rc/box
@ -177,10 +184,11 @@
:class "app-db-path--path-header"
:size "auto"
:children [[rc/input-text
:attr {:on-blur (fn [e] (rf/dispatch [:app-db/update-path-blur id]))}
:class (when (empty? path-str) "app-db-path--path-text__empty")
:style {:height "25px"
:padding (css-join "0px" common/gs-7s)
:width "-webkit-fill-available"} ;; This took a bit of finding!
:attr {:on-blur (fn [e] (rf/dispatch [:app-db/update-path-blur id]))}
:width "100%"
:model path-str
:on-change #(rf/dispatch [:app-db/update-path id %]) ;;(fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
@ -189,7 +197,7 @@
:placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]]
[rc/gap-f :size common/gs-12s]
[rc/box
:class "app-db-path--button bm-muted-button noselect"
:class "bm-muted-button app-db-path--button noselect"
:attr {:title "Show diff"
:on-click #(rf/dispatch [:app-db/set-diff-visibility id (not diff?)])}
:child [:img
@ -198,7 +206,7 @@
:margin "0px 3px"}}]]
[rc/gap-f :size common/gs-12s]
[rc/box
:class "app-db-path--button bm-muted-button noselect"
:class "bm-muted-button app-db-path--button noselect"
:attr {:title "Remove this pod"
:on-click #(rf/dispatch [:app-db/remove-path id])}
:child [:img
@ -215,70 +223,73 @@
(clojure.data/diff (get-in @app-db-before path)
(get-in @app-db-after path)))]
[rc/v-box
:class "app-db-path"
;:class "app-db-path"
:children [[pod-header pod-info]
(when open?
[rc/v-box
:class "data-viewer"
:style {:margin (css-join pad-padding pad-padding "0px" pad-padding)}
:children [[components/simple-render
(get-in @app-db-after path)
["app-db-path" path]
[rc/v-box
:class (when open? "app-db-path--pod-border")
:children [(when open?
[rc/v-box
:class (str "data-viewer" (when-not diff? " rounded-bottom"))
:style {:margin (css-join pod-padding pod-padding "0px" pod-padding)}
:children [[components/simple-render
(get-in @app-db-after path)
["app-db-path" path]
#_{:todos [1 2 3]}
#_(get-in @app-db path)
#_[rc/h-box
:align :center
:children [[:button.subtree-button
[:span.subtree-button-string
(str path)]]
[:img
{:src (str "data:image/svg+xml;utf8," delete)
:style {:cursor "pointer"
:height "10px"}
:on-click #(rf/dispatch [:app-db/remove-path path])}]]]
#_[path]]
#_{:todos [1 2 3]}
#_(get-in @app-db path)
#_[rc/h-box
:align :center
:children [[:button.subtree-button
[:span.subtree-button-string
(str path)]]
[:img
{:src (str "data:image/svg+xml;utf8," delete)
:style {:cursor "pointer"
:height "10px"}
:on-click #(rf/dispatch [:app-db/remove-path path])}]]]
#_[path]]
#_"---main-section---"]])
(when render-diff?
(list
^{:key "only-before"}
[rc/v-box
:class "app-db-path--link"
:justify :end
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY BEFORE"
:style {:margin-left common/gs-7s}
:target "_blank"
:href utils/diff-link]]]
#_"---main-section---"]])
(when render-diff?
(list
^{:key "only-before"}
[rc/v-box
:class "app-db-path--link"
:justify :end
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY BEFORE"
:style {:margin-left common/gs-7s}
:target "_blank"
:href utils/diff-link]]]
^{:key "only-before-diff"}
[rc/v-box
:class "data-viewer"
:children [[components/simple-render
diff-before
["app-db-diff" path]]]]
^{:key "only-before-diff"}
[rc/v-box
:class "data-viewer data-viewer--top-rule"
:children [[components/simple-render
diff-before
["app-db-diff" path]]]]
^{:key "only-after"}
[rc/v-box
:class "app-db-path--link"
:justify :end
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY AFTER"
:style {:margin-left common/gs-7s}
:target "_blank"
:href utils/diff-link]]]
^{:key "only-after"}
[rc/v-box
:class "app-db-path--link"
:justify :end
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY AFTER"
:style {:margin-left common/gs-7s}
:target "_blank"
:href utils/diff-link]]]
^{:key "only-after-diff"}
[rc/v-box
:class "data-viewer"
:children [[components/simple-render
diff-after
["app-db-diff" path]]]]))
(when open?
[rc/gap-f :size pad-padding])]]))
^{:key "only-after-diff"}
[rc/v-box
:class "data-viewer data-viewer--top-rule rounded-bottom"
:children [[components/simple-render
diff-after
["app-db-diff" path]]]]))
(when open?
[rc/gap-f :size pod-padding])]]
]]))
(defn no-pods []
[rc/h-box

14
src/day8/re_frame/trace/view/subs.cljs
View File

@ -18,7 +18,7 @@
(def cljs-dev-tools-background "#e8ffe8")
(def pod-gap common/gs-19s)
(def pad-padding "0px")
(def pod-padding "0px")
;; TODO: START ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
@ -188,7 +188,7 @@
:min-width "100px"
:style {:background-color cljs-dev-tools-background
:padding common/gs-7s
:margin (css-join pad-padding pad-padding "0px" pad-padding)}
:margin (css-join pod-padding pod-padding "0px" pod-padding)}
:children [[components/simple-render
(:value pod-info)
["sub-path" path]]]])
@ -196,7 +196,7 @@
[rc/v-box
:height common/gs-19s
:justify :end
:style {:margin (css-join "0px" pad-padding)}
:style {:margin (css-join "0px" pod-padding)}
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY BEFORE"
@ -209,13 +209,13 @@
:min-width "100px"
:style {:background-color cljs-dev-tools-background
:padding common/gs-7s
:margin (css-join "0px" pad-padding)}
:margin (css-join "0px" pod-padding)}
:children ["---before-diff---"]])
(when (and open? diff?)
[rc/v-box
:height common/gs-19s
:justify :end
:style {:margin (css-join "0px" pad-padding)}
:style {:margin (css-join "0px" pod-padding)}
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY AFTER"
@ -228,10 +228,10 @@
:min-width "100px"
:style {:background-color cljs-dev-tools-background
:padding common/gs-7s
:margin (css-join "0px" pad-padding)}
:margin (css-join "0px" pod-padding)}
:children ["---after-diff---"]])
(when open?
[rc/gap-f :size pad-padding])]])
[rc/gap-f :size pod-padding])]])
(defn no-pods []
[rc/h-box