3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 03:26:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Cleaned styles for new UI

Browse source
This commit is contained in:
alonso.torres 2023-11-21 14:56:51 +01:00
parent e3b096110f
commit c1882af124
48 changed files with 3271 additions and 11377 deletions
Download patch file Download diff file Expand all files Collapse all files

112
frontend/src/app/main/ui/dashboard/comments.cljs
View file

@ -22,12 +22,40 @@
[potok.core :as ptk]
[rumext.v2 :as mf]))
(mf/defc comments-icon
[{:keys [profile show? on-show-comments]}]
(let [threads-map (mf/deref refs/comment-threads)
tgroups
(->> (vals threads-map)
(sort-by :modified-at)
(reverse)
(dcm/apply-filters {} profile)
(dcm/group-threads-by-file-and-page))
handle-keydown
(mf/use-callback
(mf/deps on-show-comments)
(fn [event]
(when (kbd/enter? event)
(on-show-comments event))))]
[:div {:class (stl/css :dashboard-comments-section)}
[:button
{:tab-index "0"
:on-click on-show-comments
:on-key-down handle-keydown
:data-test "open-comments"
:class (stl/css-case :button true
:open show?
:unread (boolean (seq tgroups)))}
i/chat]]))
(mf/defc comments-section
[{:keys [profile team]}]
[{:keys [profile team show? on-show-comments on-hide-comments]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
show-dropdown? (mf/use-state false)
show-dropdown (mf/use-fn #(reset! show-dropdown? true))
hide-dropdown (mf/use-fn #(reset! show-dropdown? false))
threads-map (mf/deref refs/comment-threads)
users (mf/deref refs/current-team-comments-users)
team-id (:id team)
@ -38,6 +66,13 @@
(dcm/apply-filters {} profile)
(dcm/group-threads-by-file-and-page))
handle-keydown
(mf/use-callback
(mf/deps on-hide-comments)
(fn [event]
(when (kbd/enter? event)
(on-hide-comments event))))
on-navigate
(mf/use-callback
(fn [thread]
@ -48,42 +83,25 @@
(mf/deps team-id)
(fn []
(st/emit! (dcm/retrieve-unread-comment-threads team-id))))
(mf/use-effect
(mf/deps @show-dropdown?)
(mf/deps show?)
(fn []
(when @show-dropdown?
(when show?
(st/emit! (ptk/event ::ev/event {::ev/name "open-comment-notifications"
::ev/origin "dashboard"})))))
(if new-css-system
[:div {:class (stl/css :dashboard-comments-section)}
[:div
{:tab-index "0"
:on-click show-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(show-dropdown event)))
:data-test "open-comments"
:class (stl/css-case :button true
:open @show-dropdown?
:unread (boolean (seq tgroups)))}
i/chat]
[:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
[:& dropdown {:show show? :on-close on-hide-comments}
[:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
[:div {:class (stl/css :header)}
[:h3 (tr "labels.comments")]
[:span {:class (stl/css :close)
:tab-index (if @show-dropdown?
"0"
"-1")
:on-click hide-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(hide-dropdown event)))} i/close]]
[:hr]
[:button
{:class (stl/css :close)
:tab-index (if show? "0" "-1")
:on-click on-hide-comments
:on-key-down handle-keydown} i/close]]
(if (seq tgroups)
[:div {:class (stl/css :thread-groups)}
@ -93,15 +111,12 @@
:show-file-name true
:users users}]
(for [tgroup (rest tgroups)]
[:*
[:hr]
[:& cmt/comment-thread-group
{:group tgroup
:on-thread-click on-navigate
:show-file-name true
:users users
:key (:page-id tgroup)}]])]
[:& cmt/comment-thread-group
{:group tgroup
:on-thread-click on-navigate
:show-file-name true
:users users
:key (:page-id tgroup)}])]
[:div {:class (stl/css :thread-groups-placeholder)}
i/chat
@ -111,26 +126,23 @@
[:div.dashboard-comments-section
[:div.button
{:tab-index "0"
:on-click show-dropdown
:on-click on-show-comments
:on-key-down (fn [event]
(when (kbd/enter? event)
(show-dropdown event)))
(on-show-comments event)))
:data-test "open-comments"
:class (dom/classnames :open @show-dropdown?
:class (dom/classnames :open show?
:unread (boolean (seq tgroups)))}
i/chat]
[:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
[:& dropdown {:show show? :on-close on-hide-comments}
[:div.dropdown.comments-section.comment-threads-section.
[:div.header
[:h3 (tr "labels.comments")]
[:span.close {:tab-index (if @show-dropdown?
"0"
"-1")
:on-click hide-dropdown
:on-key-down (fn [event]
(when (kbd/enter? event)
(hide-dropdown event)))} i/close]]
[:span.close {:tab-index (if show? "0" "-1")
:on-click on-hide-comments
:on-key-down handle-keydown}
i/close]]
[:hr]