Apple Icon Dropdown should overlap Windows.
mirkoRainer opened this issue · comments
Photo from screenshot using Edge browser in iOS on iPhone XS Max.
In true MacOS, the Apple icon dropdown in the top left would overlay windows. This is not the case in your site.
Either way, awesome site! Good job!
Got it, will be fixed later. Thank you!
Hmmm it seems harder than I thought. Before making the dropdown menu always overlay windows, I have to limit the movement boundary of windows below topbar, or the ui will seem strange. However, I use react-rnd for dragging and resizing windows and it's not easy to set boundaries in react-rnd...
I'll try to find out a solution but this issue may not be solved immediately. (Also, pull requests are welcome
I recommend looking for something to overlay the dropdown so that it is always rendered on top of things at a fixed positive.
https://www.npmjs.com/package/react-overlays comes to mind but might not be the right solution.
Is this what you tried?
I try to set z-index of the dropdown menu and the top toolbar (the div of dropdown menu), it seems to work well. In my opinion, the z-index of top toolbar and the dropdown menu should be the max of the page so that it can always show over other element.
I try to set z-index of the dropdown menu and the top toolbar (the div of dropdown menu), it seems to work well. In my opinion, the z-index of top toolbar and the dropdown menu should be the max of the page so that it can always show over other element.
That's right. However, in that way, when dragging the window to the top of the screen, it will be overlapped by the topbar, which seems weird:
So I guess I should limit the movement boundary of windows below the topbar (red line), but it's seems not easy in react-rnd...
I try to set z-index of the dropdown menu and the top toolbar (the div of dropdown menu), it seems to work well. In my opinion, the z-index of top toolbar and the dropdown menu should be the max of the page so that it can always show over other element.
That's right. However, in that way, when dragging the window to the top of the screen, it will be overlapped by the topbar, which seems weird:
So I guess I should limit the movement boundary of windows below the topbar (red line), but it's seems not easy in react-rnd...
I never use react before(always using vue), so it maybe hard to change the code directly and properly for me. I just read the doc of react-rnd and I understand the question is to ensure that the x and y of the window do not extend beyond the desktop area. And I find that the problem can be solved with putting the rnd in a div. I try to write a example. Hope it can help you deal with this issue.
I just read the doc of react-rnd and I understand the question is to ensure that the x and y of the window do not extend beyond the desktop area. And I find that the problem can be solved with putting the rnd in a div. I try to write a example. Hope it can help you deal with this issue.
@AXiLiYa Thank you for your detailed explanation and example. Yes, theoretically, movement boundaries can be set using div in react-rnd. But this would be difficult in practice in this case, because the size and position of the boundary div should adapt according to the window size. Here's a simple sketch:
For window1 (blue), the boundary div should be the blue box. But for window2 (another window, or resized window1), the boundary div transforms to the red box.
So in my opinion, this way is neither easy nor elegant. I guess it would be much easier if react-rnd provides a way to set bounds prop with a position object, just like what react-draggable (one of react-rnd's dependencies) does. I'll try to submit a pr to react-rnd when I have time (although I hope some others could do it hahaha
@mirkoRainer @AXiLiYa Hi, finally I took @AXiLiYa's advice and added a boundary for rnds via putting them in a parent div. In fact it's much easier than I thought hahaha. Now this problem should be solved, have a look at the website. Thank you!
Nice!