From 533ddc8874798e7d8a974e275e6759d8f4818d25 Mon Sep 17 00:00:00 2001 From: Kimo Knowles Date: Mon, 3 Jun 2024 03:14:36 +0200 Subject: [PATCH] Adjust dropdown themeing --- src/re_com/dropdown.cljs | 2 ++ src/re_com/theme/blue_modern.cljs | 9 ++++++--- src/re_com/theme/default.cljs | 11 ++++++++--- src/re_com/tree_select.cljs | 11 +++++++---- 4 files changed, 23 insertions(+), 10 deletions(-) diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 489100d0..c48e3212 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -147,6 +147,8 @@ [box (themed ::anchor-wrapper {:src (at) + :style {:padding "unset" + :width "100%"} :attr {:ref anchor-ref! :on-click #(swap! model not)} :child [u/part anchor part-props anchor-part]})] diff --git a/src/re_com/theme/blue_modern.cljs b/src/re_com/theme/blue_modern.cljs index 3e5341a0..4c8c6684 100644 --- a/src/re_com/theme/blue_modern.cljs +++ b/src/re_com/theme/blue_modern.cljs @@ -1,7 +1,8 @@ (ns re-com.theme.blue-modern (:require [re-com.theme :as theme] - [re-com.dropdown :as dropdown])) + [re-com.dropdown :as dropdown] + [re-com.tree-select :as tree-select])) (defn theme [attr {:keys [state part] $ :variables}] (->> {} @@ -10,10 +11,12 @@ #_#_::dropdown/backdrop {:style {:background-color (:primary $)}} + ::tree-select/dropdown-body + {:style {:background-color "red"}} + ::dropdown/anchor-wrapper {:style {:box-shadow "0 0.5px 0.5px rgba(0, 0, 0, .2) inset" :background-color "white" :height "25px" - :line-height "25px" - :padding "2px"}}) + :line-height "25px"}}) (theme/merge-props attr))) diff --git a/src/re_com/theme/default.cljs b/src/re_com/theme/default.cljs index 172ee572..90e536ae 100644 --- a/src/re_com/theme/default.cljs +++ b/src/re_com/theme/default.cljs @@ -38,7 +38,7 @@ :light "#f8f9fa" :dark "#212529" :neutral "#555555" - :foreground "#777777" + :foreground "#767a7c" :light-neutral "#eee" :background "white" :background-disabled "#EEE" @@ -78,6 +78,7 @@ :display "block" :overflow "hidden" :user-select "none" + :width "100%" :z-index (case (:openable state) :open 99999 nil)}} @@ -129,7 +130,9 @@ (defn main [props {:keys [state part] {:as $ :keys [sm-1 sm-2 sm-3 sm-4 sm-6 md-1 md-2 - dark shadow light light-neutral border border-dark]} :variables}] + dark shadow light light-neutral + border border-dark + foreground]} :variables}] (->> {} (case part @@ -249,10 +252,12 @@ :text-overflow "ellipsis"}} ::tree-select/dropdown-anchor - {:style {:padding "0px 6px" + {:style {:padding "0 8px 0 0" :overflow "hidden" + :color foreground :cursor (if (-> state :enable (= :disabled)) "default" "pointer")}} + ::tree-select/dropdown-counter {:style {:margin-left "10px" :margin-right "10px" diff --git a/src/re_com/tree_select.cljs b/src/re_com/tree_select.cljs index 00a175ef..cdfa1321 100644 --- a/src/re_com/tree_select.cljs +++ b/src/re_com/tree_select.cljs @@ -439,7 +439,7 @@ (let [model (deref-or-value model)] [h-box (themed ::dropdown-anchor - {:width width + {:width "100%" :style {:height height} :children [(if-not (empty? model) @@ -450,7 +450,10 @@ {:child (str (count model))})]) (when-not (-> state :enable (= :disabled)) [box (themed ::dropdown-anchor-expander - {:child (if @showing? "▲" "▼")})])]})]))] + {:style {:font-size "10px" + :transform "scaleX(1.2)" + :color "#888"} + :child (if @showing? "▲" "▼")})])]})]))] [dd/dropdown {:anchor anchor :label [:span {:title (alt-text-fn {:items labelable-items :label-fn label-fn @@ -461,7 +464,7 @@ :text-overflow "ellipsis"}} anchor-label] :placeholder placeholder - + :width width :body [tree-select (themed ::dropdown-body {:choices choices @@ -480,6 +483,6 @@ :model showing? :theme theme :parts (merge parts - {:body-wrapper {:style {:width (or width "212px") + {:body-wrapper {:style {:width (or width "221px") :height "212px" :min-width min-width}}})}]))))