diff --git a/frontend/src/app/main/ui/components/button_link.cljs b/frontend/src/app/main/ui/components/button_link.cljs index a600e7524e..57a09eccf3 100644 --- a/frontend/src/app/main/ui/components/button_link.cljs +++ b/frontend/src/app/main/ui/components/button_link.cljs @@ -9,13 +9,18 @@ [app.util.keyboard :as kbd] [rumext.v2 :as mf])) -(mf/defc button-link [{:keys [action icon name klass]}] - [:a.btn-primary.btn-large.button-link - {:class klass - :tab-index "0" - :on-click action - :on-key-down (fn [event] - (when (kbd/enter? event) - (action event)))} - [:span.logo icon] - name]) +(mf/defc button-link + {::mf/wrap-props false} + [{:keys [action icon name klass]}] + (let [on-key-down (mf/use-fn + (mf/deps action) + (fn [event] + (when (kbd/enter? event) + (action event))))] + [:a.btn-primary.btn-large.button-link + {:class klass + :tab-index "0" + :on-click action + :on-key-down on-key-down} + [:span.logo icon] + name])) diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs index 9d973db79c..c015e18bf4 100644 --- a/frontend/src/app/main/ui/components/color_bullet.cljs +++ b/frontend/src/app/main/ui/components/color_bullet.cljs @@ -11,7 +11,8 @@ [rumext.v2 :as mf])) (mf/defc color-bullet - {::mf/wrap [mf/memo]} + {::mf/wrap [mf/memo] + ::mf/wrap-props false} [{:keys [color on-click]}] (let [on-click (mf/use-fn (mf/deps color on-click) @@ -36,7 +37,9 @@ [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}] [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])])))) -(mf/defc color-name [{:keys [color size on-click on-double-click]}] +(mf/defc color-name + {::mf/wrap-props false} + [{:keys [color size on-click on-double-click]}] (let [color (if (string? color) {:color color :opacity 1} color) {:keys [name color gradient]} color color-str (or name color (uc/gradient-type->string (:type gradient)))] diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs index 2a64e1f409..f396af1896 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.cljs +++ b/frontend/src/app/main/ui/components/color_bullet_new.cljs @@ -5,50 +5,57 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.components.color-bullet-new - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.util.color :as uc] - [app.util.dom :as dom] [rumext.v2 :as mf])) - (mf/defc color-bullet - {::mf/wrap [mf/memo]} + {::mf/wrap [mf/memo] + ::mf/wrap-props false} [{:keys [color on-click mini?]}] (let [on-click (mf/use-fn (mf/deps color on-click) (fn [event] (when (fn? on-click) (^function on-click color event))))] + (if (uc/multiple? color) - [:div {:on-click on-click - :class (dom/classnames (css :color-bullet) true - (css :multiple) true)}] + [:div {:on-click on-click :class (stl/css :color-bullet :multiple)}] ;; No multiple selection - (let [color (if (string? color) {:color color :opacity 1} color)] + (let [color (if (string? color) {:color color :opacity 1} color) + id (:id color) + gradient (:gradient color) + opacity (:opacity color)] [:div - {:class (dom/classnames (css :color-bullet) true - (css :mini) mini? - (css :is-library-color) (some? (:id color)) - (css :is-not-library-color) (nil? (:id color)) - (css :is-gradient) (some? (:gradient color)) - (css :is-transparent) (and (:opacity color) (> 1 (:opacity color)))) + {:class (stl/css-case + :color-bullet true + :mini mini? + :is-library-color (some? id) + :is-not-library-color (nil? id) + :is-gradient (some? gradient) + :is-transparent (and opacity (> 1 opacity))) :on-click on-click} - (if (:gradient color) - [:div {:class (dom/classnames (css :color-bullet-wrapper) true) + + (if (some? gradient) + [:div {:class (stl/css :color-bullet-wrapper) :style {:background (uc/color->background color)}}] - [:div {:class (dom/classnames (css :color-bullet-wrapper) true)} - [:div {:class (dom/classnames (css :color-bullet-left) true) + + [:div {:class (stl/css :color-bullet-wrapper)} + [:div {:class (stl/css :color-bullet-left) :style {:background (uc/color->background (assoc color :opacity 1))}}] - [:div {:class (dom/classnames (css :color-bullet-right) true) + [:div {:class (stl/css :color-bullet-right) :style {:background (uc/color->background color)}}]])])))) -(mf/defc color-name [{:keys [color size on-click on-double-click]}] - (let [color (if (string? color) {:color color :opacity 1} color) - {:keys [name color gradient]} color - color-str (or name color (uc/gradient-type->string (:type gradient))) - text-small (and (>= size 64) (< size 72))] + + +(mf/defc color-name + {::mf/wrap-props false} + [{:keys [color size on-click on-double-click]}] + (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)] (when (or (not size) (> size 64)) - [:span {:class (dom/classnames (css :color-text) true - (css :small-text) text-small) - :on-click #(when on-click (on-click %)) - :on-double-click #(when on-double-click (on-double-click %))} color-str]))) + [:span {:class (stl/css-case + :color-text true + :small-text (and (>= size 64) (< size 72))) + :on-click on-click + :on-double-click on-double-click} + (or name color (uc/gradient-type->string (:type gradient)))]))) diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index 303b80e5a5..f418bc7a7f 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -5,38 +5,27 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.components.title-bar - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require + [app.common.data.macros :as dm] [app.main.ui.icons :as i] - [app.util.dom :as dom] [rumext.v2 :as mf])) (mf/defc title-bar - {::mf/wrap-props false} - [props] - (let [collapsable? (unchecked-get props "collapsable?") - collapsed? (unchecked-get props "collapsed?") - on-collapsed (unchecked-get props "on-collapsed") - title (unchecked-get props "title") - children (unchecked-get props "children") - on-btn-click (unchecked-get props "on-btn-click") - btn-children (unchecked-get props "btn-children") - klass (unchecked-get props "klass")] - - [:div {:class (dom/classnames (css :title-bar) true - klass true)} + {::mf/wrap-props false} + [{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children klass]}] + (let [klass (dm/str (stl/css :title-bar) " " klass)] + [:div {:class klass} (if collapsable? - [:button {:class (dom/classnames (css :toggle-btn) true) - :on-click on-collapsed} - [:span {:class (dom/classnames (css :collased-icon) true - (css :rotated) collapsed?)} + [:button {:class (stl/css :toggle-btn) :on-click on-collapsed} + [:span {:class (stl/css-case + :collased-icon true + :rotated collapsed?)} i/arrow-refactor] - [:div {:class (dom/classnames (css :title) true)} - title]] - [:div {:class (dom/classnames (css :title-only) true)} - title]) + [:div {:class (stl/css :title)} title]] + [:div {:class (stl/css :title-only)} title]) children (when (some? on-btn-click) - [:button {:class (dom/classnames (css :title-button) true) + [:button {:class (stl/css :title-button) :on-click on-btn-click} - btn-children])])) \ No newline at end of file + btn-children])]))