mirror of
https://github.com/penpot/penpot.git
synced 2025-01-04 13:50:12 -05:00
WIP
This commit is contained in:
alonso.torres
parent
d87a610b65
commit
6ddfb92b1f
5 changed files with 109 additions and 42 deletions
1
frontend/resources/images/icons/at.svg
Normal file
1
frontend/resources/images/icons/at.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14.499" height="14.507" viewBox="700.734 827.762 14.499 14.507"><path d="M707.948 827.762c-.193 0-.386.007-.578.022-2.311.181-4.574 1.452-5.839 3.982-1.686 3.372-.52 6.821 1.835 8.787 2.354 1.966 5.955 2.497 8.974.233a.566.566 0 1 0-.68-.906c-2.611 1.959-5.563 1.478-7.568-.196-2.004-1.675-3.005-4.495-1.546-7.412 1.458-2.917 4.314-3.808 6.856-3.208 2.543.599 4.698 2.672 4.698 5.936v.667c0 .525-.176.847-.435 1.076-.258.23-.624.357-.998.357s-.741-.127-.999-.357c-.258-.229-.435-.551-.435-1.076v-3.334a.567.567 0 0 0-1.133 0v.215a3.215 3.215 0 0 0-2.1-.781 3.241 3.241 0 0 0-3.233 3.233 3.241 3.241 0 0 0 3.233 3.233 3.23 3.23 0 0 0 2.482-1.168c.122.199.267.377.433.525a2.63 2.63 0 0 0 1.752.643c.626 0 1.259-.206 1.751-.643.492-.437.815-1.115.815-1.923V835c0-3.773-2.586-6.336-5.572-7.04a7.405 7.405 0 0 0-1.713-.198ZM708 832.9c1.167 0 2.1.933 2.1 2.1a2.09 2.09 0 0 1-2.1 2.1 2.09 2.09 0 0 1-2.1-2.1c0-1.167.933-2.1 2.1-2.1Z"/></svg>
|
||||
|
After Width: | Height: | Size: 982 B |
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -90,4 +90,5 @@
|
|||
(def backspace? (is-key? "Backspace"))
|
||||
(def home? (is-key? "Home"))
|
||||
(def tab? (is-key? "Tab"))
|
||||
(def delete? (is-key? "Delete"))
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue