Start context menu style

src/assets/styles/bootstrap/_variables.scss

@@ -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

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

@@ -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>
     );

src/views/room/widgets/context-menu/ContextMenu.scss

@@ -1,6 +1,51 @@
 .nitro-context-menu {
+    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;
 
-    @import './views/header/ContextMenuHeaderView';
+    &:after {
-    @import './views/list/ContextMenuListView';
+        content: "";
-    @import './views/list-item/ContextMenuListItemView';
+        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;
+                }
+            }
+        }
+    }
 }

src/views/room/widgets/context-menu/ContextMenuView.tsx

@@ -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>
     );

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

@@ -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>
     );

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

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

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

@@ -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>
     );

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

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