Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 17:21:17 -05:00
Code Issues Activity

Merge pull request #282 from uxbox/context-menu-position

Browse source 
🐛 Fix position of context menu off the screen
This commit is contained in:
Andrey Antukh 2020-07-22 09:51:41 +02:00 • committed by GitHub
commit 2b461d5b08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/base.scss
View file

@ -11,7 +11,7 @@ body {
display: flex;
flex-direction: column;
font-family: "sourcesanspro", sans-serif;
height: 100%;
height: 100vh;
overflow: hidden;
}

23
frontend/src/uxbox/main/ui/workspace/context_menu.cljs
View file

@ -124,12 +124,29 @@
(mf/defc context-menu
[props]
(let [mdata (mf/deref menu-ref)]
(let [mdata (mf/deref menu-ref)
top (- (get-in mdata [:position :y]) 20)
left (get-in mdata [:position :x])
dropdown-ref (mf/use-ref)]
(mf/use-effect
(mf/deps mdata)
#(let [dropdown (mf/ref-val dropdown-ref)]
(when dropdown
(let [bounding-rect (dom/get-bounding-rect dropdown)
window-size (dom/get-window-size)
delta-x (max (- (:right bounding-rect) (: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)
:on-close #(st/emit! dw/hide-context-menu)}
[:ul.workspace-context-menu
{:style {:top (- (get-in mdata [:position :y]) 20)
:left (get-in mdata [:position :x])}
{:ref dropdown-ref
:style {:top top :left left}
:on-context-menu prevent-default}
(if (:shape mdata)

13
frontend/src/uxbox/util/dom.cljs
View file

@ -162,6 +162,19 @@
{:width (.-clientWidth ^js node)
:height (.-clientHeight ^js node)})
(defn get-bounding-rect
[node]
(let [rect (.getBoundingClientRect ^js node)]
{:left (.-left ^js rect)
:top (.-top ^js rect)
:right (.-right ^js rect)
:bottom (.-bottom ^js rect)}))
(defn get-window-size
[]
{:width (.-innerWidth ^js js/window)
:height (.-innerHeight ^js js/window)})
(defn focus!
[node]
(.focus node))