nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update chat input

Browse Source
This commit is contained in:
Bill 2021-05-12 04:52:24 -04:00
parent b1f8ab3c9f
commit d783b9b2d1
4 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/room/widgets/chat-input/ChatInputView.scss
View File

@ -1,15 +1,13 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.nitro-chat-input { .nitro-chat-input {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 65px !important; bottom: 65px !important;
} }
} }
.nitro-chat-input { .nitro-chat-input {
position: fixed;
display: flex;
bottom: 9px;
left: 50%;
transform: translateX(-50%);
pointer-events: none; pointer-events: none;
z-index: $chatinput-zindex; z-index: $chatinput-zindex;

4
src/views/room/widgets/chat-input/ChatInputView.tsx
View File

@ -1,4 +1,5 @@
import { createRef, FC, MouseEvent, useCallback, useEffect, useState } from 'react'; import { createRef, FC, MouseEvent, useCallback, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { SendChatTypingMessage } from '../../../../api/nitro/session/SendChatTypingMessage'; import { SendChatTypingMessage } from '../../../../api/nitro/session/SendChatTypingMessage';
import { LocalizeText } from '../../../../utils/LocalizeText'; import { LocalizeText } from '../../../../utils/LocalizeText';
import { ChatInputViewProps } from './ChatInputView.types'; import { ChatInputViewProps } from './ChatInputView.types';
@ -136,6 +137,7 @@ export const ChatInputView: FC<ChatInputViewProps> = props =>
}, [ chatValue ]); }, [ chatValue ]);
return ( return (
createPortal(
<div className="nitro-chat-input"> <div className="nitro-chat-input">
<div className="chatinput-container"> <div className="chatinput-container">
<div className="input-sizer"> <div className="input-sizer">
@ -143,6 +145,6 @@ export const ChatInputView: FC<ChatInputViewProps> = props =>
{/* <input #chatInputView type="text" class="chat-input" placeholder="{{ 'widgets.chatinput.default' | translate }}" (input)="chatInputView.parentElement.dataset.value = chatInputView.value" [disabled]="floodBlocked" [maxLength]="inputMaxLength" /> */} {/* <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>
</div> </div>
</div> </div>, document.getElementById('toolbar-chat-input-container'))
); );
} }

6
src/views/toolbar/ToolbarView.scss
View File

@ -3,7 +3,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 59px; height: 55px;
z-index: $toolbar-zindex; z-index: $toolbar-zindex;
.nitro-toolbar { .nitro-toolbar {
@ -13,6 +13,10 @@
border-top: 1px solid #101010; border-top: 1px solid #101010;
box-shadow: inset 0px 2px rgba(255, 255, 255, .1); box-shadow: inset 0px 2px rgba(255, 255, 255, .1);
#toolbar-chat-input-container {
margin-left: 25px;
}
.navigation-items { .navigation-items {
display: flex; display: flex;
align-items: center; align-items: center;

1
src/views/toolbar/ToolbarView.tsx
View File

@ -98,6 +98,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
<div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) } <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
</div> </div>
</div> </div>
<div id="toolbar-chat-input-container" className="d-flex align-items-center" />
</div> </div>
</> </>
); );