💄 Add minor cosmetic changes to dashboard sidebar components (#7052)

* 💄 Change component decl style of sidebar-team-switch

* 💄 Change component decl style of sidebar-search

* 💄 Add general cosmetic changes to sidebar components
This commit is contained in:
Andrey Antukh 2025-08-07 10:57:46 +02:00 committed by GitHub
parent 50634e1a4c
commit ea482f16c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -7,6 +7,7 @@
(ns app.main.ui.dashboard.sidebar (ns app.main.ui.dashboard.sidebar
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.config :as cf] [app.config :as cf]
@ -67,8 +68,9 @@
(def ^:private exit-icon (def ^:private exit-icon
(icon-xref :exit (stl/css :exit-icon))) (icon-xref :exit (stl/css :exit-icon)))
(mf/defc sidebar-project (mf/defc sidebar-project*
[{:keys [item selected?] :as props}] {::mf/private true}
[{:keys [item is-selected]}]
(let [dstate (mf/deref refs/dashboard-local) (let [dstate (mf/deref refs/dashboard-local)
selected-files (:selected-files dstate) selected-files (:selected-files dstate)
selected-project (:selected-project dstate) selected-project (:selected-project dstate)
@ -172,7 +174,7 @@
[:li {:tab-index "0" [:li {:tab-index "0"
:class (stl/css-case :project-element true :class (stl/css-case :project-element true
:sidebar-nav-item true :sidebar-nav-item true
:current selected? :current is-selected
:dragging (:dragging? local)) :dragging (:dragging? local))
:on-click on-click :on-click on-click
:on-key-down on-key-down :on-key-down on-key-down
@ -194,8 +196,9 @@
:on-close on-menu-close}]])) :on-close on-menu-close}]]))
(mf/defc sidebar-search* (mf/defc sidebar-search*
[{:keys [search-term team-id] :as props}] {::mf/private true}
(let [search-term (or search-term "") [{:keys [search-term team-id]}]
(let [search-term (d/nilv search-term "")
focused? (mf/use-state false) focused? (mf/use-state false)
emit! (mf/use-memo #(f/debounce st/emit! 500)) emit! (mf/use-memo #(f/debounce st/emit! 500))
@ -271,7 +274,7 @@
search-icon])])) search-icon])]))
(mf/defc teams-selector-dropdown* (mf/defc teams-selector-dropdown*
{::mf/wrap-props false} {::mf/private true}
[{:keys [team profile teams] :rest props}] [{:keys [team profile teams] :rest props}]
(let [on-create-click (let [on-create-click
(mf/use-fn #(st/emit! (modal/show :team-form {}))) (mf/use-fn #(st/emit! (modal/show :team-form {})))
@ -321,6 +324,7 @@
[:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]]])) [:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]]]))
(mf/defc team-options-dropdown* (mf/defc team-options-dropdown*
{::mf/private true}
[{:keys [team profile] :rest props}] [{:keys [team profile] :rest props}]
(let [go-members #(st/emit! (dcm/go-to-dashboard-members)) (let [go-members #(st/emit! (dcm/go-to-dashboard-members))
go-invitations #(st/emit! (dcm/go-to-dashboard-invitations)) go-invitations #(st/emit! (dcm/go-to-dashboard-invitations))
@ -468,7 +472,7 @@
(tr "dashboard.delete-team")])])) (tr "dashboard.delete-team")])]))
(mf/defc sidebar-team-switch* (mf/defc sidebar-team-switch*
[{:keys [team profile] :as props}] [{:keys [team profile]}]
(let [teams (mf/deref refs/teams) (let [teams (mf/deref refs/teams)
subscription subscription
@ -743,12 +747,12 @@
(if (some? pinned-projects) (if (some? pinned-projects)
[:ul {:class (stl/css :sidebar-nav :pinned-projects)} [:ul {:class (stl/css :sidebar-nav :pinned-projects)}
(for [item pinned-projects] (for [item pinned-projects]
[:& sidebar-project [:> sidebar-project*
{:item item {:item item
:key (dm/str (:id item)) :key (dm/str (:id item))
:id (:id item) :id (:id item)
:team-id (:id team) :team-id (:id team)
:selected? (= (:id item) (:id project))}])] :is-selected (= (:id item) (:id project))}])]
[:div {:class (stl/css :sidebar-empty-placeholder)} [:div {:class (stl/css :sidebar-empty-placeholder)}
pin-icon pin-icon
[:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]] [:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]