Adjust dropdown themeing

day8 · Jun 3, 2024 · 533ddc8 · 533ddc8
1 parent 285d7d0
commit 533ddc8
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}}})}]))))