From 45059d73da86230d699ebe881b6e7ae092b39f4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?luis=CE=B4=CE=BC?= <2978951+luisddm@users.noreply.github.com> Date: Thu, 30 Jan 2025 10:35:47 +0100 Subject: [PATCH] :bug: Fix several bugs in comments (#5716) * :recycle: Remove obsolete CSS code * :bug: Fix post a comment with keyboard * :bug: Fix show comments cursor on view mode * :bug: Fix avoid comment bubbles to appear on top of sidebars * :bug: Fix cancel native browser zoom when comment threads are visible --- frontend/src/app/main/ui/comments.cljs | 118 +++++++++++------- frontend/src/app/main/ui/comments.scss | 33 ++--- frontend/src/app/main/ui/viewer/comments.cljs | 5 +- .../src/app/main/ui/workspace/sidebar.scss | 3 +- .../src/app/main/ui/workspace/viewport.scss | 2 +- .../main/ui/workspace/viewport/actions.cljs | 5 +- .../main/ui/workspace/viewport/comments.cljs | 3 +- 7 files changed, 94 insertions(+), 75 deletions(-) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index a9761d9e5..aa5e0045e 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -602,10 +602,42 @@ [:span {:class (stl/css :replies-unread)} (str unread-replies " " (tr "labels.reply.new"))] [:span {:class (stl/css :replies-unread)} (str unread-replies " " (tr "labels.replies.new"))]))])]]) +(mf/defc comment-form-buttons* + {::mf/props :obj + ::mf/private true} + [{:keys [on-submit on-cancel is-disabled]}] + (let [handle-cancel + (mf/use-fn + (mf/deps on-cancel) + (fn [event] + (when (kbd/enter? event) + (on-cancel)))) + + handle-submit + (mf/use-fn + (mf/deps on-submit) + (fn [event] + (when (kbd/enter? event) + (on-submit))))] + + [:div {:class (stl/css :form-buttons-wrapper)} + [:> mentions-button*] + [:> button* {:variant "ghost" + :type "button" + :on-key-down handle-cancel + :on-click on-cancel} + (tr "ds.confirm-cancel")] + [:> button* {:variant "primary" + :type "button" + :on-key-down handle-submit + :on-click on-submit + :disabled is-disabled} + (tr "labels.post")]])) + (mf/defc comment-reply-form* {::mf/props :obj ::mf/private true} - [{:keys [thread]}] + [{:keys [on-submit]}] (let [show-buttons? (mf/use-state false) content (mf/use-state "") @@ -628,11 +660,11 @@ #(do (reset! content "") (reset! show-buttons? false))) - on-submit + on-submit* (mf/use-fn - (mf/deps thread @content) + (mf/deps @content) (fn [] - (st/emit! (dcm/add-comment thread @content)) + (on-submit @content) (on-cancel)))] [:div {:class (stl/css :form)} @@ -642,24 +674,20 @@ :autofocus true :on-blur on-blur :on-focus on-focus - :on-ctrl-enter on-submit + :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*] - [:> button* {:variant "ghost" - :on-click on-cancel} - (tr "ds.confirm-cancel")] - [:> button* {:variant "primary" - :on-click on-submit - :disabled disabled?} - (tr "labels.post")]])])) + [:> comment-form-buttons* {:on-submit on-submit* + :on-cancel on-cancel + :is-disabled disabled?}])])) (mf/defc comment-edit-form* {::mf/private true} [{:keys [content on-submit on-cancel]}] - (let [content (mf/use-state content) + (let [content (mf/use-state content) + + disabled? (blank-content? @content) on-change (mf/use-fn @@ -668,9 +696,7 @@ on-submit* (mf/use-fn (mf/deps @content) - (fn [] (on-submit @content))) - - disabled? (blank-content? @content)] + (fn [] (on-submit @content)))] [:div {:class (stl/css :form)} [:> comment-input* @@ -679,15 +705,9 @@ :on-ctrl-enter on-submit* :on-change on-change :max-length 750}] - [:div {:class (stl/css :form-buttons-wrapper)} - [:> mentions-button*] - [:> button* {:variant "ghost" - :on-click on-cancel} - (tr "ds.confirm-cancel")] - [:> button* {:variant "primary" - :on-click on-submit* - :disabled disabled?} - (tr "labels.post")]]])) + [:> comment-form-buttons* {:on-submit on-submit* + :on-cancel on-cancel + :is-disabled disabled?}]])) (mf/defc comment-floating-thread-draft* [{:keys [draft zoom on-cancel on-submit position-modifier]}] @@ -720,10 +740,11 @@ (fn [content] (st/emit! (dcm/update-draft-thread {:content content})))) - on-submit + on-submit* (mf/use-fn (mf/deps draft) - (partial on-submit draft))] + (fn [] + (on-submit draft)))] [:> (mf/provider mentions-context) {:value mentions-s} [:div @@ -734,7 +755,7 @@ :on-click dom/stop-propagation} [:> comment-avatar* {:class (stl/css :avatar-lg) :image (cfg/resolve-profile-photo-url profile)}]] - [:div {:class (stl/css :floating-thread-wrapper) + [:div {:class (stl/css :floating-thread-wrapper :cursor-auto) :style {:top (str (- pos-y 24) "px") :left (str (+ pos-x 28) "px")} :on-click dom/stop-propagation} @@ -745,19 +766,11 @@ :autofocus true :on-esc on-esc :on-change on-change - :on-ctrl-enter on-submit + :on-ctrl-enter on-submit* :max-length 750}] - - [:div {:class (stl/css :form-buttons-wrapper)} - [:> mentions-button*] - [:> button* {:variant "ghost" - :on-click on-esc} - (tr "ds.confirm-cancel")] - [:> button* {:variant "primary" - :on-click on-submit - :disabled disabled?} - (tr "labels.post")]]] - + [:> comment-form-buttons* {:on-submit on-submit* + :on-cancel on-esc + :is-disabled disabled?}]] [:> mentions-panel*]]])) (mf/defc comment-floating-thread-header* @@ -935,7 +948,7 @@ {::mf/wrap [mf/memo]} [{:keys [thread zoom origin position-modifier viewport]}] (let [ref (mf/use-ref) - mentions-s (mf/use-memo #(rx/subject)) + mentions-s (mf/use-memo #(rx/subject)) thread-id (:id thread) thread-pos (:position thread) @@ -962,7 +975,13 @@ (->> (vals comments-map) (sort-by :created-at))) - first-comment (first comments)] + first-comment (first comments) + + on-submit + (mf/use-fn + (mf/deps thread) + (fn [content] + (st/emit! (dcm/add-comment thread content))))] (mf/with-effect [thread-id] (st/emit! (dcm/retrieve-comments thread-id))) @@ -977,6 +996,7 @@ [:> (mf/provider mentions-context) {:value mentions-s} (when (some? first-comment) [:div {:class (stl/css-case :floating-thread-wrapper true + :cursor-auto true :left (= (:h-dir pos) :left) :top (= (:v-dir pos) :top)) :id (str "thread-" thread-id) @@ -996,7 +1016,7 @@ [:* {:key (dm/str (:id item))} [:> comment-floating-thread-item* {:comment item}]])] - [:> comment-reply-form* {:thread thread}] + [:> comment-reply-form* {:on-submit on-submit}] [:> mentions-panel*]])])) @@ -1112,11 +1132,13 @@ :on-pointer-leave on-pointer-leave :on-click on-click* :class (stl/css-case :floating-preview-wrapper true - :floating-preview-bubble (false? (:is-hover @state)) - :grabbing (true? (:is-grabbing @state)))} + :floating-preview-bubble (false? (:is-hover @state)))} (if (:is-hover @state) - [:div {:class (stl/css :floating-thread-wrapper :floating-preview-displacement)} + [:div {:class (stl/css-case :floating-thread-wrapper true + :floating-preview-displacement true + :cursor-pointer (false? (:is-grabbing @state)) + :cursor-grabbing (true? (:is-grabbing @state)))} [:div {:class (stl/css :floating-thread-item-wrapper)} [:div {:class (stl/css :floating-thread-item)} [:> comment-info* {:item thread diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index 4fc6470b9..019120b39 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -6,6 +6,18 @@ @import "refactor/common-refactor.scss"; +.cursor-grabbing { + cursor: grabbing; +} + +.cursor-pointer { + cursor: pointer; +} + +.cursor-auto { + cursor: auto; +} + .grayed-text { color: var(--comment-subtitle-color); } @@ -137,10 +149,6 @@ margin-top: calc(-1 * ($s-8 + $s-2)); } -.grabbing { - cursor: grabbing; -} - .floating-thread-wrapper { position: absolute; display: flex; @@ -231,23 +239,6 @@ flex-direction: column; gap: $s-8; max-height: calc(var(--comment-height) - $s-132); - - textarea { - @extend .input-element; - @include bodySmallTypography; - line-height: 1.45; - height: 100%; - width: 100%; - max-width: $s-260; - padding: $s-8; - margin-top: $s-4; - color: var(--input-foreground-color-active); - resize: vertical; - &:focus { - border: $s-1 solid var(--input-border-color-active); - outline: none; - } - } } .form-buttons-wrapper { diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs index 028a55eed..96c8d5fef 100644 --- a/frontend/src/app/main/ui/viewer/comments.cljs +++ b/frontend/src/app/main/ui/viewer/comments.cljs @@ -21,6 +21,7 @@ [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.icons :as i] [app.main.ui.workspace.comments :as wc] + [app.main.ui.workspace.viewport.utils :as utils] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [okulary.core :as l] @@ -131,6 +132,8 @@ (let [profile (mf/deref refs/profile) local (mf/deref refs/comments-local) + cursor (utils/get-cursor :comments) + open-thread-id (:open local) page-id (:id page) file-id (:id file) @@ -203,7 +206,7 @@ [:div {:class (stl/css :comments-section) :on-click on-click} - [:div {:class (stl/css :viewer-comments-container)} + [:div {:class (dm/str cursor " " (stl/css :viewer-comments-container))} [:div {:class (stl/css :threads)} (for [item threads] [:> cmt/comment-floating-bubble* diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index d4d606d12..2d1cb7e5f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -24,6 +24,7 @@ $width-settings-bar-max: $s-500; background-color: var(--panel-background-color); height: 100vh; max-height: 100vh; + z-index: $z-index-1; .resize-area { grid-area: resize; @@ -65,7 +66,7 @@ $width-settings-bar-max: $s-500; height: 100vh; width: $width-settings-bar; background-color: var(--panel-background-color); - z-index: 0; + z-index: $z-index-1; &.not-expand { max-width: $width-settings-bar; } diff --git a/frontend/src/app/main/ui/workspace/viewport.scss b/frontend/src/app/main/ui/workspace/viewport.scss index be6d5f9d8..aa6c1789f 100644 --- a/frontend/src/app/main/ui/workspace/viewport.scss +++ b/frontend/src/app/main/ui/workspace/viewport.scss @@ -35,5 +35,5 @@ left: 0; bottom: 0; right: 0; - z-index: 10; + z-index: $z-index-1; } diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index c0cf1d7c3..3b9722aa4 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -376,9 +376,10 @@ (let [event (.getBrowserEvent ^js event) target (dom/get-target event) mod? (kbd/mod? event) - picking-color? (= "pixel-overlay" (.-id target))] + picking-color? (= "pixel-overlay" (.-id target)) + on-comments-layer? (dom/is-child? (dom/get-element "comments") target)] - (when (or (uwvv/inside-viewport? target) picking-color?) + (when (or (uwvv/inside-viewport? target) picking-color? on-comments-layer?) (dom/prevent-default event) (dom/stop-propagation event) (let [raw-pt (dom/get-client-position event) diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs index 764f5e87d..c08a7f218 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs @@ -77,7 +77,8 @@ [:div {:class (stl/css :comments-section)} [:div - {:class (stl/css :workspace-comments-container) + {:id "comments" + :class (stl/css :workspace-comments-container) :style {:width (dm/str vport-w "px") :height (dm/str vport-h "px")}} [:div {:class (stl/css :threads)