From 6ddfb92b1ff0e52659192ca67d018c08b2162bee Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 27 Dec 2024 10:20:45 +0100 Subject: [PATCH] WIP --- frontend/resources/images/icons/at.svg | 1 + frontend/src/app/main/ui/comments.cljs | 123 ++++++++++++------ frontend/src/app/main/ui/comments.scss | 25 +++- .../main/ui/ds/foundations/assets/icon.cljs | 1 + frontend/src/app/util/keyboard.cljs | 1 + 5 files changed, 109 insertions(+), 42 deletions(-) create mode 100644 frontend/resources/images/icons/at.svg diff --git a/frontend/resources/images/icons/at.svg b/frontend/resources/images/icons/at.svg new file mode 100644 index 000000000..72e5ff01d --- /dev/null +++ b/frontend/resources/images/icons/at.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index ca138dd55..b1645a6b6 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -100,12 +100,13 @@ [props] (let [value (d/nilv (unchecked-get props "value") "") + _ (.log js/console value) prev-value (h/use-previous value) - local-ref (mf/use-ref nil) - mentions-str (mf/use-ctx mentions-context) - - cur-mention (mf/use-var nil) + local-ref (mf/use-ref nil) + mentions-str (mf/use-ctx mentions-context) + + cur-mention (mf/use-var nil) on-focus (unchecked-get props "on-focus") on-blur (unchecked-get props "on-blur") @@ -223,32 +224,43 @@ (mf/deps on-esc on-ctrl-enter handle-select) (fn [event] (handle-select event) - (cond - (and @cur-mention (kbd/enter? event)) - (do (dom/prevent-default event) - (dom/stop-propagation event) - (rx/push! mentions-str {:type :insert-selected-mention})) - (and @cur-mention (kbd/down-arrow? event)) - (do (dom/prevent-default event) - (dom/stop-propagation event) - (rx/push! mentions-str {:type :insert-next-mention})) + (let [node (mf/ref-val local-ref) + [span-node offset] (current-text-node node)] + (cond + (and @cur-mention (kbd/enter? event)) + (do (dom/prevent-default event) + (dom/stop-propagation event) + (rx/push! mentions-str {:type :insert-selected-mention})) - (and @cur-mention (kbd/up-arrow? event)) - (do (dom/prevent-default event) - (dom/stop-propagation event) - (rx/push! mentions-str {:type :insert-prev-mention})) + (and @cur-mention (kbd/down-arrow? event)) + (do (dom/prevent-default event) + (dom/stop-propagation event) + (rx/push! mentions-str {:type :insert-next-mention})) - (and @cur-mention (kbd/esc? event)) - (do (dom/prevent-default event) - (dom/stop-propagation event) - (rx/push! mentions-str {:type :hide-mentions})) + (and @cur-mention (kbd/up-arrow? event)) + (do (dom/prevent-default event) + (dom/stop-propagation event) + (rx/push! mentions-str {:type :insert-prev-mention})) - (and (kbd/esc? event) (fn? on-esc)) - (on-esc event) + (and @cur-mention (kbd/esc? event)) + (do (dom/prevent-default event) + (dom/stop-propagation event) + (rx/push! mentions-str {:type :hide-mentions})) - (and (kbd/mod? event) (kbd/enter? event) (fn? on-ctrl-enter)) - (on-ctrl-enter event))))] + (and (kbd/esc? event) (fn? on-esc)) + (on-esc event) + + (and (kbd/mod? event) (kbd/enter? event) (fn? on-ctrl-enter)) + (on-ctrl-enter event) + + (and span-node + (= "mention" (dom/get-data span-node "type")) + (kbd/backspace? event)) + (do (dom/prevent-default event) + (dom/stop-propagation event) + ) + ))))] (mf/use-layout-effect (mf/deps autofocus?) @@ -470,6 +482,9 @@ (let [show-buttons? (mf/use-state false) content (mf/use-state "") + display-mentions* (mf/use-state false) + mentions-str (mf/use-ctx mentions-context) + disabled? (or (str/blank? @content) (str/empty? @content)) @@ -504,6 +519,23 @@ (on-cancel) (st/emit! :interrupt)))] + (mf/use-effect + (fn [] + (let [sub + (->> mentions-str + (rx/subs! + (fn [{:keys [type data]}] + (case type + :display-mentions + (reset! display-mentions* true) + + :hide-mentions + (reset! display-mentions* false) + + ;; + nil))))] + #(rx/dispose! sub)))) + [:div {:class (stl/css :reply-form)} [:& comment-input @@ -519,7 +551,19 @@ :max-length 750}] (when (or @show-buttons? (seq @content)) - [:div {:class (stl/css :buttons-wrapper)} + [:div {:class (stl/css-case :buttons-wrapper true + :is-toggled @display-mentions*)} + [:> icon-button* + {:variant "ghost" + :aria-label (tr "labels.options") + :on-pointer-down + #(do + (dom/prevent-default %) + (dom/stop-propagation %) + (rx/push! mentions-str {:type :display-mentions})) + :icon-class (stl/css :open-mentions-button) + :icon "at"}] + [:input.btn-secondary {:type "button" :class (stl/css :cancel-btn) @@ -749,19 +793,20 @@ :comment-mention (= type :mention))} content])))]] - [:& dropdown {:show (= options (:id comment)) - :on-close on-hide-options} - [:ul {:class (stl/css :comment-options-dropdown)} - [:li {:class (stl/css :context-menu-option) - :on-click on-edit-clicked} - (tr "labels.edit")] - (if thread - [:li {:class (stl/css :context-menu-option) - :on-click on-delete-thread} - (tr "labels.delete-comment-thread")] - [:li {:class (stl/css :context-menu-option) - :on-click on-delete-comment} - (tr "labels.delete-comment")])]]])) + [:div {:class (stl/css :comment-dropdown-wrapper)} + [:& dropdown {:show (= options (:id comment)) + :on-close on-hide-options} + [:ul {:class (stl/css :comment-options-dropdown)} + [:li {:class (stl/css :context-menu-option) + :on-click on-edit-clicked} + (tr "labels.edit")] + (if thread + [:li {:class (stl/css :context-menu-option) + :on-click on-delete-thread} + (tr "labels.delete-comment-thread")] + [:li {:class (stl/css :context-menu-option) + :on-click on-delete-comment} + (tr "labels.delete-comment")])]]]])) (defn make-comments-ref [thread-id] diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index bff177e02..aee48fded 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -215,12 +215,20 @@ } } } + + .comment-dropdown-wrapper { + position: absolute; + top: 0; + } + .comment-options-dropdown { @extend .dropdown-wrapper; - position: absolute; + position: fixed; width: fit-content; max-width: $s-200; - right: 0; + top: initial; + margin-top: $s-36; + right: $s-8; left: unset; .context-menu-option { @extend .dropdown-element-base; @@ -249,7 +257,8 @@ } } .buttons-wrapper { - display: flex; + display: grid; + grid-template-columns: repeat(3, 1fr); justify-content: flex-end; gap: $s-4; .post-btn { @@ -267,6 +276,16 @@ } } +.open-mentions-button { + cursor: pointer; + stroke: none; + fill: var(--color-foreground-secondary); + + .is-toggled & { + fill: var(--color-accent-primary); + } +} + .comments-mentions-choice { background: #212426; border-radius: 8px; diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs index 5609a3749..2c6c7f42d 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs +++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs @@ -55,6 +55,7 @@ (def ^:icon-id arrow-right "arrow-right") (def ^:icon-id arrow-up "arrow-up") (def ^:icon-id asc-sort "asc-sort") +(def ^:icon-id at "at") (def ^:icon-id board "board") (def ^:icon-id boards-thumbnail "boards-thumbnail") (def ^:icon-id boolean-difference "boolean-difference") diff --git a/frontend/src/app/util/keyboard.cljs b/frontend/src/app/util/keyboard.cljs index 5151b2f50..27ff1493a 100644 --- a/frontend/src/app/util/keyboard.cljs +++ b/frontend/src/app/util/keyboard.cljs @@ -90,4 +90,5 @@ (def backspace? (is-key? "Backspace")) (def home? (is-key? "Home")) (def tab? (is-key? "Tab")) +(def delete? (is-key? "Delete"))