3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-16 10:31:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

Better context-menu position, remove hardcoded value

Browse source
This commit is contained in:
Florian Schroedl 2024-07-25 10:11:36 +02:00
parent 1e481412e8
commit 9bec2509c9
2 changed files with 19 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -237,7 +237,7 @@
(mf/defc menu-entry (mf/defc menu-entry
{::mf/props :obj} {::mf/props :obj}
[{:keys [title value on-click selected? children]}] [{:keys [title value on-click selected? children submenu-offset]}]
(let [submenu-ref (mf/use-ref nil) (let [submenu-ref (mf/use-ref nil)
hovering? (mf/use-ref false) hovering? (mf/use-ref false)
on-pointer-enter on-pointer-enter
@ -275,7 +275,9 @@
[:span {:class (stl/css :submenu-icon)} i/arrow] [:span {:class (stl/css :submenu-icon)} i/arrow]
[:ul {:class (stl/css :token-context-submenu) [:ul {:class (stl/css :token-context-submenu)
:ref submenu-ref :ref submenu-ref
:style {:display "none" :left 235} :style {:display "none"
:top 0
:left (str submenu-offset "px")}
:on-context-menu prevent-default} :on-context-menu prevent-default}
children]])])) children]])]))
@ -288,7 +290,8 @@
[:* {:key (str title " " index)} [:* {:key (str title " " index)}
(cond (cond
(= :separator entry) [:li {:class (stl/css :separator)}] (= :separator entry) [:li {:class (stl/css :separator)}]
submenu [:& menu-entry {:title title} submenu [:& menu-entry {:title title
:submenu-offset (:submenu-offset context-data)}
[:& menu-tree (assoc context-data :type submenu)]] [:& menu-tree (assoc context-data :type submenu)]]
:else [:& menu-entry :else [:& menu-entry
{:title title {:title title
@ -297,27 +300,22 @@
(mf/defc token-context-menu (mf/defc token-context-menu
[] []
(let [mdata (mf/deref tokens-menu-ref) (let [mdata (mf/deref tokens-menu-ref)
top (- (get-in mdata [:position :y]) 20) top (+ (get-in mdata [:position :y]) 5)
left (get-in mdata [:position :x]) left (+ (get-in mdata [:position :x]) 5)
dropdown-ref (mf/use-ref) width (mf/use-state 0)
dropdown-ref (mf/use-ref)
objects (mf/deref refs/workspace-page-objects) objects (mf/deref refs/workspace-page-objects)
selected (mf/deref refs/selected-shapes) selected (mf/deref refs/selected-shapes)
selected-shapes (into [] (keep (d/getf objects)) selected) selected-shapes (into [] (keep (d/getf objects)) selected)
token-id (:token-id mdata) token-id (:token-id mdata)
token (get (mf/deref refs/workspace-tokens) token-id)] token (get (mf/deref refs/workspace-tokens) token-id)]
(mf/use-effect
(mf/deps mdata) (mf/use-effect
#(let [dropdown (mf/ref-val dropdown-ref)] (fn []
(when dropdown (when-let [node (mf/ref-val dropdown-ref)]
(let [bounding-rect (dom/get-bounding-rect dropdown) (reset! width (.-offsetWidth node)))))
window-size (dom/get-window-size)
delta-x (max (- (+ (:right bounding-rect) 250) (:width window-size)) 0)
delta-y (max (- (:bottom bounding-rect) (:height window-size)) 0)
new-style (str "top: " (- top delta-y) "px; "
"left: " (- left delta-x) "px;")]
(when (or (> delta-x 0) (> delta-y 0))
(.setAttribute ^js dropdown "style" new-style))))))
[:& dropdown {:show (boolean mdata) [:& dropdown {:show (boolean mdata)
:on-close #(st/emit! dt/hide-token-context-menu)} :on-close #(st/emit! dt/hide-token-context-menu)}
[:div {:class (stl/css :token-context-menu) [:div {:class (stl/css :token-context-menu)
@ -326,5 +324,6 @@
:on-context-menu prevent-default} :on-context-menu prevent-default}
(when token (when token
[:ul {:class (stl/css :context-list)} [:ul {:class (stl/css :context-list)}
[:& menu-tree {:token token [:& menu-tree {:submenu-offset @width
:token token
:selected-shapes selected-shapes}]])]])) :selected-shapes selected-shapes}]])]]))

2
frontend/src/app/main/ui/workspace/tokens/context_menu.scss
View file

@ -8,8 +8,6 @@
.token-context-menu { .token-context-menu {
position: absolute; position: absolute;
top: $s-40;
left: $s-736;
z-index: $z-index-4; z-index: $z-index-4;
} }