diff --git a/frontend/src/app/main/data/comments.cljs b/frontend/src/app/main/data/comments.cljs index 981f78336..807db96e8 100644 --- a/frontend/src/app/main/data/comments.cljs +++ b/frontend/src/app/main/data/comments.cljs @@ -67,6 +67,7 @@ (update :comment-threads assoc id (dissoc thread :comment)) (update-in [:workspace-data :pages-index page-id :options :comment-threads-position] assoc id position) (update :comments-local assoc :open id) + (update :comments-local assoc :options nil) (update :comments-local dissoc :draft) (update :workspace-drawing dissoc :comment) (update-in [:comments id] assoc (:id comment) comment)))) @@ -120,6 +121,7 @@ (update :comment-threads assoc id (dissoc thread :comment)) (update-in [:viewer :pages page-id :options :comment-threads-position] assoc id position) (update :comments-local assoc :open id) + (update :comments-local assoc :options nil) (update :comments-local dissoc :draft) (update :workspace-drawing dissoc :comment) (update-in [:comments id] assoc (:id comment) comment)))) @@ -427,6 +429,7 @@ (update [_ state] (-> state (update :comments-local assoc :open id) + (update :comments-local assoc :options nil) (update :workspace-drawing dissoc :comment))))) (defn close-thread @@ -435,7 +438,7 @@ ptk/UpdateEvent (update [_ state] (-> state - (update :comments-local dissoc :open :draft) + (update :comments-local dissoc :open :draft :options) (update :workspace-drawing dissoc :comment))))) (defn update-filters @@ -490,6 +493,19 @@ (d/update-in-when [:workspace-drawing :comment] merge data) (d/update-in-when [:comments-local :draft] merge data))))) +(defn toggle-comment-options + [comment] + (ptk/reify ::toggle-comment-options + ptk/UpdateEvent + (update [_ state] + (update-in state [:comments-local :options] #(if (= (:id comment) %) nil (:id comment)))))) + +(defn hide-comment-options + [] + (ptk/reify ::hide-comment-options + ptk/UpdateEvent + (update [_ state] + (update-in state [:comments-local :options] (constantly nil))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Helpers diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 2fd50ec86..3ff852fcf 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -27,6 +27,8 @@ [okulary.core :as l] [rumext.v2 :as mf])) +(def comments-local-options (l/derived :options refs/comments-local)) + (mf/defc resizing-textarea {::mf/wrap-props false} [props] @@ -248,25 +250,28 @@ [{:keys [comment thread users origin] :as props}] (let [owner (get users (:owner-id comment)) profile (mf/deref refs/profile) - options (mf/use-state false) + options (mf/deref comments-local-options) edition? (mf/use-state false) on-toggle-options (mf/use-fn + (mf/deps options) (fn [event] (dom/stop-propagation event) - (swap! options not))) + (st/emit! (dcm/toggle-comment-options comment)))) on-hide-options (mf/use-fn + (mf/deps options) (fn [event] (dom/stop-propagation event) - (reset! options false))) + (st/emit! (dcm/hide-comment-options)))) on-edit-clicked (mf/use-fn + (mf/deps options) (fn [] - (reset! options false) + (st/emit! (dcm/hide-comment-options)) (reset! edition? true))) on-delete-comment @@ -282,7 +287,6 @@ (dcm/delete-comment-thread-on-viewer thread) (dcm/delete-comment-thread-on-workspace thread)))) - on-delete-thread (mf/use-fn (mf/deps thread) @@ -337,7 +341,7 @@ :on-cancel on-cancel}] [:span {:class (stl/css :text)} (:content comment)])]] - [:& dropdown {:show @options + [:& dropdown {:show (= options (:id comment)) :on-close on-hide-options} [:ul {:class (stl/css :comment-options-dropdown)} [:li {:class (stl/css :context-menu-option) diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index 6cfe14e7c..35682c766 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -216,7 +216,8 @@ .comment-options-dropdown { @extend .dropdown-wrapper; position: absolute; - width: $s-120; + width: fit-content; + max-width: $s-200; right: 0; left: unset; .context-menu-option {