nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update ContextMenu

Browse Source
This commit is contained in:
Bill 2021-06-30 22:44:38 -04:00
parent 754cf2df2e
commit ca06d064eb
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/room/widgets/context-menu/ContextMenu.scss
View File

@ -1,6 +1,6 @@
.nitro-context-menu {
width: 150px;
max-width: 150px;
width: 125px;
max-width: 125px;
padding: 2px;
background-color: #1c323f;
border: 2px solid rgba($white, 0.5);
@ -9,16 +9,14 @@
z-index: $context-menu-zindex;
&.name-only {
background-color: rgba($black, 0.7);
background-color: rgba($black, 0.5);
padding: 1px 8px;
min-width: 60px;
width: unset;
max-width: unset;
text-align: center;
font-size: 18px;
}
&:after {
&:not(.name-only):after {
content: "";
position: absolute;
bottom: -7px;
@ -39,11 +37,12 @@
height: 25px;
max-height: 25px;
font-size: 16px;
margin-bottom: 2px;
}
.menu-list-split-3 {
.menu-list-item {
.menu-item {
margin-right: 2px;
&:nth-child(3n+3) {
@ -54,10 +53,14 @@
.menu-item {
position: relative;
margin-top: 2px;
margin-bottom: 2px;
padding: 3px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
&.disabled {
filter: brightness(0.7);
cursor: not-allowed !important;

19
src/views/room/widgets/context-menu/ContextMenuView.tsx
View File

@ -1,10 +1,11 @@
import { FixedSizeStack } from 'nitro-renderer';
import { FixedSizeStack, Nitro } from 'nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api';
import { ContextMenuViewProps } from './ContextMenuView.types';
const fadeDelay = 3000;
const fadeLength = 75;
const SPACE_AROUND_EDGES = 10;
export const ContextMenuView: FC<ContextMenuViewProps> = props =>
{
@ -46,9 +47,21 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
if(!bounds || !elementRef.current) return;
let left = Math.round((bounds.left + (bounds.width / 2)) - (elementRef.current.offsetWidth / 2));
let top = Math.round((bounds.top - elementRef.current.offsetHeight) + 20);
const maxLeft = ((Nitro.instance.width - elementRef.current.offsetWidth) - SPACE_AROUND_EDGES);
const maxTop = ((Nitro.instance.height - elementRef.current.offsetHeight) - SPACE_AROUND_EDGES);
if(left < SPACE_AROUND_EDGES) left = SPACE_AROUND_EDGES;
else if(left > maxLeft) left = maxLeft;
if(top < SPACE_AROUND_EDGES) top = SPACE_AROUND_EDGES;
else if(top > maxTop) top = maxTop;
setPos({
x: Math.round(((bounds.left + (bounds.width / 2)) - (elementRef.current.offsetWidth / 2))),
y: Math.round((bounds.top - elementRef.current.offsetHeight) + 10)
x: left,
y: top
});
}, [ objectId, category, isFading, close ]);