diff --git a/CHANGES.md b/CHANGES.md index ee17077ba6..de2bd359a2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -9,7 +9,7 @@ ### :heart: Community contributions (Thank you!) ### :sparkles: New features & Enhancements - +- Add visual indicator for new comments in the workspace [Taiga #11328](https://tree.taiga.io/project/penpot/issue/11328) - On components overrides, separate the content of the text from the rest of properties [Taiga #7434](https://tree.taiga.io/project/penpot/us/7434) - Improve dashboard's sidebar [Taiga #10700](https://tree.taiga.io/project/penpot/us/10700) diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index e004d9e384..994876adbb 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -113,6 +113,8 @@ [{:keys [file layout page-id]}] (let [file-id (:id file) + threads-map (mf/deref refs/comment-threads) + zoom (mf/deref refs/selected-zoom) read-only? (mf/use-ctx ctx/workspace-read-only?) selected-drawtool (mf/deref refs/selected-drawing-tool) @@ -131,6 +133,13 @@ team (mf/deref refs/team) permissions (get team :permissions) + has-unread-comments? + (mf/with-memo [threads-map file-id] + (->> (vals threads-map) + (some #(and (= (:file-id %) file-id) + (pos? (:count-unread-comments %)))) + (boolean))) + display-share-button? (and (not (:is-default team)) (or (:is-admin permissions) @@ -209,8 +218,11 @@ :class (stl/css-case :comments-btn true :selected (= selected-drawtool :comments)) :on-click toggle-comments - :data-tool "comments"} - i/comments]] + :data-tool "comments" + :style {:position "relative"}} + i/comments + (when ^boolean has-unread-comments? + [:div {:class (stl/css :unread)}])]] (when-not ^boolean read-only? [:div {:class (stl/css :history-section)} diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index 03054d3649..6f1969d9b3 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -232,3 +232,14 @@ border: none; } } + +.unread { + position: absolute; + width: 8px; + height: 8px; + border: 2px solid var(--color-background-tertiary); + border-radius: 50%; + background: red; + top: 6px; + right: 6px; +}