3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-12 04:21:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add minor performance improvements on workspace presence components

Browse source
This commit is contained in:
Andrey Antukh 2024-02-20 12:31:32 +01:00
parent 541052fee7
commit 2f242533d2
1 changed files with 33 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

63
frontend/src/app/main/ui/workspace/presence.cljs
View file

@ -15,61 +15,64 @@
[app.util.timers :as tm] [app.util.timers :as tm]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
;; --- SESSION WIDGET
(mf/defc session-widget (mf/defc session-widget
[{:keys [session profile index] :as props}] {::mf/props :obj
(let [profile (assoc profile :color (:color session))] ::mf/memo true}
[{:keys [color profile index]}]
(let [profile (assoc profile :color color)
full-name (:fullname profile)]
[:li {:class (stl/css :session-icon) [:li {:class (stl/css :session-icon)
:style {:z-index (str (or (+ 1 (* -1 index)) 0)) :style {:z-index (dm/str (+ 1 (* -1 index)))
:background-color (:color session)} :background-color color}
:title (:fullname profile)} :title full-name}
[:img {:alt (:fullname profile) [:img {:alt full-name
:style {:background-color (:color session)} :style {:background-color color}
:src (cfg/resolve-profile-photo-url profile)}]])) :src (cfg/resolve-profile-photo-url profile)}]]))
(mf/defc active-sessions (mf/defc active-sessions
{::mf/wrap [mf/memo]} {::mf/memo true}
[] []
(let [users (mf/deref refs/users) (let [users (mf/deref refs/users)
presence (mf/deref refs/workspace-presence) presence (mf/deref refs/workspace-presence)
user-ids (vals presence)
num-users (count user-ids) sessions (vals presence)
first-users (take 2 user-ids) num-sessions (count sessions)
open* (mf/use-state false) open* (mf/use-state false)
open? (deref open*) open? (and ^boolean (deref open*) (> num-sessions 2))
open-users-widget on-open
(mf/use-fn (mf/use-fn
(fn [] (fn []
(reset! open* true) (reset! open* true)
(tm/schedule-on-idle (tm/schedule-on-idle
#(dom/focus! (dom/get-element "users-close"))))) #(dom/focus! (dom/get-element "users-close")))))
close-users-widget (mf/use-fn #(reset! open* false))]
on-close
(mf/use-fn #(reset! open* false))]
[:* [:*
(when (and (> num-users 2) open?) (when ^boolean open?
[:button {:id "users-close" [:button {:id "users-close"
:class (stl/css :active-users-opened) :class (stl/css :active-users-opened)
:on-click close-users-widget :on-click on-close
:on-blur close-users-widget} :on-blur on-close}
[:ul {:class (stl/css :active-users-list)} [:ul {:class (stl/css :active-users-list)}
(for [session user-ids] (for [session sessions]
[:& session-widget [:& session-widget
{:session session {:color (:color session)
:index 0 :index 0
:profile (get users (:profile-id session)) :profile (get users (:profile-id session))
:key (:id session)}])]]) :key (dm/str (:id session))}])]])
[:button {:class (stl/css-case :active-users true) [:button {:class (stl/css-case :active-users true)
:on-click open-users-widget} :on-click on-open}
[:ul {:class (stl/css :active-users-list)} [:ul {:class (stl/css :active-users-list)}
(when (> num-users 2) [:span {:class (stl/css :users-num)} (dm/str "+" (- num-users 2))]) (when (> num-sessions 2)
(for [[index session] (d/enumerate first-users)] [:span {:class (stl/css :users-num)} (dm/str "+" (- num-sessions 2))])
(for [[index session] (d/enumerate (take 2 sessions))]
[:& session-widget [:& session-widget
{:session session {:color (:color session)
:index index :index index
:profile (get users (:profile-id session)) :profile (get users (:profile-id session))
:key (:id session)}])]]])) :key (dm/str (:id session))}])]]]))