From 3518f8160c743f67406211dd79d932030378d563 Mon Sep 17 00:00:00 2001 From: luisddm Date: Mon, 13 Jan 2025 11:24:32 +0100 Subject: [PATCH 1/4] :bug: Fix passing clojure map as js map --- frontend/src/app/main/ui/comments.cljs | 2 +- frontend/src/app/main/ui/workspace/viewport/comments.cljs | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index fbe559461..e20f0c827 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -962,7 +962,7 @@ (some? position-modifier) (gpt/transform position-modifier)) - max-height (when (some? viewport) (int (* (get viewport :height) 0.75))) + max-height (when (some? viewport) (int (* (:height viewport) 0.75))) ;; We should probably look for a better way of doing this. bubble-margin {:x 24 :y 24} diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs index 5cc97b574..9efd425ba 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs @@ -55,6 +55,8 @@ (mapv (partial update-position positions)) (dcm/apply-filters local profile))) + viewport (assoc vport :offset-x pos-x :offset-y pos-y) + on-draft-cancel (mf/use-fn #(st/emit! :interrupt)) @@ -86,7 +88,7 @@ (when (seq (dcm/apply-filters local profile [thread])) [:> cmt/comment-floating-thread* {:thread (update-position positions thread) :profiles profiles - :viewport {:offset-x pos-x :offset-y pos-y :width (:width vport) :height (:height vport)} + :viewport viewport :zoom zoom}]))) (when-let [draft (:comment drawing)] From 1662fe5b01aa3c314f80c6a459b47b14a4201570 Mon Sep 17 00:00:00 2001 From: luisddm Date: Mon, 13 Jan 2025 12:50:19 +0100 Subject: [PATCH 2/4] :bug: Fix bubbles getting displaced when thread does not fit in viewport --- frontend/src/app/main/ui/comments.cljs | 2 +- frontend/src/app/main/ui/workspace/viewport/comments.scss | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index e20f0c827..8a8691de8 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -962,7 +962,7 @@ (some? position-modifier) (gpt/transform position-modifier)) - max-height (when (some? viewport) (int (* (:height viewport) 0.75))) + max-height (when (some? viewport) (int (* (:height viewport) 0.5))) ;; We should probably look for a better way of doing this. bubble-margin {:x 24 :y 24} diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.scss b/frontend/src/app/main/ui/workspace/viewport/comments.scss index 9c587d596..c1fc4cf57 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.scss +++ b/frontend/src/app/main/ui/workspace/viewport/comments.scss @@ -19,9 +19,5 @@ } .threads { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + position: fixed; } From 63c3b9987ba448644a82657474c95d64ce66a95b Mon Sep 17 00:00:00 2001 From: luisddm Date: Mon, 13 Jan 2025 15:14:15 +0100 Subject: [PATCH 3/4] :bug: Fix multiline input in comments --- frontend/src/app/main/ui/comments.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index f02df3bd1..433a84a41 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -333,6 +333,8 @@ padding: $s-8; resize: vertical; width: 100%; + white-space: pre-wrap; + overflow-wrap: break-word; &:focus { border: $s-1 solid var(--input-border-color-active); From 658c3309a5768af99f289c0c5c1947ab155708b8 Mon Sep 17 00:00:00 2001 From: luisddm Date: Mon, 13 Jan 2025 16:38:46 +0100 Subject: [PATCH 4/4] :recycle: Use recommended rumext syntax --- frontend/src/app/main/ui/comments.cljs | 63 ++++++++++++-------------- 1 file changed, 29 insertions(+), 34 deletions(-) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 8a8691de8..d5d7d5ca5 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -125,7 +125,9 @@ (second))) ;; Component that renders the component content -(mf/defc comment-content +(mf/defc comment-content* + {::mf/props :obj + ::mf/private true} [{:keys [content]}] (let [comment-elements (mf/use-memo (mf/deps content) #(parse-comment content))] (for [[idx {:keys [type content]}] (d/enumerate comment-elements)] @@ -138,11 +140,13 @@ content])))) ;; Input text for comments with mentions -(mf/defc comment-input - {::mf/wrap-props false} - [props] +(mf/defc comment-input* + {::mf/props :obj + ::mf/private true + ::mf/wrap-props false} + [{:keys [value placeholder max-length autofocus? on-focus on-blur on-change on-esc on-ctrl-enter]}] - (let [value (d/nilv (unchecked-get props "value") "") + (let [value (d/nilv value "") prev-value (h/use-previous value) local-ref (mf/use-ref nil) @@ -151,15 +155,6 @@ prev-selection (mf/use-var nil) - on-focus (unchecked-get props "on-focus") - on-blur (unchecked-get props "on-blur") - placeholder (unchecked-get props "placeholder") - on-change (unchecked-get props "on-change") - on-esc (unchecked-get props "on-esc") - on-ctrl-enter (unchecked-get props "on-ctrl-enter") - max-length (unchecked-get props "max-length") - autofocus? (unchecked-get props "autofocus") - init-input (mf/use-callback (fn [node] @@ -429,7 +424,9 @@ :on-focus handle-focus :on-blur handle-blur}])) -(mf/defc mentions-panel +(mf/defc mentions-panel* + {::mf/props :obj + ::mf/private true} [{:keys [profiles]}] (let [mentions-str (mf/use-ctx mentions-context) @@ -522,7 +519,9 @@ [:div {:class (stl/css :comments-mentions-name)} fullname] [:div {:class (stl/css :comments-mentions-email)} email]]))]))) -(mf/defc mentions-button +(mf/defc mentions-button* + {::mf/props :obj + ::mf/private true} [] (let [mentions-str (mf/use-ctx mentions-context) display-mentions* (mf/use-state false) @@ -593,7 +592,7 @@ [:div {:class (stl/css :author-timeago)} (dt/timeago (:modified-at item))]]] [:div {:class (stl/css :item)} - [:> comment-content {:content (:content item)}]] + [:> comment-content* {:content (:content item)}]] [:div {:class (stl/css :replies)} (let [total-comments (:count-comments item 1) @@ -644,19 +643,18 @@ (st/emit! (dcm/add-comment thread @content)) (on-cancel)))] [:div {:class (stl/css :form)} - [:& comment-input + [:> comment-input* {:value @content :placeholder (tr "labels.reply.thread") - :autofocus true + :autofocus? true :on-blur on-blur :on-focus on-focus - :select-on-focus? false :on-ctrl-enter on-submit :on-change on-change :max-length 750}] (when (or @show-buttons? (seq @content)) [:div {:class (stl/css :form-buttons-wrapper)} - [:> mentions-button] + [:> mentions-button*] [:> button* {:variant "ghost" :on-click on-cancel} (tr "ds.confirm-cancel")] @@ -684,16 +682,14 @@ (str/empty? @content))] [:div {:class (stl/css :form)} - [:& comment-input + [:> comment-input* {:value @content - :autofocus true - :select-on-focus true - :select-on-focus? false + :autofocus? true :on-ctrl-enter on-submit* :on-change on-change :max-length 750}] [:div {:class (stl/css :form-buttons-wrapper)} - [:> mentions-button] + [:> mentions-button*] [:> button* {:variant "ghost" :on-click on-cancel} (tr "ds.confirm-cancel")] @@ -740,7 +736,7 @@ (mf/deps draft) (partial on-submit draft))] - [:& (mf/provider mentions-context) {:value mentions-str} + [:> (mf/provider mentions-context) {:value mentions-str} [:div {:class (stl/css :floating-preview-wrapper) :data-testid "floating-thread-bubble" @@ -754,18 +750,17 @@ :left (str (+ pos-x 28) "px")} :on-click dom/stop-propagation} [:div {:class (stl/css :form)} - [:& comment-input + [:> comment-input* {:placeholder (tr "labels.write-new-comment") :value (or content "") - :autofocus true - :select-on-focus? false + :autofocus? true :on-esc on-esc :on-change on-change :on-ctrl-enter on-submit :max-length 750}] [:div {:class (stl/css :form-buttons-wrapper)} - [:> mentions-button] + [:> mentions-button*] [:> button* {:variant "ghost" :on-click on-esc} (tr "ds.confirm-cancel")] @@ -774,7 +769,7 @@ :disabled disabled?} (tr "labels.post")]]] - [:& mentions-panel {:profiles profiles}]]])) + [:> mentions-panel* {:profiles profiles}]]])) (mf/defc comment-floating-thread-header* {::mf/props :obj @@ -911,7 +906,7 @@ :on-submit on-submit :on-cancel on-cancel}] [:span {:class (stl/css :text)} - [:> comment-content {:content (:content comment)}]])]] + [:> comment-content* {:content (:content comment)}]])]] [:& dropdown {:show (= options (:id comment)) :on-close on-hide-options} @@ -1020,7 +1015,7 @@ [:> comment-reply-form* {:thread thread}] - [:& mentions-panel {:profiles profiles}]])])) + [:> mentions-panel* {:profiles profiles}]])])) (mf/defc comment-floating-bubble* {::mf/props :obj