nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02: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 { .nitro-context-menu {
width: 150px; width: 125px;
max-width: 150px; max-width: 125px;
padding: 2px; padding: 2px;
background-color: #1c323f; background-color: #1c323f;
border: 2px solid rgba($white, 0.5); border: 2px solid rgba($white, 0.5);
@ -9,16 +9,14 @@
z-index: $context-menu-zindex; z-index: $context-menu-zindex;
&.name-only { &.name-only {
background-color: rgba($black, 0.7); background-color: rgba($black, 0.5);
padding: 1px 8px; padding: 1px 8px;
min-width: 60px;
width: unset; width: unset;
max-width: unset;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
} }
&:after { &:not(.name-only):after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -7px; bottom: -7px;
@ -39,11 +37,12 @@
height: 25px; height: 25px;
max-height: 25px; max-height: 25px;
font-size: 16px; font-size: 16px;
margin-bottom: 2px;
} }
.menu-list-split-3 { .menu-list-split-3 {
.menu-list-item { .menu-item {
margin-right: 2px; margin-right: 2px;
&:nth-child(3n+3) { &:nth-child(3n+3) {
@ -54,10 +53,14 @@
.menu-item { .menu-item {
position: relative; position: relative;
margin-top: 2px; margin-bottom: 2px;
padding: 3px; padding: 3px;
overflow: hidden; overflow: hidden;
&:last-child {
margin-bottom: 0;
}
&.disabled { &.disabled {
filter: brightness(0.7); filter: brightness(0.7);
cursor: not-allowed !important; 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 { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api'; import { GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api';
import { ContextMenuViewProps } from './ContextMenuView.types'; import { ContextMenuViewProps } from './ContextMenuView.types';
const fadeDelay = 3000; const fadeDelay = 3000;
const fadeLength = 75; const fadeLength = 75;
const SPACE_AROUND_EDGES = 10;
export const ContextMenuView: FC<ContextMenuViewProps> = props => export const ContextMenuView: FC<ContextMenuViewProps> = props =>
{ {
@ -46,9 +47,21 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
if(!bounds || !elementRef.current) return; 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({ setPos({
x: Math.round(((bounds.left + (bounds.width / 2)) - (elementRef.current.offsetWidth / 2))), x: left,
y: Math.round((bounds.top - elementRef.current.offsetHeight) + 10) y: top
}); });
}, [ objectId, category, isFading, close ]); }, [ objectId, category, isFading, close ]);