diff --git a/src/assets/images/toolbar/icons/me-menu/forums.png b/src/assets/images/toolbar/icons/me-menu/forums.png new file mode 100644 index 00000000..e22426e6 Binary files /dev/null and b/src/assets/images/toolbar/icons/me-menu/forums.png differ diff --git a/src/assets/images/toolbar/icons/me-menu/helper-tool.png b/src/assets/images/toolbar/icons/me-menu/helper-tool.png new file mode 100644 index 00000000..e324611f Binary files /dev/null and b/src/assets/images/toolbar/icons/me-menu/helper-tool.png differ diff --git a/src/assets/images/toolbar/icons/me-menu/profile.png b/src/assets/images/toolbar/icons/me-menu/profile.png index d1c094b8..04964bfe 100644 Binary files a/src/assets/images/toolbar/icons/me-menu/profile.png and b/src/assets/images/toolbar/icons/me-menu/profile.png differ diff --git a/src/assets/images/toolbar/icons/me-menu/talents.png b/src/assets/images/toolbar/icons/me-menu/talents.png new file mode 100644 index 00000000..2f91dfe0 Binary files /dev/null and b/src/assets/images/toolbar/icons/me-menu/talents.png differ diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 28198f61..112bc679 100644 --- a/src/assets/styles/icons.scss +++ b/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; - 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 { diff --git a/src/views/room/widgets/chat-input/ChatInputView.scss b/src/views/room/widgets/chat-input/ChatInputView.scss index 77437b35..4578dd14 100644 --- a/src/views/room/widgets/chat-input/ChatInputView.scss +++ b/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; - 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; diff --git a/src/views/room/widgets/chat-input/ChatInputView.tsx b/src/views/room/widgets/chat-input/ChatInputView.tsx index d96300ae..0fabcb43 100644 --- a/src/views/room/widgets/chat-input/ChatInputView.tsx +++ b/src/views/room/widgets/chat-input/ChatInputView.tsx @@ -14,6 +14,7 @@ export const ChatInputView: FC = props => const [ chatValue, setChatValue ] = useState(''); const [ selectedUsername, setSelectedUsername ] = useState(''); const [ isTyping, setIsTyping ] = useState(false); + const [ maxCharacters, setMaxCharacters ] = useState(100); const inputRef = createRef(); @@ -138,7 +139,7 @@ export const ChatInputView: FC = props =>
- { event.target.parentElement.dataset.value = event.target.value; setChatValue(event.target.value) } } onMouseDown={ onInputMouseDownEvent } /> + { event.target.parentElement.dataset.value = event.target.value; setChatValue(event.target.value) } } onMouseDown={ onInputMouseDownEvent } /> {/* */}
diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss index d128a3aa..26d22d2e 100644 --- a/src/views/toolbar/ToolbarView.scss +++ b/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, - .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'; diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx index cf3f7d66..c8b87457 100644 --- a/src/views/toolbar/ToolbarView.tsx +++ b/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(null); + const [ userInfo, setUserInfo ] = useState(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 ( -
-
-
- { userInfo && } -
- { (unseenAchievementsCount > 0) && ( -
{ unseenAchievementsCount }
) } -
-
- {/* { isInRoom && ( + <> + { expandMeToolbar && + + } +
+
- -
) } */} - { !isInRoom && ( -
- -
) } -
handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }> - +
+ { userInfo && } +
+
+ { (unseenAchievementsCount > 0) && ( +
{ unseenAchievementsCount }
) }
-
handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }> - -
-
handleToolbarItemClick(event, ToolbarViewItems.INVENTORY_ITEM) }> - - { (unseenInventoryCount > 0) && ( -
{ unseenInventoryCount }
) } -
-
handleToolbarItemClick(event, ToolbarViewItems.FRIEND_LIST_ITEM) }> - - { (unseenFriendListCount > 0) && ( -
{ unseenFriendListCount }
) } +
+ {/* { isInRoom && ( +
+ +
) } */} + { !isInRoom && ( +
+ +
) } +
handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }> + +
+
handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }> + +
+
handleToolbarItemClick(event, ToolbarViewItems.INVENTORY_ITEM) }> + + { (unseenInventoryCount > 0) && ( +
{ unseenInventoryCount }
) } +
+
handleToolbarItemClick(event, ToolbarViewItems.FRIEND_LIST_ITEM) }> + + { (unseenFriendListCount > 0) && ( +
{ unseenFriendListCount }
) } +
-
+ ); } diff --git a/src/views/toolbar/me/ToolbarMeView.scss b/src/views/toolbar/me/ToolbarMeView.scss new file mode 100644 index 00000000..0815a72a --- /dev/null +++ b/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)); + } + } + } + } +} diff --git a/src/views/toolbar/me/ToolbarMeView.tsx b/src/views/toolbar/me/ToolbarMeView.tsx new file mode 100644 index 00000000..6308d718 --- /dev/null +++ b/src/views/toolbar/me/ToolbarMeView.tsx @@ -0,0 +1,33 @@ +import { ToolbarMeViewProps } from './ToolbarMeView.types'; + +export function ToolbarMeView(props: ToolbarMeViewProps): JSX.Element +{ + return (
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
); +} diff --git a/src/views/toolbar/me/ToolbarMeView.types.ts b/src/views/toolbar/me/ToolbarMeView.types.ts new file mode 100644 index 00000000..a9d8cff7 --- /dev/null +++ b/src/views/toolbar/me/ToolbarMeView.types.ts @@ -0,0 +1,2 @@ +export interface ToolbarMeViewProps +{}