Toolbar and Chat Input updates

src/assets/styles/icons.scss

@@ -74,10 +74,28 @@ i {
             height: 21px;
         }
 
+        &.icon-me-talents {
+            background-image: url('../images/toolbar/icons/me-menu/talents.png');
+            width: 32px;
+            height: 30px;
+        }
+
+        &.icon-me-helper-tool {
+            background-image: url('../images/toolbar/icons/me-menu/helper-tool.png');
+            width: 32px;
+            height: 30px;
+        }
+
         &.icon-me-profile {
             background-image: url('../images/toolbar/icons/me-menu/profile.png');
-            width: 21px;
+            width: 32px;
-            height: 21px;
+            height: 30px;
+        }
+
+        &.icon-me-forums {
+            background-image: url('../images/toolbar/icons/me-menu/forums.png');
+            width: 32px;
+            height: 30px;
         }
 
         &.icon-me-rooms {

src/views/room/widgets/chat-input/ChatInputView.scss

@@ -1,20 +1,27 @@
+@media only screen and (max-width: 600px) {
+    .nitro-chat-input {
+        bottom: 65px !important;
+    }
+}
+
 .nitro-chat-input {
     position: fixed;
     display: flex;
-    bottom: 57px;
+    bottom: 9px;
-    left: 55px;
+    left: 50%;
+    transform: translateX(-50%);
     pointer-events: none;
     z-index: $chatinput-zindex;
 
     .chatinput-container {
         position: relative;
-        height: 30px;
+        height: 40px;
         border-radius: 8px;
-        border: 1.5px solid rgb(0, 0, 0);
+        border: 2px solid rgb(0, 0, 0);
         background: #EDEDED;
         pointer-events: all;
-        padding-right:30px;
+        padding-right: 30px;
-        width:100%;
+        width: 100%;
 
         .input-sizer {
             display: inline-grid;
@@ -22,7 +29,7 @@
             align-items: center;
             position: relative;
             height: 100%;
-            padding:0 10px;
+            padding: 0 10px;
             
             &::after,
             input,
@@ -30,7 +37,6 @@
               width: auto;
               min-width: 1em;
               grid-area: 1 / 2;
-              font: inherit;
               margin: 0;
               resize: none;
               background: none;
@@ -38,7 +44,6 @@
               border: none;
             }
             
-            
             &::after {
               content: attr(data-value) '  ';
               visibility: hidden;
@@ -55,21 +60,6 @@
             background: transparent;
         }
 
-        &:after {
-            content: "";
-            position: absolute;
-            top:0;
-            bottom:0;
-            margin: auto;
-            left: -5.5px;
-            height: 9px;
-            width: 9px;
-            background: #EDEDED;
-            transform: rotate(45deg);
-            border-left: 1.5px solid $black;
-            border-bottom: 1.5px solid $black;
-        }
-
         &:before {
             content: "";
             position: absolute;

src/views/room/widgets/chat-input/ChatInputView.tsx

@@ -14,6 +14,7 @@ export const ChatInputView: FC<ChatInputViewProps> = props =>
     const [ chatValue, setChatValue ] = useState<string>('');
     const [ selectedUsername, setSelectedUsername ] = useState('');
     const [ isTyping, setIsTyping ] = useState(false);
+    const [ maxCharacters, setMaxCharacters ] = useState<number>(100);
 
     const inputRef = createRef<HTMLInputElement>();
 
@@ -138,7 +139,7 @@ export const ChatInputView: FC<ChatInputViewProps> = props =>
         <div className="nitro-chat-input">
             <div className="chatinput-container">
                 <div className="input-sizer">
-                    <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } onChange={ event => { event.target.parentElement.dataset.value = event.target.value; setChatValue(event.target.value) } } onMouseDown={ onInputMouseDownEvent } />
+                    <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxCharacters } onChange={ event => { event.target.parentElement.dataset.value = event.target.value; setChatValue(event.target.value) } } onMouseDown={ onInputMouseDownEvent } />
                     {/* <input #chatInputView type="text" class="chat-input" placeholder="{{ 'widgets.chatinput.default' | translate }}" (input)="chatInputView.parentElement.dataset.value = chatInputView.value" [disabled]="floodBlocked" [maxLength]="inputMaxLength" /> */}
                 </div>
             </div>

src/views/toolbar/ToolbarView.scss

@@ -3,18 +3,24 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 35px;
+    height: 59px;
     z-index: $toolbar-zindex;
     
     .nitro-toolbar {
         height: 100%;
         pointer-events: all;
-        background-color: rgba(#33312C, 1);
+        background: rgba(20, 20, 20, .95);
+        border-top: 1px solid #101010;
+        box-shadow: inset 0px 2px rgba(255, 255, 255, .1);
 
         .navigation-items {
             display: flex;
             align-items: center;
 
+            &.navigation-avatar {
+                border-right: 1px solid rgba(0, 0, 0, .3);
+            }
+
             .navigation-item {
                 display: flex;
                 align-items: center;
@@ -23,20 +29,31 @@
                 width: 50px;
                 margin: 0 1px;
 
-                .icon,
+                .toolbar-avatar {
-                .avatar-image {
+                    height: 50px;
-                    position: relative;
-                    top: -12px;
-                    filter: drop-shadow(2px 1px 0 rgba($white, 1)) drop-shadow(-2px 1px 0 rgba($white, 1)) drop-shadow(0 -2px 0 rgba($white, 1));
                     
-                    &:active {
+                    .avatar-image {
-                        -webkit-transform: translate(0, 1px);
+                        margin-left: -5px;
-                        transform: translate(0, 1px);
+                        margin-top: -20px;
+                    }
+
+                    &:hover, &.active {
+                        height: 53px;
+                    }
+                }
+
+                .icon,
+                .toolbar-avatar {
+                    transition: transform .2s ease-out;
+
+                    &:hover, &.active {
+                        -webkit-transform: translate(0, -3px);
+                        transform: translate(0, -3px);
+                        filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
                     }
                 }
 
                 .avatar-image {
-                    top: -40px;
                     pointer-events: none;
                 }
 
@@ -99,5 +116,6 @@
     max-width: 120px;
     max-height: 150px;
     z-index: 500;
-    filter: drop-shadow(2px 1px 0 rgba($white, 1)) drop-shadow(-2px 1px 0 rgba($white, 1)) drop-shadow(0 -2px 0 rgba($white, 1));
 }
+
+@import './me/ToolbarMeView';

src/views/toolbar/ToolbarView.tsx

@@ -1,17 +1,22 @@
+import classNames from 'classnames';
 import { UserInfoEvent } from 'nitro-renderer/src/nitro/communication/messages/incoming/user/data/UserInfoEvent';
 import { UserInfoDataParser } from 'nitro-renderer/src/nitro/communication/messages/parser/user/data/UserInfoDataParser';
 import { MouseEvent, useCallback, useState } from 'react';
 import { CatalogEvent, FriendListEvent, InventoryEvent, NavigatorEvent } from '../../events';
 import { dispatchUiEvent } from '../../hooks/events/ui/ui-event';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
+import { TransitionAnimation } from '../../transitions/TransitionAnimation';
+import { TransitionAnimationTypes } from '../../transitions/TransitionAnimation.types';
 import { AvatarImageView } from '../avatar-image/AvatarImageView';
+import { ToolbarMeView } from './me/ToolbarMeView';
 import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types';
 
 export function ToolbarView(props: ToolbarViewProps): JSX.Element
 {
     const { isInRoom } = props;
 
-    const [ userInfo, setUserInfo ] = useState<UserInfoDataParser>(null);
+    const [ userInfo, setUserInfo ]                 = useState<UserInfoDataParser>(null);
+    const [ expandMeToolbar, setExpandMeToolbar ]   = useState(false);
 
     const unseenInventoryCount = 0;
     const unseenFriendListCount = 0;
@@ -45,43 +50,55 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
         }
     }
 
+    function toggleMeToolbar(): void
+    {
+        setExpandMeToolbar((value) => !value);
+    }
+
     CreateMessageHook(UserInfoEvent, onUserInfoEvent);
 
     return (
-        <div className="d-flex nitro-toolbar">
+        <>
-            <div className="navigation-items me-2">
+            { expandMeToolbar && <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ false } timeout={ 300 }>
-                <div className="navigation-item">
+                <ToolbarMeView />
-                    { userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } /> }
+                </TransitionAnimation> }
-                </div>
+            <div className="d-flex nitro-toolbar py-1 px-3">
-                { (unseenAchievementsCount > 0) && (
+                <div className="navigation-items navigation-avatar pe-1 me-2">
-                    <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
-            </div>
-            <div className="navigation-items">
-                {/* { isInRoom && (
                     <div className="navigation-item">
-                        <i className="icon icon-hotelview icon-nitro-light filter-none"></i>
+                        <div className={"toolbar-avatar" + classNames({ ' active': expandMeToolbar })} onClick={ toggleMeToolbar }>
-                    </div>) } */}
+                            { userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } /> }
-                { !isInRoom && (
+                        </div>
-                    <div className="navigation-item">
+                    </div>
-                        <i className="icon icon-house"></i>
+                    { (unseenAchievementsCount > 0) && (
-                    </div>) }
+                        <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
-                <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }>
-                    <i className="icon icon-rooms"></i>
                 </div>
-                <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }>
+                <div className="navigation-items">
-                    <i className="icon icon-catalog"></i>
+                    {/* { isInRoom && (
-                </div>
+                        <div className="navigation-item">
-                <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.INVENTORY_ITEM) }>
+                            <i className="icon icon-hotelview icon-nitro-light filter-none"></i>
-                    <i className="icon icon-inventory"></i>
+                        </div>) } */}
-                    { (unseenInventoryCount > 0) && (
+                    { !isInRoom && (
-                        <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
+                        <div className="navigation-item">
-                </div>
+                            <i className="icon icon-house"></i>
-                <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.FRIEND_LIST_ITEM) }>
+                        </div>) }
-                    <i className="icon icon-friendall"></i>
+                    <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }>
-                    { (unseenFriendListCount > 0) && (
+                        <i className="icon icon-rooms"></i>
-                        <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
+                    </div>
+                    <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }>
+                        <i className="icon icon-catalog"></i>
+                    </div>
+                    <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.INVENTORY_ITEM) }>
+                        <i className="icon icon-inventory"></i>
+                        { (unseenInventoryCount > 0) && (
+                            <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
+                    </div>
+                    <div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.FRIEND_LIST_ITEM) }>
+                        <i className="icon icon-friendall"></i>
+                        { (unseenFriendListCount > 0) && (
+                            <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
+                    </div>
                 </div>
             </div>
-        </div>
+        </>
     );
 }

src/views/toolbar/me/ToolbarMeView.scss

@@ -0,0 +1,40 @@
+.nitro-toolbar-me {
+    position: absolute;
+    bottom: 10px;
+    left: 15px;
+    z-index: $toolbar-zindex;
+    background: rgba(20, 20, 20, .95);
+    border: 1px solid #101010;
+    box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1);
+    border-radius: $border-radius;
+
+    .navigation-items {
+        display: flex;
+        align-items: center;
+
+        &.navigation-avatar {
+            border-right: 1px solid rgba(0, 0, 0, .3);
+        }
+
+        .navigation-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            cursor: pointer;
+            width: 50px;
+            font-size: 11px;
+
+            .icon {
+                transition: filter .2s ease-out;
+                filter: grayscale(1);
+            }
+
+            &:hover {
+                .icon {
+                    filter: grayscale(0) drop-shadow(2px 2px 0 rgba($black, 0.8));
+                }
+            }
+        }
+    }
+}

src/views/toolbar/me/ToolbarMeView.tsx

@@ -0,0 +1,33 @@
+import { ToolbarMeViewProps } from './ToolbarMeView.types';
+
+export function ToolbarMeView(props: ToolbarMeViewProps): JSX.Element
+{
+    return (<div className="d-flex nitro-toolbar-me px-1 py-2">
+        <div className="navigation-items">
+            <div className="navigation-item">
+                <i className="icon icon-me-talents"></i>
+            </div>
+            <div className="navigation-item">
+                <i className="icon icon-me-helper-tool"></i>
+            </div>
+            <div className="navigation-item">
+                <i className="icon icon-me-achievements"></i>
+            </div>
+            <div className="navigation-item">
+                <i className="icon icon-me-profile"></i>
+            </div>
+            <div className="navigation-item">
+                <i className="icon icon-me-rooms"></i>
+            </div>
+            <div className="navigation-item">
+                <i className="icon icon-me-clothing"></i>
+            </div>
+            <div className="navigation-item">
+                <i className="icon icon-me-forums"></i>
+            </div>
+            <div className="navigation-item">
+                <i className="icon icon-me-settings"></i>
+            </div>
+        </div>
+    </div>);
+}

src/views/toolbar/me/ToolbarMeView.types.ts

@@ -0,0 +1,2 @@
+export interface ToolbarMeViewProps
+{}