mirror of
https://github.com/penpot/penpot.git
synced 2025-06-04 09:21:38 +02:00
🎉 Initial work on comments subsystem.
Only workspace part; missing viewer and dashboard.
This commit is contained in:
Andrey Antukh
Hirunatan
parent
36abc4646a
commit
ca83e13802
27 changed files with 1815 additions and 172 deletions
535
frontend/src/app/main/ui/workspace/comments.cljs
Normal file
535
frontend/src/app/main/ui/workspace/comments.cljs
Normal file
|
|
@ -0,0 +1,535 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.workspace.comments
|
||||
(:refer-clojure :exclude [comment])
|
||||
(:require
|
||||
[app.config :as cfg]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.comments :as dwcm]
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.streams :as ms]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.keyboard :as kbd]
|
||||
[app.main.ui.workspace.colorpicker]
|
||||
[app.main.ui.workspace.context-menu :refer [context-menu]]
|
||||
[app.util.time :as dt]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.object :as obj]
|
||||
[beicon.core :as rx]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(declare group-threads-by-page)
|
||||
(declare apply-filters)
|
||||
|
||||
(mf/defc resizing-textarea
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [value (obj/get props "value" "")
|
||||
on-focus (obj/get props "on-focus")
|
||||
on-blur (obj/get props "on-blur")
|
||||
placeholder (obj/get props "placeholder")
|
||||
on-change (obj/get props "on-change")
|
||||
|
||||
on-esc (obj/get props "on-esc")
|
||||
|
||||
ref (mf/use-ref)
|
||||
;; state (mf/use-state value)
|
||||
|
||||
on-key-down
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(when (and (kbd/esc? event)
|
||||
(fn? on-esc))
|
||||
(on-esc event))))
|
||||
|
||||
on-change*
|
||||
(mf/use-callback
|
||||
(mf/deps on-change)
|
||||
(fn [event]
|
||||
(let [content (dom/get-target-val event)]
|
||||
(on-change content))))]
|
||||
|
||||
|
||||
(mf/use-layout-effect
|
||||
nil
|
||||
(fn []
|
||||
(let [node (mf/ref-val ref)]
|
||||
(set! (.-height (.-style node)) "0")
|
||||
(set! (.-height (.-style node)) (str (+ 2 (.-scrollHeight node)) "px")))))
|
||||
|
||||
[:textarea
|
||||
{:ref ref
|
||||
:on-key-down on-key-down
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:value value
|
||||
:placeholder placeholder
|
||||
:on-change on-change*}]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Workspace
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(mf/defc reply-form
|
||||
[{:keys [thread] :as props}]
|
||||
(let [show-buttons? (mf/use-state false)
|
||||
content (mf/use-state "")
|
||||
|
||||
on-focus
|
||||
(mf/use-callback
|
||||
#(reset! show-buttons? true))
|
||||
|
||||
on-blur
|
||||
(mf/use-callback
|
||||
#(reset! show-buttons? false))
|
||||
|
||||
on-change
|
||||
(mf/use-callback
|
||||
#(reset! content %))
|
||||
|
||||
on-cancel
|
||||
(mf/use-callback
|
||||
#(do (reset! content "")
|
||||
(reset! show-buttons? false)))
|
||||
|
||||
on-submit
|
||||
(mf/use-callback
|
||||
(mf/deps thread @content)
|
||||
(fn []
|
||||
(st/emit! (dwcm/add-comment thread @content))
|
||||
(on-cancel)))]
|
||||
|
||||
[:div.reply-form
|
||||
[:& resizing-textarea {:value @content
|
||||
:placeholder "Reply"
|
||||
:on-blur on-blur
|
||||
:on-focus on-focus
|
||||
:on-change on-change}]
|
||||
(when (or @show-buttons?
|
||||
(not (empty? @content)))
|
||||
[:div.buttons
|
||||
[:input.btn-primary {:type "button" :value "Post" :on-click on-submit}]
|
||||
[:input.btn-warning {:type "button" :value "Cancel" :on-click on-cancel}]])]))
|
||||
|
||||
(mf/defc draft-thread
|
||||
[{:keys [draft zoom] :as props}]
|
||||
(let [position (:position draft)
|
||||
content (:content draft)
|
||||
pos-x (* (:x position) zoom)
|
||||
pos-y (* (:y position) zoom)
|
||||
|
||||
on-esc
|
||||
(mf/use-callback
|
||||
(mf/deps draft)
|
||||
(st/emitf :interrupt))
|
||||
|
||||
on-change
|
||||
(mf/use-callback
|
||||
(mf/deps draft)
|
||||
(fn [content]
|
||||
(st/emit! (dwcm/update-draft-thread (assoc draft :content content)))))
|
||||
|
||||
on-submit
|
||||
(mf/use-callback
|
||||
(mf/deps draft)
|
||||
(st/emitf (dwcm/create-thread draft)))]
|
||||
|
||||
[:*
|
||||
[:div.thread-bubble
|
||||
{:style {:top (str pos-y "px")
|
||||
:left (str pos-x "px")}}
|
||||
[:span "?"]]
|
||||
[:div.thread-content
|
||||
{:style {:top (str (- pos-y 14) "px")
|
||||
:left (str (+ pos-x 14) "px")}}
|
||||
[:div.reply-form
|
||||
[:& resizing-textarea {:placeholder "Write new comment"
|
||||
:value content
|
||||
:on-esc on-esc
|
||||
:on-change on-change}]
|
||||
[:div.buttons
|
||||
[:input.btn-primary
|
||||
{:on-click on-submit
|
||||
:type "button"
|
||||
:value "Post"}]
|
||||
[:input.btn-secondary
|
||||
{:on-click on-esc
|
||||
:type "button"
|
||||
:value "Cancel"}]]]]]))
|
||||
|
||||
|
||||
(mf/defc edit-form
|
||||
[{:keys [content on-submit on-cancel] :as props}]
|
||||
(let [content (mf/use-state content)
|
||||
|
||||
on-change
|
||||
(mf/use-callback
|
||||
#(reset! content %))
|
||||
|
||||
on-submit*
|
||||
(mf/use-callback
|
||||
(mf/deps @content)
|
||||
(fn [] (on-submit @content)))]
|
||||
|
||||
[:div.reply-form.edit-form
|
||||
[:& resizing-textarea {:value @content
|
||||
:on-change on-change}]
|
||||
[:div.buttons
|
||||
[:input.btn-primary {:type "button" :value "Post" :on-click on-submit*}]
|
||||
[:input.btn-warning {:type "button" :value "Cancel" :on-click on-cancel}]]]))
|
||||
|
||||
|
||||
(mf/defc comment-item
|
||||
[{:keys [comment thread] :as props}]
|
||||
(let [profile (get @refs/workspace-users (:owner-id comment))
|
||||
options? (mf/use-state false)
|
||||
edition? (mf/use-state false)
|
||||
|
||||
on-edit-clicked
|
||||
(mf/use-callback
|
||||
(fn []
|
||||
(reset! options? false)
|
||||
(reset! edition? true)))
|
||||
|
||||
on-delete-comment
|
||||
(mf/use-callback
|
||||
(mf/deps comment)
|
||||
(st/emitf (dwcm/delete-comment comment)))
|
||||
|
||||
delete-thread
|
||||
(mf/use-callback
|
||||
(mf/deps thread)
|
||||
(st/emitf (dwcm/close-thread)
|
||||
(dwcm/delete-comment-thread thread)))
|
||||
|
||||
|
||||
on-delete-thread
|
||||
(mf/use-callback
|
||||
(mf/deps thread)
|
||||
(st/emitf (modal/show
|
||||
{:type :confirm
|
||||
:title (tr "modals.delete-comment-thread.title")
|
||||
:message (tr "modals.delete-comment-thread.message")
|
||||
:accept-label (tr "modals.delete-comment-thread.accept")
|
||||
:on-accept delete-thread})))
|
||||
|
||||
on-submit
|
||||
(mf/use-callback
|
||||
(mf/deps comment thread)
|
||||
(fn [content]
|
||||
(reset! edition? false)
|
||||
(st/emit! (dwcm/update-comment (assoc comment :content content)))))
|
||||
|
||||
on-cancel
|
||||
(mf/use-callback #(reset! edition? false))
|
||||
|
||||
toggle-resolved
|
||||
(mf/use-callback
|
||||
(mf/deps thread)
|
||||
(st/emitf (dwcm/update-comment-thread (update thread :is-resolved not))))]
|
||||
|
||||
[:div.comment-container
|
||||
[:div.comment
|
||||
[:div.author
|
||||
[:div.avatar
|
||||
[:img {:src (cfg/resolve-media-path (:photo profile))}]]
|
||||
[:div.name
|
||||
[:div.fullname (:fullname profile)]
|
||||
[:div.timeago (dt/timeago (:modified-at comment))]]
|
||||
|
||||
(when (some? thread)
|
||||
[:div.options-resolve {:on-click toggle-resolved}
|
||||
(if (:is-resolved thread)
|
||||
[:span i/checkbox-checked]
|
||||
[:span i/checkbox-unchecked])])
|
||||
|
||||
[:div.options
|
||||
[:div.options-icon {:on-click #(swap! options? not)} i/actions]]]
|
||||
|
||||
[:div.content
|
||||
(if @edition?
|
||||
[:& edit-form {:content (:content comment)
|
||||
:on-submit on-submit
|
||||
:on-cancel on-cancel}]
|
||||
[:span.text (:content comment)])]]
|
||||
|
||||
[:& dropdown {:show @options?
|
||||
:on-close identity}
|
||||
[:ul.dropdown.comment-options-dropdown
|
||||
[:li {:on-click on-edit-clicked} "Edit"]
|
||||
(if thread
|
||||
[:li {:on-click on-delete-thread} "Delete thread"]
|
||||
[:li {:on-click on-delete-comment} "Delete comment"])]]]))
|
||||
|
||||
(defn comments-ref
|
||||
[thread-id]
|
||||
(l/derived (l/in [:comments thread-id]) st/state))
|
||||
|
||||
(mf/defc thread-comments
|
||||
[{:keys [thread zoom]}]
|
||||
(let [ref (mf/use-ref)
|
||||
pos (:position thread)
|
||||
pos-x (+ (* (:x pos) zoom) 14)
|
||||
pos-y (- (* (:y pos) zoom) 14)
|
||||
|
||||
|
||||
comments-ref (mf/use-memo (mf/deps (:id thread)) #(comments-ref (:id thread)))
|
||||
comments-map (mf/deref comments-ref)
|
||||
comments (->> (vals comments-map)
|
||||
(sort-by :created-at))
|
||||
comment (first comments)]
|
||||
|
||||
(mf/use-effect
|
||||
(st/emitf (dwcm/update-comment-thread-status thread)))
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps thread)
|
||||
(st/emitf (dwcm/retrieve-comments (:id thread))))
|
||||
|
||||
(mf/use-layout-effect
|
||||
(mf/deps thread comments-map)
|
||||
(fn []
|
||||
(when-let [node (mf/ref-val ref)]
|
||||
(.scrollIntoView ^js node))))
|
||||
|
||||
[:div.thread-content
|
||||
{:style {:top (str pos-y "px")
|
||||
:left (str pos-x "px")}}
|
||||
|
||||
[:div.comments
|
||||
[:& comment-item {:comment comment
|
||||
:thread thread}]
|
||||
(for [item (rest comments)]
|
||||
[:*
|
||||
[:hr]
|
||||
[:& comment-item {:comment item}]])
|
||||
[:div {:ref ref}]]
|
||||
[:& reply-form {:thread thread}]]))
|
||||
|
||||
(mf/defc thread-bubble
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [thread zoom open?] :as params}]
|
||||
(let [pos (:position thread)
|
||||
pos-x (* (:x pos) zoom)
|
||||
pos-y (* (:y pos) zoom)
|
||||
|
||||
on-open-toggle
|
||||
(mf/use-callback
|
||||
(mf/deps thread open?)
|
||||
(fn []
|
||||
(if open?
|
||||
(st/emit! (dwcm/close-thread))
|
||||
(st/emit! (dwcm/open-thread thread)))))]
|
||||
|
||||
[:div.thread-bubble
|
||||
{:style {:top (str pos-y "px")
|
||||
:left (str pos-x "px")}
|
||||
:class (dom/classnames
|
||||
:resolved (:is-resolved thread)
|
||||
:unread (pos? (:count-unread-comments thread)))
|
||||
:on-click on-open-toggle}
|
||||
[:span (:seqn thread)]]))
|
||||
|
||||
(def threads-ref
|
||||
(l/derived :comment-threads st/state))
|
||||
|
||||
(def workspace-comments-ref
|
||||
(l/derived :workspace-comments st/state))
|
||||
|
||||
(mf/defc comments-layer
|
||||
[{:keys [vbox vport zoom file-id page-id] :as props}]
|
||||
(let [pos-x (* (- (:x vbox)) zoom)
|
||||
pos-y (* (- (:y vbox)) zoom)
|
||||
profile (mf/deref refs/profile)
|
||||
local (mf/deref workspace-comments-ref)
|
||||
threads-map (mf/deref threads-ref)
|
||||
threads (->> (vals threads-map)
|
||||
(filter #(= (:page-id %) page-id))
|
||||
(apply-filters local profile))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps file-id)
|
||||
(fn []
|
||||
(st/emit! (dwcm/initialize-comments file-id))
|
||||
(fn []
|
||||
(st/emit! ::dwcm/finalize))))
|
||||
|
||||
[:div.workspace-comments
|
||||
{:style {:width (str (:width vport) "px")
|
||||
:height (str (:height vport) "px")}}
|
||||
[:div.threads {:style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}}
|
||||
(for [item threads]
|
||||
[:& thread-bubble {:thread item
|
||||
:zoom zoom
|
||||
:open? (= (:id item) (:open local))
|
||||
:key (:seqn item)}])
|
||||
|
||||
(when-let [id (:open local)]
|
||||
(when-let [thread (get threads-map id)]
|
||||
[:& thread-comments {:thread thread
|
||||
:zoom zoom}]))
|
||||
|
||||
(when-let [draft (:draft local)]
|
||||
[:& draft-thread {:draft draft :zoom zoom}])]]))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Sidebar
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(mf/defc sidebar-group-item
|
||||
[{:keys [item] :as props}]
|
||||
(let [profile (get @refs/workspace-users (:owner-id item))
|
||||
on-click
|
||||
(mf/use-callback
|
||||
(mf/deps item)
|
||||
(st/emitf (dwcm/center-to-comment-thread item)
|
||||
(dwcm/open-thread item)))]
|
||||
|
||||
[:div.comment {:on-click on-click}
|
||||
[:div.author
|
||||
[:div.thread-bubble
|
||||
{:class (dom/classnames
|
||||
:resolved (:is-resolved item)
|
||||
:unread (pos? (:count-unread-comments item)))}
|
||||
(:seqn item)]
|
||||
[:div.avatar
|
||||
[:img {:src (cfg/resolve-media-path (:photo profile))}]]
|
||||
[:div.name
|
||||
[:div.fullname (:fullname profile) ", "]
|
||||
[:div.timeago (dt/timeago (:modified-at item))]]]
|
||||
[:div.content
|
||||
[:span.text (:content item)]]
|
||||
[:div.content.replies
|
||||
(let [unread (:count-unread-comments item ::none)
|
||||
total (:count-comments item 1)]
|
||||
[:*
|
||||
(when (> total 1)
|
||||
(if (= total 2)
|
||||
[:span.total-replies "1 reply"]
|
||||
[:span.total-replies (str (dec total) " replies")]))
|
||||
|
||||
(when (and (> total 1) (> unread 0))
|
||||
(if (= unread 1)
|
||||
[:span.new-replies "1 new reply"]
|
||||
[:span.new-replies (str unread " new replies")]))])]]))
|
||||
|
||||
(defn page-name-ref
|
||||
[id]
|
||||
(l/derived (l/in [:workspace-data :pages-index id :name]) st/state))
|
||||
|
||||
(mf/defc sidebar-item
|
||||
[{:keys [group]}]
|
||||
(let [page-name-ref (mf/use-memo (mf/deps (:page-id group)) #(page-name-ref (:page-id group)))
|
||||
page-name (mf/deref page-name-ref)]
|
||||
[:div.page-section
|
||||
[:div.section-title
|
||||
[:span.icon i/file-html]
|
||||
[:span.label page-name]]
|
||||
[:div.comments-container
|
||||
(for [item (:items group)]
|
||||
[:& sidebar-group-item {:item item :key (:id item)}])]]))
|
||||
|
||||
(mf/defc sidebar-options
|
||||
[{:keys [local] :as props}]
|
||||
(let [filter-yours
|
||||
(mf/use-callback
|
||||
(mf/deps local)
|
||||
(st/emitf (dwcm/update-filters {:main :yours})))
|
||||
|
||||
filter-all
|
||||
(mf/use-callback
|
||||
(mf/deps local)
|
||||
(st/emitf (dwcm/update-filters {:main :all})))
|
||||
|
||||
toggle-resolved
|
||||
(mf/use-callback
|
||||
(mf/deps local)
|
||||
(st/emitf (dwcm/update-filters {:resolved (not (:filter-resolved local))})))]
|
||||
|
||||
[:ul.dropdown.sidebar-options-dropdown
|
||||
[:li {:on-click filter-all} "All"]
|
||||
[:li {:on-click filter-yours} "Only yours"]
|
||||
[:hr]
|
||||
(if (:filter-resolved local)
|
||||
[:li {:on-click toggle-resolved} "Show resolved comments"]
|
||||
[:li {:on-click toggle-resolved} "Hide resolved comments"])]))
|
||||
|
||||
(mf/defc comments-sidebar
|
||||
[]
|
||||
(let [threads-map (mf/deref threads-ref)
|
||||
profile (mf/deref refs/profile)
|
||||
local (mf/deref workspace-comments-ref)
|
||||
options? (mf/use-state false)
|
||||
|
||||
tgroups (->> (vals threads-map)
|
||||
(sort-by :modified-at)
|
||||
(reverse)
|
||||
(apply-filters local profile)
|
||||
(group-threads-by-page))]
|
||||
|
||||
[:div.workspace-comments.workspace-comments-sidebar
|
||||
[:div.sidebar-title
|
||||
[:div.label "Comments"]
|
||||
[:div.options {:on-click #(reset! options? true)}
|
||||
[:div.label (case (:filter local)
|
||||
(nil :all) "All"
|
||||
:yours "Only yours")]
|
||||
[:div.icon i/arrow-down]]]
|
||||
|
||||
[:& dropdown {:show @options?
|
||||
:on-close #(reset! options? false)}
|
||||
[:& sidebar-options {:local local}]]
|
||||
|
||||
(when (seq tgroups)
|
||||
[:div.threads
|
||||
[:& sidebar-item {:group (first tgroups)}]
|
||||
(for [tgroup (rest tgroups)]
|
||||
[:*
|
||||
[:hr]
|
||||
[:& sidebar-item {:group tgroup
|
||||
:key (:page-id tgroup)}]])])]))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Helpers
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn- group-threads-by-page
|
||||
[threads]
|
||||
(letfn [(group-by-page [result thread]
|
||||
(let [current (first result)]
|
||||
(if (= (:page-id current) (:page-id thread))
|
||||
(cons (update current :items conj thread)
|
||||
(rest result))
|
||||
(cons {:page-id (:page-id thread) :items [thread]}
|
||||
result))))]
|
||||
(reverse
|
||||
(reduce group-by-page nil threads))))
|
||||
|
||||
(defn- apply-filters
|
||||
[local profile threads]
|
||||
(cond->> threads
|
||||
(true? (:filter-resolved local))
|
||||
(filter (fn [item]
|
||||
(or (not (:is-resolved item))
|
||||
(= (:id item) (:open local)))))
|
||||
|
||||
(= :yours (:filter local))
|
||||
(filter #(contains? (:participants %) (:id profile)))))
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue