Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-11 01:28:30 -05:00
Code Issues Activity

🐛 Fixed problem with context menu offscreen

Browse source
This commit is contained in:
alonso.torres 2021-02-01 12:32:19 +01:00
parent 4ee6c278d9
commit 2de758a167
1 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/app/main/ui/components/context_menu.cljs
View file

@ -13,7 +13,8 @@
[goog.object :as gobj] [goog.object :as gobj]
[app.main.ui.components.dropdown :refer [dropdown']] [app.main.ui.components.dropdown :refer [dropdown']]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.util.data :refer [classnames]])) [app.util.data :refer [classnames]]
[app.util.dom :as dom]))
(mf/defc context-menu (mf/defc context-menu
{::mf/wrap-props false} {::mf/wrap-props false}
@ -27,14 +28,31 @@
is-selectable (gobj/get props "selectable") is-selectable (gobj/get props "selectable")
selected (gobj/get props "selected") selected (gobj/get props "selected")
top (gobj/get props "top") top (gobj/get props "top")
left (gobj/get props "left")] left (gobj/get props "left")
offset (mf/use-state 0)
check-menu-offscreen
(mf/use-callback
(mf/deps top @offset)
(fn [node]
(when node
(let [{node-height :height} (dom/get-bounding-rect node)
{window-height :height} (dom/get-window-size)
target-offset (if (> (+ top node-height) window-height)
(- node-height)
0)]
(if (not= target-offset @offset)
(reset! offset target-offset))))))]
(when open? (when open?
[:> dropdown' props [:> dropdown' props
[:div.context-menu {:class (classnames :is-open open? [:div.context-menu {:class (classnames :is-open open?
:is-selectable is-selectable) :is-selectable is-selectable)
:style {:top top :style {:top (+ top @offset)
:left left}} :left left}}
[:ul.context-menu-items [:ul.context-menu-items {:ref check-menu-offscreen}
(for [[action-name action-handler] options] (for [[action-name action-handler] options]
[:li.context-menu-item {:class (classnames :is-selected (and selected (= action-name selected))) [:li.context-menu-item {:class (classnames :is-selected (and selected (= action-name selected)))
:key action-name} :key action-name}