mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-30 00:50:50 +01:00
Toolbar and Chat Input updates
This commit is contained in:
MyNameIsBatman
parent
0e07a6d500
commit
f93563026f
BIN
src/assets/images/toolbar/icons/me-menu/forums.png
Normal file
BIN
src/assets/images/toolbar/icons/me-menu/forums.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 B |
BIN
src/assets/images/toolbar/icons/me-menu/helper-tool.png
Normal file
BIN
src/assets/images/toolbar/icons/me-menu/helper-tool.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 468 B |
BIN
src/assets/images/toolbar/icons/me-menu/talents.png
Normal file
BIN
src/assets/images/toolbar/icons/me-menu/talents.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 B |
@ -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;
|
||||
height: 21px;
|
||||
width: 32px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&.icon-me-forums {
|
||||
background-image: url('../images/toolbar/icons/me-menu/forums.png');
|
||||
width: 32px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&.icon-me-rooms {
|
||||
|
||||
@ -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;
|
||||
left: 55px;
|
||||
bottom: 9px;
|
||||
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;
|
||||
width:100%;
|
||||
padding-right: 30px;
|
||||
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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
.avatar-image {
|
||||
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));
|
||||
.toolbar-avatar {
|
||||
height: 50px;
|
||||
|
||||
.avatar-image {
|
||||
margin-left: -5px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
-webkit-transform: translate(0, 1px);
|
||||
transform: translate(0, 1px);
|
||||
&: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';
|
||||
|
||||
@ -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">
|
||||
<div className="navigation-item">
|
||||
{ userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } /> }
|
||||
</div>
|
||||
{ (unseenAchievementsCount > 0) && (
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
|
||||
</div>
|
||||
<div className="navigation-items">
|
||||
{/* { isInRoom && (
|
||||
<>
|
||||
{ expandMeToolbar && <TransitionAnimation className="" type={ TransitionAnimationTypes.FADE_UP } inProp={ false } timeout={ 300 }>
|
||||
<ToolbarMeView />
|
||||
</TransitionAnimation> }
|
||||
<div className="d-flex nitro-toolbar py-1 px-3">
|
||||
<div className="navigation-items navigation-avatar pe-1 me-2">
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-hotelview icon-nitro-light filter-none"></i>
|
||||
</div>) } */}
|
||||
{ !isInRoom && (
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-house"></i>
|
||||
</div>) }
|
||||
<div className="navigation-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }>
|
||||
<i className="icon icon-rooms"></i>
|
||||
<div className={"toolbar-avatar" + classNames({ ' active': expandMeToolbar })} onClick={ toggleMeToolbar }>
|
||||
{ userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } /> }
|
||||
</div>
|
||||
</div>
|
||||
{ (unseenAchievementsCount > 0) && (
|
||||
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</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 className="navigation-items">
|
||||
{/* { isInRoom && (
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-hotelview icon-nitro-light filter-none"></i>
|
||||
</div>) } */}
|
||||
{ !isInRoom && (
|
||||
<div className="navigation-item">
|
||||
<i className="icon icon-house"></i>
|
||||
</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) }>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
40
src/views/toolbar/me/ToolbarMeView.scss
Normal file
40
src/views/toolbar/me/ToolbarMeView.scss
Normal file
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
src/views/toolbar/me/ToolbarMeView.tsx
Normal file
33
src/views/toolbar/me/ToolbarMeView.tsx
Normal file
@ -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>);
|
||||
}
|
||||
2
src/views/toolbar/me/ToolbarMeView.types.ts
Normal file
2
src/views/toolbar/me/ToolbarMeView.types.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export interface ToolbarMeViewProps
|
||||
{}
|
||||
Loading…
Reference in New Issue
Block a user