Skip to content

Commit

Permalink
Fix subs panel styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@superstructor
superstructor committed May 17, 2021
1 parent d578e48 commit 4039a05
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 73 deletions.
23 changes: 13 additions & 10 deletions src/day8/re_frame_10x/components/cljs_devtools.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,9 +226,11 @@
(declare jsonml->hiccup)

(defclass jsonml-style
[ambiance]
{:display :flex
:flex-direction :row}
[ambiance syntax-color-scheme]
{:display :flex
:flex-direction :row
:background-color (styles/syntax-color ambiance syntax-color-scheme :signature-background)
:padding styles/gs-5}
#_["> span"
{:vertical-align :text-top}]
[:li
Expand All @@ -248,11 +250,12 @@
{:fill (if (= ambiance :bright) styles/nord0 styles/nord5)}])

(defn data-structure [jsonml path]
(let [ambiance (rf/subscribe [::settings.subs/ambiance])
expanded? (rf/subscribe [::app-db.subs/node-expanded? path])]
(let [ambiance (rf/subscribe [::settings.subs/ambiance])
syntax-color-scheme (rf/subscribe [::settings.subs/syntax-color-scheme])
expanded? (rf/subscribe [::app-db.subs/node-expanded? path])]
(fn [jsonml path]
[:span
{:class (jsonml-style @ambiance)}
{:class (jsonml-style @ambiance @syntax-color-scheme)}
[:span {:class (toggle-style @ambiance)
:on-click #(rf/dispatch [::app-db.events/toggle-expansion path])}
[:button
Expand Down Expand Up @@ -316,8 +319,7 @@

(defclass prn-str-render-style
[ambiance syntax-color-scheme]
{:padding styles/gs-5
:background-color (styles/syntax-color ambiance syntax-color-scheme :signature-background)
{:background-color (styles/syntax-color ambiance syntax-color-scheme :signature-background)
:color (styles/syntax-color ambiance syntax-color-scheme :bool)})

(defn prn-str-render
Expand All @@ -328,11 +330,12 @@
(prn-str data)]))

(defn simple-render [data path & [class]]
(let [ambiance (rf/subscribe [::settings.subs/ambiance])]
(let [ambiance (rf/subscribe [::settings.subs/ambiance])
syntax-color-scheme (rf/subscribe [::settings.subs/syntax-color-scheme])]
(fn [data]
[rc/box
:size "1"
:class (str (jsonml-style @ambiance) " " class)
:class (str (jsonml-style @ambiance @syntax-color-scheme) " " class)
:child
(if (prn-str-render? data)
(prn-str-render data)
Expand Down
118 changes: 67 additions & 51 deletions src/day8/re_frame_10x/panels/subs/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
(get-in tag-types [type :short] (str type)))


(defn sub-color
(defn sub-type->color
[type]
(case type
:sub/create styles/nord15
Expand All @@ -60,8 +60,8 @@
(defclass sub-tag-style
[ambiance type]
{:color :#fff
:background-color (sub-color type)
:border [[(px 1) :solid (color/darken (sub-color type) 10)]]})
:background-color (sub-type->color type)
:border [[(px 1) :solid (color/darken (sub-type->color type) 10)]]})

(defclass sub-tag-short-style
[ambiance type]
Expand Down Expand Up @@ -176,12 +176,7 @@
:border-right pod-border-edge}
:align :center
:children [[rc/label
:label path]
#_[rc/input-text
:class (styles/path-text-input-style ambiance)
:width "100%"
:model path
:disabled? true]]]
:label path]]]

[pod-header-section
:min-width styles/gs-50s
Expand Down Expand Up @@ -236,12 +231,45 @@
:margin-top "1px"}
:on-change #(rf/dispatch [::subs.events/set-diff-visibility id (not diff?)])]]]]]]))

(defclass sub-message-style
[]
{:font-style :italic
:padding styles/gs-5})

(defn no-previous-value-message []
[rc/label :class (sub-message-style) :label "No previous value exists to diff"])

(defn unchanged-value-message
[]
[rc/label :class (sub-message-style) :label "Subscription value is unchanged"])

(defn sub-not-run-message
[]
[rc/label :class (sub-message-style) :label "Subscription not run, so no diff is available"])

(def no-prev-value-msg [:p {:style {:font-style "italic"}} "No previous value exists to diff"])
(def unchanged-value-msg [:p {:style {:font-style "italic"}} "Subscription value is unchanged"])
(def sub-not-run-msg [:p {:style {:font-style "italic"}} "Subscription not run, so no diff is available"])
(def not-run-yet-msg [rc/label :style {:font-style "italic"} :label "Subscription not run yet, so no value is available"])
(defn not-run-yet-message
[]
[rc/label :class (sub-message-style) :label "Subscription not run yet, so no value is available"])

(defclass sub-data-style
[ambiance]
{:overflow-x :auto
:overflow-y :hidden
:border-left (styles/border-2 ambiance)
:border-right (styles/border-2 ambiance)})

(defclass diff-header-style
[ambiance]
{:composes (styles/colors-2 ambiance)
:border-left (styles/border-2 ambiance)
:border-right (styles/border-2 ambiance)})

(defclass diff-data-style
[ambiance]
{:overflow-x :auto
:overflow-y :hidden
:border-left (styles/border-2 ambiance)
:border-right (styles/border-2 ambiance)})

(defn pod [{:keys [id layer path open? diff?] :as pod-info}]
(let [render-diff? (and open? diff?)
Expand All @@ -253,22 +281,18 @@
:margin-right "1px"}
:children [[pod-header pod-info]
[rc/v-box
:class (when open? "app-db-path--pod-border")
:children [(when open?
(let [main-value (:value pod-info)
#_(cond value? (:value pod-info)
previous-value? (:previous-value pod-info)
:else nil)]
[rc/v-box
:class "data-viewer"
:style {:margin (css-join pod-padding pod-padding "0px" pod-padding)
:overflow-x "auto"
:overflow-y "hidden"}
:class (sub-data-style ambiance)
:children [(if (or value? #_previous-value?)
[cljs-devtools/simple-render
main-value
["sub-path" path]]
not-run-yet-msg)]]))
[not-run-yet-message])]]))

(when render-diff?
(let [diffable? (and value? previous-value?)
Expand All @@ -279,51 +303,43 @@
[diff-before diff-after _] (clojure.data/diff previous-value value)]
[rc/v-box
:children [[rc/v-box
:class "app-db-path--link"
:style {:background-color styles/nord0}
:justify :end
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY BEFORE"
:style {:margin-left styles/gs-7s}
:attr {:rel "noopener noreferrer"}
:class (diff-header-style ambiance)
:justify :end
:children [[rc/hyperlink
:class (styles/hyperlink ambiance)
:label "ONLY BEFORE"
:style {:margin-left styles/gs-7s}
:attr {:rel "noopener noreferrer"}
:target "_blank"
:href app-db.views/diff-url]]]
:href app-db.views/diff-url]]]
[rc/v-box
:class (styles/pod-data ambiance)
;:class "data-viewer data-viewer--top-rule"
:style {:overflow-x "auto"
:overflow-y "hidden"}
:class (diff-data-style ambiance)
:children [(cond
not-run? sub-not-run-msg
unchanged-value? unchanged-value-msg
not-run? [sub-not-run-message]
unchanged-value? [unchanged-value-message]
diffable? [cljs-devtools/simple-render
diff-before
["app-db-diff" path]]
:else no-prev-value-msg)]]
:else [no-previous-value-message])]]
[rc/v-box
:class "app-db-path--link"
:style {:background-color styles/nord0}
:justify :end
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY AFTER"
:style {:margin-left styles/gs-7s
:background-color styles/nord0}
:attr {:rel "noopener noreferrer"}
:class (diff-header-style ambiance)
:justify :end
:children [[rc/hyperlink
:class (styles/hyperlink ambiance)
:label "ONLY AFTER"
:style {:margin-left styles/gs-7s}
:attr {:rel "noopener noreferrer"}
:target "_blank"
:href app-db.views/diff-url]]]
:href app-db.views/diff-url]]]
[rc/v-box
:class "data-viewer data-viewer--top-rule"
:style {:overflow-x "auto"
:overflow-y "hidden"}
:class (diff-data-style ambiance)
:children [(cond
not-run? sub-not-run-msg
unchanged-value? unchanged-value-msg
not-run? [sub-not-run-message]
unchanged-value? [unchanged-value-message]
diffable? [cljs-devtools/simple-render
diff-after
["app-db-diff" path]]
:else no-prev-value-msg)]]]]))
:else [no-previous-value-message])]]]]))
(when open?
[rc/gap-f :size pod-padding])]]]])))

Expand Down
34 changes: 22 additions & 12 deletions src/day8/re_frame_10x/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,6 @@
[ambiance]
(if (= ambiance :bright) :#fff nord1))

(defclass colors-0
[ambiance]
{:background-color (background-color-0 ambiance)})

(defn background-color-1
[ambiance]
(if (= :bright ambiance) nord-ghost-white nord0))
Expand All @@ -91,6 +87,26 @@
[ambiance]
(if (= :bright ambiance) nord3 nord4))

(defn background-color-2
[ambiance]
(if (= :bright ambiance) nord6 nord1))

(defn color-2
[ambiance]
(if (= :bright ambiance) nord2 nord4))

#_(defn background-color-3
[ambiance]
(if (= :bright ambiance) nord5 nord2))

#_(defn color-3
[ambiance]
(if (= :bright ambiance) nord3 nord5))

(defclass colors-0
[ambiance]
{:background-color (background-color-0 ambiance)})

(defclass colors-1
[ambiance]
{:background-color (background-color-1 ambiance)
Expand All @@ -106,13 +122,7 @@
:border (border-1 ambiance)
:border-radius gs-2})

(defn background-color-2
[ambiance]
(if (= :bright ambiance) nord6 nord1))

(defn color-2
[ambiance]
(if (= :bright ambiance) nord2 nord4))

(defclass colors-2
[ambiance]
Expand Down Expand Up @@ -425,8 +435,8 @@
(let [[foreground background border] (if (= :bright ambiance)
[nord0 nord5 nord4]
[nord6 nord1 nord3])]
{:background-color background
:color foreground
{:background-color (background-color-2 ambiance)
:color (color-2 ambiance)
#_#_:padding-left gs-12s ;; TODO: this conflicts between fx and subs; need padding for fx but no padding for subs.
:border [[(px 1) :solid border]]
:height gs-31
Expand Down

0 comments on commit 4039a05

Please sign in to comment.