From 3fdf0c727e99c2190f735fed57d8cd217f5ad90a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Mon, 11 Mar 2024 11:01:00 +0100 Subject: [PATCH] :bug: Fix comments thread overflowing the viewport and displacing comment bubbles --- .../styles/main/partials/workspace.scss | 20 +++------ frontend/src/app/main/ui/comments.cljs | 42 +++++++++++++++---- frontend/src/app/main/ui/comments.scss | 10 +++++ .../main/ui/workspace/viewport/comments.cljs | 2 + .../main/ui/workspace/viewport/comments.scss | 7 +++- 5 files changed, 56 insertions(+), 25 deletions(-) diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 5288b7475..a387fed48 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -152,16 +152,6 @@ $height-palette-max: 80px; } } -// .workspace-loader { -// display: flex; -// justify-content: center; -// align-items: center; - -// svg { -// fill: $color-gray-50; -// } -// } - .workspace-content { background-color: $color-canvas; display: flex; @@ -242,20 +232,22 @@ $height-palette-max: 80px; .viewport-overlays { cursor: initial; - height: 100%; overflow: hidden; pointer-events: none; position: absolute; - width: 100%; + top: 0; + left: 0; + bottom: 0; + right: 0; z-index: 10; .pixel-overlay { - height: 100%; left: 0; pointer-events: initial; position: absolute; top: 0; - width: 100%; + right: 0; + bottom: 0; z-index: 1; } } diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 9cb417b8f..c1c1b5685 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -355,22 +355,41 @@ [thread-id] (l/derived (l/in [:comments thread-id]) st/state)) +(defn- offset-position [position viewport zoom bubble-margin] + (let [base-x (+ (* (:x position) zoom) (:offset-x viewport)) + base-y (+ (* (:y position) zoom) (:offset-y viewport)) + w (:width viewport) + h (:height viewport) + comment-width 284 ;; TODO: this is the width set via CSS in an outer container… + ;; We should probably do this in a different way. + orientation-left? (>= (+ base-x comment-width (:x bubble-margin)) w) + orientation-top? (>= base-y (/ h 2)) + h-dir (if orientation-left? :left :right) + v-dir (if orientation-top? :top :bottom) + x (:x position) + y (:y position)] + {:x x :y y :h-dir h-dir :v-dir v-dir})) + (mf/defc thread-comments {::mf/wrap [mf/memo]} - [{:keys [thread zoom users origin position-modifier]}] + [{:keys [thread zoom users origin position-modifier viewport]}] (let [ref (mf/use-ref) - - thread-id (:id thread) thread-pos (:position thread) - pos (cond-> thread-pos + base-pos (cond-> thread-pos (some? position-modifier) (gpt/transform position-modifier)) - pos-x (+ (* (:x pos) zoom) 24) - pos-y (- (* (:y pos) zoom) 28) + max-height (int (* (:height viewport) 0.75)) + ;; We should probably look for a better way of doing this. + bubble-margin {:x 24 :y 0} + pos (offset-position base-pos viewport zoom bubble-margin) + margin-x (* (:x bubble-margin) (if (= (:h-dir pos) :left) -1 1)) + margin-y (* (:y bubble-margin) (if (= (:v-dir pos) :top) -1 1)) + pos-x (+ (* (:x pos) zoom) margin-x) + pos-y (- (* (:y pos) zoom) margin-y) comments-ref (mf/with-memo [thread-id] (make-comments-ref thread-id)) @@ -393,9 +412,14 @@ (dom/scroll-into-view-if-needed! node))) (when (some? comment) - [:div {:class (stl/css :thread-content) - :style {:top (str pos-y "px") - :left (str pos-x "px")} + [:div {:class (stl/css-case :thread-content true + :thread-content-left (= (:h-dir pos) :left) + :thread-content-top (= (:v-dir pos) :top)) + :id (str "thread-" thread-id) + :style {:left (str pos-x "px") + :top (str pos-y "px") + :max-height max-height + :overflow-y "scroll"} :on-click dom/stop-propagation} [:div {:class (stl/css :comments)} diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index ddad36a6b..368ed4824 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -139,6 +139,9 @@ padding: $s-12; border-radius: $br-8; background-color: var(--comment-modal-background-color); + --translate-x: 0%; + --translate-y: 0%; + transform: translate(var(--translate-x), var(--translate-y)); .comments { display: flex; flex-direction: column; @@ -146,6 +149,13 @@ } } +.thread-content-left { + --translate-x: -100%; +} +.thread-content-top { + --translate-y: -100%; +} + // comment-item .comment-container { diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs index ca842d1c6..f75559b5e 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs @@ -84,6 +84,7 @@ (when (seq (dcm/apply-filters local profile [thread])) [:& cmt/thread-comments {:thread (update-position positions thread) :users users + :viewport {:offset-x pos-x :offset-y pos-y :width (:width vport) :height (:height vport)} :zoom zoom}]))) (when-let [draft (:comment drawing)] @@ -91,3 +92,4 @@ :on-cancel on-draft-cancel :on-submit on-draft-submit :zoom zoom}])]]])) + diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.scss b/frontend/src/app/main/ui/workspace/viewport/comments.scss index ee56bc948..9c587d596 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.scss +++ b/frontend/src/app/main/ui/workspace/viewport/comments.scss @@ -15,10 +15,13 @@ pointer-events: none; overflow: hidden; user-select: text; + position: absolute; } .threads { position: absolute; - top: $s-0; - left: $s-0; + top: 0; + left: 0; + right: 0; + bottom: 0; }