nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 21:36:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Start context menu style

Browse Source
This commit is contained in:
Bill 2021-06-25 03:55:45 -04:00
parent 083f5ff0f3
commit d601507d38
11 changed files with 134 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/styles/bootstrap/_variables.scss
View File

@ -74,6 +74,10 @@ $primary: #1E7295 !default;
$secondary: #185D79 !default;
$tertiary: #2DABC2 !default;
$quaternary: #2B91A7 !default;
$mirage: #131e25 !default;
$aztec: #0d171d !default;
$cello-light: #21516e !default;
$cello-dark: #1e465e !default;
$success: $green !default;
$info: $cyan !default;
@ -86,8 +90,20 @@ $light-dark: $gray-800 !default;
// scss-docs-end theme-color-variables
$bg-tertiary-split-background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%) !default;
$bg-mirage-split-background: repeating-linear-gradient($mirage, $mirage 50%, $aztec 50%, $aztec 100%) !default;
$bg-cello-split-background: repeating-linear-gradient($cello-light, $cello-light 50%, $cello-dark 50%, $cello-dark 100%) !default;
.bg-tertiary-split {
background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
background: $bg-tertiary-split-background;
}
.bg-mirage-split {
background: $bg-mirage-split-background;
}
.bg-cello-split {
background: $bg-cello-split-background;
}
// scss-docs-start theme-colors-map

59
src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
View File

@ -110,7 +110,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
<ContextMenuHeaderView>
{ userData.name }
</ContextMenuHeaderView>
<ContextMenuListView>
<ContextMenuListView columns={ (mode === MODE_SIGNS) ? 4 : 1 }>
{ (mode === MODE_NORMAL) &&
<>
<ContextMenuListItemView onClick={ event => processAction('decorate') }>
@ -193,6 +193,63 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
{ LocalizeText('generic.back') }
</ContextMenuListItemView>
</> }
{ (mode === MODE_SIGNS) &&
<>
<ContextMenuListItemView onClick={ event => processAction('sign_1') }>
1
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_2') }>
2
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_3') }>
3
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_4') }>
4
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_5') }>
5
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_6') }>
6
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_7') }>
7
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_8') }>
8
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_9') }>
9
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_10') }>
10
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_0') }>
0
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_15') }>
<i className="icon icon-sign-smile" />
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_12') }>
<i className="icon icon-sign-skull" />
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_14') }>
<i className="icon icon-sign-soccer" />
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_17') }>
<i className="icon icon-sign-yellow" />
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_16') }>
<i className="icon icon-sign-red" />
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_13') }>
<i className="icon icon-sign-exclamation" />
</ContextMenuListItemView>
<ContextMenuListItemView onClick={ event => processAction('sign_11') }>
<i className="icon icon-sign-heart" />
</ContextMenuListItemView>
</> }
</ContextMenuListView>
</ContextMenuView>
);

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

@ -1,6 +1,51 @@
.nitro-context-menu {
@import './views/header/ContextMenuHeaderView';
@import './views/list/ContextMenuListView';
@import './views/list-item/ContextMenuListItemView';
width: 150px;
max-width: 150px;
padding: 2px;
background-color: #1c323f;
border: 2px solid rgba($white, 0.5);
border-radius: $border-radius;
font-size: $font-size-sm;
&:after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
right: 0;
margin: auto;
height: 10px;
width: 10px;
transform: rotate(45deg);
border-color: transparent rgba($white, 0.5) rgba($white, 0.5) transparent;
border-style: solid;
border-width: 6px;
}
.menu-header {
background-color: #3d5f6e;
color: $white;
height: 25px;
max-height: 25px;
}
.menu-list {
margin: 0;
.menu-list-item-container {
margin-top: 2px;
.menu-list-item {
height: 24px;
max-height: 24px;
padding: 3px;
background: $bg-mirage-split-background;
cursor: pointer;
&:hover {
background: $bg-cello-split-background;
}
}
}
}
}

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

@ -8,7 +8,7 @@ const fadeLength = 75;
export const ContextMenuView: FC<ContextMenuViewProps> = props =>
{
const { objectId = -1, category = -1, fades = false, close = null, children = null } = props;
const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: -1, y: -1});
const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: null, y: null });
const [ opacity, setOpacity ] = useState(1);
const [ isFading, setIsFading ] = useState(false);
const [ fadeTime, setFadeTime ] = useState(0);
@ -73,7 +73,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
}, [ fades ]);
return (
<div ref={ elementRef } className={ 'nitro-context-menu position-absolute ' + (pos.x > -1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y, opacity: opacity } }>
<div ref={ elementRef } className={ 'position-absolute nitro-context-menu ' + (pos.x !== null ? 'visible' : 'invisible') } style={ { left: (pos.x || 0), top: (pos.y || 0), opacity: opacity } }>
{ children }
</div>
);

0
src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.scss
View File

2
src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx
View File

@ -6,7 +6,7 @@ export const ContextMenuHeaderView: FC<ContextMenuHeaderViewProps> = props =>
const { children = null } = props;
return (
<div>
<div className="d-flex justify-content-center align-items-center menu-header p-1">
{ children }
</div>
);

0
src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.scss
View File

6
src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
View File

@ -6,8 +6,10 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
const { onClick = null, children = null } = props;
return (
<div className="" onClick={ onClick }>
{ children }
<div className="col menu-list-item-container" onClick={ onClick }>
<div className="d-flex justify-content-center align-items-center menu-list-item">
{ children }
</div>
</div>
)
}

0
src/views/room/widgets/context-menu/views/list/ContextMenuListView.scss
View File

4
src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx
View File

@ -3,10 +3,10 @@ import { ContextMenuListViewProps } from './ContextMenuListView.types';
export const ContextMenuListView: FC<ContextMenuListViewProps> = props =>
{
const { children = null } = props;
const { columns = 1, children = null } = props;
return (
<div>
<div className={ `row row-cols-${ columns } menu-list g-1` }>
{ children }
</div>
);

2
src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts
View File

@ -1,4 +1,4 @@
export interface ContextMenuListViewProps
{
columns?: number;
}