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

Finish Chat History Styling (for now)

Browse Source
This commit is contained in:
MyNameIsBatman 2021-12-22 21:13:30 -03:00
parent a97ca4b040
commit 92e3719ac5
3 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/icons/small-room.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B

6
src/assets/styles/icons.scss
View File

@ -303,6 +303,12 @@
height: 15px; height: 15px;
} }
&.icon-small-room {
background: url("../images/icons/small-room.png");
width: 17px;
height: 16px;
}
&.icon-arrows { &.icon-arrows {
background: url("../images/icons/arrows.png"); background: url("../images/icons/arrows.png");
width: 17px; width: 17px;

21
src/views/chat-history/ChatHistoryView.tsx
View File

@ -80,18 +80,19 @@ export const ChatHistoryView: FC<{}> = props =>
parent={props.parent} parent={props.parent}
rowIndex={props.index} rowIndex={props.index}
> >
<div key={props.key} style={props.style} className="row chathistory-entry justify-content-start"> <div key={props.key} style={props.style} className="chathistory-entry justify-content-start">
{(item.type === ChatEntryType.TYPE_CHAT) && {(item.type === ChatEntryType.TYPE_CHAT) &&
<div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}> <div className={`p-1 d-flex gap-1 ${isDark ? 'dark' : 'light'}`}>
<div className="p-1">{item.timestamp}</div> <div className="text-muted">{item.timestamp}</div>
<div className="p-1 fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} /> <div className="cursor-pointer d-flex text-nowrap" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
<div className="p-1 text-break text-wrap">{item.message}</div> <div className="text-break text-wrap flex-grow-1">{item.message}</div>
</div> </div>
} }
{(item.type === ChatEntryType.TYPE_ROOM_INFO) && {(item.type === ChatEntryType.TYPE_ROOM_INFO) &&
<div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}> <div className={`p-1 d-flex gap-1 ${isDark ? 'dark' : 'light'}`}>
<div className="p-1">{item.timestamp}</div> <div className="text-muted">{item.timestamp}</div>
<div className="p-1 fw-bold cursor-pointer">{item.name}</div> <i className="icon icon-small-room" />
<div className="cursor-pointer text-break text-wrap">{item.name}</div>
</div> </div>
} }
@ -134,9 +135,9 @@ export const ChatHistoryView: FC<{}> = props =>
<ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }> <ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
<ChatHistoryMessageHandler /> <ChatHistoryMessageHandler />
{isVisible && {isVisible &&
<NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false } theme={'dark'} > <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false } theme={'dark'} >
<NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } theme={'dark'}/> <NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } theme={'dark'}/>
<NitroCardContentView className="chat-history-content" theme={'dark'}> <NitroCardContentView className="chat-history-content p-0" theme={'dark'}>
<div className="row w-100 h-100 chat-history-container"> <div className="row w-100 h-100 chat-history-container">
<AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}> <AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
{({ height, width }) => {({ height, width }) =>