Skip to content

Commit

Permalink
Add native gradient support
Browse files Browse the repository at this point in the history
  • Loading branch information
@bendyorke
bendyorke committed Jun 30, 2023
1 parent c8692d1 commit a7b9c01
Show file tree
Hide file tree
Showing 8 changed files with 122 additions and 137 deletions.
1 change: 1 addition & 0 deletions deps/shui/shui-graph/pages/shui___components___button.md
View file
@@ -0,0 +1 @@
-
11 changes: 9 additions & 2 deletions deps/shui/src/logseq/shui/context.cljs
View file
@@ -1,4 +1,7 @@
(ns logseq.shui.context)
(ns logseq.shui.context
(:require
[frontend.state :as state]
[frontend.colors :as colors]))

(defn inline->inline-block [inline block-config]
(fn [_context item]
Expand Down Expand Up @@ -33,4 +36,8 @@
:whiteboard? (:whiteboard? block-config)
;; Some functions from logseq's application will be used in the shui components. To avoid circular dependencies,
;; they will be provided via the context object
:int->local-time-2 int->local-time-2})
:int->local-time-2 int->local-time-2
;; We need some variable from the state to carry over
:color-accent (state/get-color-accent)
:color-gradient (state/get-color-gradient)
:linear-gradient colors/linear-gradient})
14 changes: 8 additions & 6 deletions deps/shui/src/logseq/shui/table/v2.cljs
View file
Expand Up @@ -304,10 +304,10 @@
:on-pointer-down handle-pointer-down}
child]]))

(rum/defc table-gradient-accent [{:keys [color]}]
(rum/defc table-gradient-accent [{:keys [color color-gradient linear-gradient]}]
[:div.rounded-t.h-2.-ml-px.-mt-px.-mr-px
{:style {:grid-column "1 / -1" :order -999}
:class (str "grad-bg-" color "-9")
{:style {:grid-column "1 / -1" :order -999
:background (linear-gradient color :09 color-gradient)}
:data-testid "v2-table-gradient-accent"}])

(rum/defc table-header-row [handle-cell-width-change cells {:keys [cell-col-map] :as opts}]
Expand Down Expand Up @@ -372,7 +372,7 @@
children]))

(rum/defc root
[{:keys [data] :as _props} {:keys [block] :as context}]
[{:keys [data] :as _props} {:keys [block color-accent color-gradient linear-gradient] :as context}]
(let [;; In order to highlight cells in the same row or column of the hovered cell,
;; we need to know the row and column that the cursor is in
[[_cell-hover-x _cell-hover-y :as cell-hover] set-cell-hover] (rum/use-state [])
Expand All @@ -390,7 +390,7 @@
;; Most of the config options will be repeated and reused throughout the table, so store
;; all of it's state in a single map for consistency
table-opts {; user configurable properties (sometimes with defaults)
:color (get-view-prop* :logseq.color)
:color (get-view-prop* :logseq.color color-accent)
:headers (get-view-prop* :logseq.table.headers "none")
:borders? (get-view-prop* :logseq.table.borders true)
:compact? (get-view-prop* :logseq.table.compact false)
Expand All @@ -400,6 +400,8 @@
:columns (get-columns block data)

; non configurable properties
:color-gradient color-gradient
:linear-gradient linear-gradient
:cell-hover cell-hover
:cell-focus cell-focus
:cursor (or (not-empty cell-focus) (not-empty cell-hover))
Expand Down Expand Up @@ -447,7 +449,7 @@
:table-underflow? table-underflow?
:cell-col-map cell-col-map)]
; (js/console.log "shui table opts context" (clj->js context))
; (js/console.log "shui table opts" (clj->js table-opts))
(js/console.log "shui table opts" (clj->js table-opts))
; (js/console.log "shui table opts" (pr-str table-opts))
;; Scrollable Container: if the table is larger than the container, manage the scrolling effects here
(table-scrollable-overflow handle-root-width-change
Expand Down
33 changes: 32 additions & 1 deletion src/main/frontend/colors.cljs
View file
Expand Up @@ -1495,6 +1495,37 @@
:grass :olive :lime :olive
:yellow :sand :amber :sand :orange :sand :brown :sand})

(defn color-gradient-even [color n-stops]
(let [color-index (.indexOf color-list color)
middle (+ color-index (count color-list))
start (- middle (/ n-stops 2))
end (+ middle (/ n-stops 2))]
(subvec (into color-list color-list) start end)))

(defn color-gradient-odd [color n-stops]
(let [color-index (.indexOf color-list color)
middle (+ color-index (count color-list))
start (- middle (/ (dec n-stops) 2))
end (+ middle (/ (dec n-stops) 2))]
(subvec (into color-list color-list) start end)))


(mod -1 10)
(defn linear-gradient [color-name color-stop gradient-level]
(let [color-index (.indexOf color-list color-name)
step (fn [dist]
(str "var(--rx-"
(name (nth color-list (mod (+ color-index dist) (count color-list))))
"-" (name color-stop) ")"))]
(case gradient-level
1 (str "linear-gradient(90deg, " (step 0) ", " (step 0) ")")
2 (str "linear-gradient(-45deg, " (step -1) " -50%, " (step 0) " 50%, " (step 1) " 150%)")
3 (str "linear-gradient(-45deg, " (step -1) " 0%, " (step 0) " 50%, " (step 1) " 100%)")
4 (str "linear-gradient(-45deg, " (step -2) " -16.66%, " (step -1) " 16.66%, " (step 0) " 50%, " (step 1) " 83.33%, " (step 2) " 116.66%)")
5 (str "linear-gradient(-45deg, " (step -2) " 0%, " (step -1) " 25%, " (step 0) " 50%, " (step 1) " 75%, " (step 2) " 100%)")
6 (str "linear-gradient(-45deg, " (step -3) " -10%, " (step -2) " 10%, " (step -1) " 30%, " (step 0) " 50%, " (step 1) " 70%, " (step 2) " 90%, " (step 3) " 110%)")
7 (str "linear-gradient(-45deg, " (step -3) " 0%, " (step -2) " 16.66%, " (step -1) " 33.33%, " (step 0) " 50%, " (step 1) " 66.66%, " (step 2) " 83.33%, " (step 3) " 100%)"))))

(defn get-color
; ([value])
([color value]
Expand All @@ -1511,7 +1542,7 @@
(get-in radix [(keyword color-name) (keyword color-value)]))
(get-in radix [(keyword color-name) (keyword color-value)]))))

(defn set-radix [color]
(defn set-radix [color gradient-level]
(let [style-tag (or (js/document.querySelector "style#color-variables")
(js/document.createElement "style"))
steps ["01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "01-alpha" "02-alpha" "03-alpha" "04-alpha" "05-alpha" "06-alpha" "07-alpha" "08-alpha" "09-alpha" "10-alpha" "11-alpha" "12-alpha"]
Expand Down
56 changes: 37 additions & 19 deletions src/main/frontend/components/settings.cljs
View file
Expand Up @@ -316,12 +316,12 @@
:padding-left "0.25rem"}}
[:div.theme-row--color {:on-click #(state/unset-color-accent!)
:class (when (nil? color-accent) "selected")}
[:div.theme-row--color-swatch {:style {"--background" "#0F2A35"
"--background-hover" "#163542"
"--background-active" "#274E5E"
"--border" "#0369a1"
"--border-hover" "#38bdf8" ;; TODO what is the hover color?
"--border-active" "#0ea5e9"} ;; TODO what is the hover color?
[:div.theme-row--color-swatch {:style {;; "--background" "#0F2A35"
;; "--background-hover" "#163542"
;; "--background-active" "#274E5E"
"--background" "#0369a1"
"--background-hover" "#38bdf8" ;; TODO what is the hover color?
"--background-active" "#0ea5e9"} ;; TODO what is the hover color?
:border-right "1px solid rgba(255,255,255,0.4)"}]
[:div.text-xs {:style {:margin "0 -0.5rem"
:opacity 0.5
Expand All @@ -330,28 +330,43 @@
[:div.theme-row--color-separator]
(for [color colors/color-list
:let [gray (get colors/gray-pairing-map color)]]
[:div.theme-row--color {:on-click #(state/toggle-color-accent! color)
[:div.theme-row--color {:on-click #(state/set-color-accent! color)
:class (when (= color-accent color) "selected")}
[:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name gray) "-02-alpha)")
"--background-hover" (str "var(--rx-" (name gray) "-03)")
"--background-active" (str "var(--rx-" (name gray) "-06)")
"--border" (str "var(--rx-" (name color) "-07)")
"--border-hover" (str "var(--rx-" (name color) "-10)")
"--border-active" (str "var(--rx-" (name color) "-09) ")}}]])]
[:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name color) "-07)")
"--background-hover" (str "var(--rx-" (name color) "-10)")
"--background-active" (str "var(--rx-" (name color) "-09) ")}}]])]
; "--border-hover" (str "var(--rx-" (name color) "-08)")}}]
display-theme [:button {:style {:background "var(--lx-accent-03)"
:border "1px solid var(--lx-accent-07)"
:color "var(--lx-accent-11)"}}
(if color-accent (name color-accent) "default")]]
[:<>
(row-with-button-action {:left-label "Logseq color theme"
(row-with-button-action {:left-label "Theme color"
:-for "toggle_radix_theme"
:stretch true
:action pick-theme})]))
; (row-with-button-action {:left-label "Preview color theme"
; :-for "display_radix_theme"
; :stretch true
; :action display-theme})]))

(defn theme-gradient-row [t dark? color-accent]
(let [color-gradient (state/sub :color/gradient)
pick-gradient [:div {:class "grid grid-cols-7 gap-2 overflow-x-auto"}
[:div {:class (cond-> "theme-gradient-row--gradient-swatch"
(= 1 color-gradient) (str " selected"))
:style {"--background" (str "var(--rx-" (name color-accent) "-07)")
"--background-hover" (str "var(--rx-" (name color-accent) "-08)")
"--background-active" (str "var(--rx-" (name color-accent) "-09)")}
:on-click #(state/unset-color-gradient!)}]
(for [n (range 2 8)
:let [active? (= n color-gradient)]]
[:div {:class (cond-> "bg-white theme-gradient-row--gradient-swatch"
active? (str " selected"))
:key n
:style {"--background" (colors/linear-gradient color-accent :07 n)
"--background-hover" (colors/linear-gradient color-accent :08 n)
"--background-active" (colors/linear-gradient color-accent :09 n)}
:on-click #(state/set-color-gradient! n)}])]]
(row-with-button-action {:left-label "Theme gradient"
:stretch true
:action pick-gradient})))


(defn file-format-row [t preferred-format]
Expand Down Expand Up @@ -684,12 +699,15 @@
theme (state/sub :ui/theme)
dark? (= "dark" theme)
system-theme? (state/sub :ui/system-theme?)
switch-theme (if dark? "light" "dark")]
switch-theme (if dark? "light" "dark")
color-accent (state/sub :color/accent)]
[:div.panel-wrap.is-general
(version-row t version)
(language-row t preferred-language)
(theme-modes-row t switch-theme system-theme? dark?)
(when (and (util/electron?) (not util/mac?)) (native-titlebar-row t))
; (theme-row t dark?)
; (when color-accent (theme-gradient-row t dark? color-accent))
(when (config/global-config-enabled?) (edit-global-config-edn))
(when current-repo (edit-config-edn))
(when current-repo (edit-custom-css))
Expand Down
19 changes: 18 additions & 1 deletion src/main/frontend/components/settings.css
View file
Expand Up @@ -501,7 +501,7 @@ svg.cmd {
width: 2rem;
height: 2rem;
background: var(--background);
border: 4px solid var(--border);
/* border: 4px solid var(--border); */
/* border: 3px solid orange; */
}

Expand All @@ -515,3 +515,20 @@ svg.cmd {
background: var(--background-active);
border-color: var(--border-active);
}

.cp__settings-main .theme-gradient-row--gradient-swatch {
@apply rounded-full;
width: 2rem;
height: 2rem;

background: var(--background);
}

.cp__settings-main .theme-gradient-row--gradient-swatch:hover {
background: var(--background-hover);
}

.cp__settings-main .selected.theme-gradient-row--gradient-swatch,
.cp__settings-main .selected.theme-gradient-row--gradient-swatch:hover {
background: var(--background-active);
}
26 changes: 17 additions & 9 deletions src/main/frontend/state.cljs
View file
Expand Up @@ -2129,17 +2129,25 @@ Similar to re-frame subscriptions"
[]
(storage/remove :user-groups))

(defn toggle-color-accent! [color]
(if (= color (get @state :color/accent))
(do (swap! state assoc :color/accent nil)
(colors/unset-radix))
(do (swap! state assoc :color/accent color)
(colors/set-radix color))))
(defn get-color-accent []
(get @state :color/accent))

(defn get-color-gradient []
(get @state :color/gradient 1))

(defn set-color-accent! [color]
(swap! state assoc :color/accent color)
(colors/set-radix color (get-color-gradient)))

(defn set-color-gradient! [steps]
(swap! state assoc :color/gradient steps)
(colors/set-radix (get-color-accent) steps))

(defn unset-color-accent! []
(swap! state assoc :color/accent nil)
(colors/unset-radix))


(defn get-color-accent []
(get @state :color/accent))
(defn unset-color-gradient! []
(swap! state assoc :color/gradient nil)
(colors/unset-radix))

0 comments on commit a7b9c01

Please sign in to comment.