diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index 7c0d40f44..f7f75c2a4 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -11,7 +11,7 @@ body { display: flex; flex-direction: column; font-family: "sourcesanspro", sans-serif; - height: 100%; + height: 100vh; overflow: hidden; } diff --git a/frontend/src/uxbox/main/ui/workspace/context_menu.cljs b/frontend/src/uxbox/main/ui/workspace/context_menu.cljs index 70ea5baa8..7bf57ce2f 100644 --- a/frontend/src/uxbox/main/ui/workspace/context_menu.cljs +++ b/frontend/src/uxbox/main/ui/workspace/context_menu.cljs @@ -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) diff --git a/frontend/src/uxbox/util/dom.cljs b/frontend/src/uxbox/util/dom.cljs index 151e2351c..a1a480753 100644 --- a/frontend/src/uxbox/util/dom.cljs +++ b/frontend/src/uxbox/util/dom.cljs @@ -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))