From c4fc67ac191fe736c9fc1744c94f65f0c6ab06d3 Mon Sep 17 00:00:00 2001 From: Layne Date: Wed, 13 Apr 2022 02:28:13 -0400 Subject: [PATCH] collapsable context menu --- .../avatar-info/AvatarInfoUseProductView.tsx | 2 +- .../AvatarInfoWidgetAvatarView.tsx | 2 +- .../AvatarInfoWidgetOwnAvatarView.tsx | 3 ++- .../AvatarInfoWidgetOwnPetView.tsx | 2 +- .../avatar-info/AvatarInfoWidgetPetView.tsx | 2 +- .../AvatarInfoWidgetRentableBotView.tsx | 2 +- .../widgets/context-menu/ContextMenu.scss | 20 ++++++++++++++- .../context-menu/ContextMenuCaretView.tsx | 25 +++++++++++++++++++ .../widgets/context-menu/ContextMenuView.tsx | 23 ++++++++++++++--- 9 files changed, 71 insertions(+), 10 deletions(-) create mode 100644 src/components/room/widgets/context-menu/ContextMenuCaretView.tsx diff --git a/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx index 9f308dd9..1dce4787 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx @@ -87,7 +87,7 @@ export const AvatarInfoUseProductView: FC = props }, [ item, updateConfirmingProduct ]); return ( - + { item.name } diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx index c655baef..7a919b80 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx @@ -213,7 +213,7 @@ export const AvatarInfoWidgetAvatarView: FC = p }, [ userData ]); return ( - + GetUserProfile(userData.webID) }> { userData.name } diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx index 700289f7..00aa89c0 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx @@ -121,7 +121,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC + + GetUserProfile(userData.webID) }> { userData.name } diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx index bb119714..56ebac5c 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx @@ -142,7 +142,7 @@ export const AvatarInfoWidgetOwnPetView: FC = p }, [ petData ]); return ( - + { petData.name } diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx index 60f19fa3..93faffc3 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx @@ -109,7 +109,7 @@ export const AvatarInfoWidgetPetView: FC = props = }, [ petData ]); return ( - + { petData.name } diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx index 73d9e985..dcc452e4 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx @@ -136,7 +136,7 @@ export const AvatarInfoWidgetRentableBotView: FC + { rentableBotData.name } diff --git a/src/components/room/widgets/context-menu/ContextMenu.scss b/src/components/room/widgets/context-menu/ContextMenu.scss index e57027c4..b3e67f67 100644 --- a/src/components/room/widgets/context-menu/ContextMenu.scss +++ b/src/components/room/widgets/context-menu/ContextMenu.scss @@ -20,9 +20,11 @@ font-size: 18px; } - &:not(.name-only) { + &:not(.name-only):not(.menu-hidden) { min-width: 125px; + } + &:not(.name-only) { &:after { content: ""; position: absolute; @@ -49,6 +51,22 @@ margin-bottom: 2px; } + &.menu-hidden { + .menu-footer { + padding-top:2px; + padding-bottom:0; + } + } + + .menu-footer { + color: $white; + font-size: 16px; + width:100%; + min-width: 25px; + padding-bottom:2px; + cursor: pointer; + } + .menu-list-split-3 { .menu-item { diff --git a/src/components/room/widgets/context-menu/ContextMenuCaretView.tsx b/src/components/room/widgets/context-menu/ContextMenuCaretView.tsx new file mode 100644 index 00000000..4cfb3fee --- /dev/null +++ b/src/components/room/widgets/context-menu/ContextMenuCaretView.tsx @@ -0,0 +1,25 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { FC, useMemo } from 'react'; +import { Flex, FlexProps } from '../../../../common'; + +interface CaretViewProps extends FlexProps +{ + collapsed?: boolean; +} +export const ContextMenuCaretView: FC = props => +{ + const { justifyContent = 'center', alignItems = 'center', classNames = [], collapsed = true, ...rest } = props; + + const getClassNames = useMemo(() => + { + const newClassNames: string[] = [ 'menu-footer' ]; + + if(classNames.length) newClassNames.push(...classNames); + + return newClassNames; + }, [ classNames ]); + + return + + +} diff --git a/src/components/room/widgets/context-menu/ContextMenuView.tsx b/src/components/room/widgets/context-menu/ContextMenuView.tsx index 3700f79d..344e0f2b 100644 --- a/src/components/room/widgets/context-menu/ContextMenuView.tsx +++ b/src/components/room/widgets/context-menu/ContextMenuView.tsx @@ -2,6 +2,7 @@ import { FixedSizeStack, NitroPoint, NitroRectangle, RoomObjectType } from '@nit import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { GetNitroInstance, GetRoomObjectBounds, GetRoomObjectScreenLocation, GetRoomSession, GetTicker } from '../../../../api'; import { Base, BaseProps } from '../../../../common'; +import { ContextMenuCaretView } from './ContextMenuCaretView'; interface ContextMenuViewProps extends BaseProps { @@ -10,6 +11,7 @@ interface ContextMenuViewProps extends BaseProps userType?: number; fades?: boolean; close: () => void; + collapsable?: boolean; } const LOCATION_STACK_SIZE: number = 25; @@ -18,9 +20,11 @@ const fadeDelay = 3000; const fadeLength = 75; const SPACE_AROUND_EDGES = 10; +let COLLAPSED = false; + export const ContextMenuView: FC = props => { - const { objectId = -1, category = -1, userType = -1, fades = false, close = null, position = 'absolute', classNames = [], style = {}, ...rest } = props; + const { objectId = -1, category = -1, userType = -1, fades = false, close = null, position = 'absolute', classNames = [], style = {}, children = null, collapsable = false, ...rest } = props; const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: null, y: null }); const [ deltaYStack, setDeltaYStack ] = useState(null); const [ currentDeltaY, setCurrentDeltaY ] = useState(-1000000); @@ -30,6 +34,8 @@ export const ContextMenuView: FC = props => const [ isFrozen, setIsFrozen ] = useState(false); const elementRef = useRef(); + const [ collapsed, setCollapsed ] = useState(COLLAPSED); + const getOffset = useCallback((bounds: NitroRectangle) => { let height = -(elementRef.current.offsetHeight); @@ -118,13 +124,15 @@ export const ContextMenuView: FC = props => const getClassNames = useMemo(() => { const newClassNames: string[] = [ 'nitro-context-menu' ]; + + if (collapsed) newClassNames.push('menu-hidden'); newClassNames.push((pos.x !== null) ? 'visible' : 'invisible'); if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ pos, classNames ]); + }, [ pos, classNames, collapsed ]); const getStyle = useMemo(() => { @@ -170,6 +178,15 @@ export const ContextMenuView: FC = props => return () => clearTimeout(timeout); }, [ fades ]); + - return setIsFrozen(true) } onMouseOut={ event => setIsFrozen(false) } { ...rest } />; + const toggleCollapse = () => + { + COLLAPSED = !COLLAPSED; + setCollapsed(COLLAPSED) + } + return setIsFrozen(true) } onMouseOut={ event => setIsFrozen(false) } { ...rest }> + { !(collapsable && COLLAPSED) && children } + { collapsable && toggleCollapse() } collapsed={ collapsed } /> } + ; }