mirror of
https://github.com/penpot/penpot.git
synced 2026-09-08 04:59:25 +00:00
💄 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:
parent
50634e1a4c
commit
ea482f16c8
@ -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")]])]]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user