Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-18 10:41:29 -05:00
Code Issues Activity

🐛 Fix position of context menu off the screen

Browse source
This commit is contained in:
Andrés Moya 2020-07-21 13:11:50 +02:00
parent 02257c08bd
commit 3e92425779
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 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 rect)
:top (.-top rect)
:right (.-right rect)
:bottom (.-bottom rect)}))
(defn get-window-size
[]
{:width (.-innerWidth js/window)
:height (.-innerHeight js/window)})
(defn focus!
[node]
(.focus node))