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

style changes

Browse Source
This commit is contained in:
dank074 2021-10-23 19:00:48 -05:00
parent ec03987c27
commit 0d57e407aa
12 changed files with 52 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/layout/card/NitroCardView.scss
View File

@ -4,6 +4,17 @@ $nitro-card-tabs-height: 33px;
.nitro-card {
pointer-events: all;
resize: both;
&.theme-dark {
padding: 2px;
background-color: #1C323F;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 0.25rem;
}
&.theme-primary {
border: $border-width solid $border-color;
}
}
.nitro-card-responsive {
@ -15,10 +26,6 @@ $nitro-card-tabs-height: 33px;
pointer-events: none;
overflow: hidden;
.theme-primary {
border: $border-width solid $border-color;
}
@include media-breakpoint-down(lg) {
.draggable-window {

4
src/layout/card/content/NitroCardContentView.scss
View File

@ -3,6 +3,10 @@
padding-top: $container-padding-x;
padding-bottom: $container-padding-x;
overflow: auto;
&.theme-dark {
background-color: #1C323F !important;
}
}
@include media-breakpoint-down(lg) {

4
src/layout/card/content/NitroCardContentView.tsx
View File

@ -4,11 +4,11 @@ import { NitroCardContentViewProps } from './NitroCardContextView.types';
export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
{
const { children = null, className = '', ...rest } = props;
const { theme = 'primary', children = null, className = '', ...rest } = props;
const { simple = false } = useNitroCardContext();
return (
<div className={ `container-fluid bg-light content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
<div className={ `container-fluid ${ theme === 'primary' ? 'bg-light' : ''} content-area d-flex flex-column overflow-auto theme-${theme} ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
{ children }
</div>
);

4
src/layout/card/content/NitroCardContextView.types.ts
View File

@ -2,4 +2,6 @@ import { DetailsHTMLAttributes } from 'react';
export interface NitroCardContentViewProps extends DetailsHTMLAttributes<HTMLDivElement>
{}
{
theme?: string;
}

5
src/layout/card/header/NitroCardHeaderView.scss
View File

@ -15,6 +15,11 @@
}
}
&.theme-dark {
background-color: #3d5f6e !important;
color: #fff;
}
.bg-tertiary-split {
position: relative;
border-bottom: 2px solid darken($quaternary, 5);

4
src/layout/card/header/NitroCardHeaderView.tsx
View File

@ -4,7 +4,7 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
{
const { headerText = null, onCloseClick = null } = props;
const { headerText = null, onCloseClick = null, theme= 'primary' } = props;
const { simple = false } = useNitroCardContext();
const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
@ -31,7 +31,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
return (
<div className="drag-handler container-fluid bg-primary">
<div className="row nitro-card-header overflow-hidden">
<div className={`row nitro-card-header overflow-hidden theme-${theme}`}>
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h4 text-white text-shadow header-text">{ headerText }</div>
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>

1
src/layout/card/header/NitroCardHeaderView.types.ts
View File

@ -3,5 +3,6 @@ import { MouseEvent } from 'react';
export interface NitroCardHeaderViewProps
{
headerText: string;
theme?: string;
onCloseClick: (event: MouseEvent) => void;
}

33
src/views/chat-history/ChatHistoryView.scss
View File

@ -2,48 +2,23 @@
{
width: 300px;
padding: 2px;
background-color: #1C323F;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 0.25rem;
.container-fluid
{
.nitro-card-header
{
background-color: #3d5f6e;
color: #fff;
}
background-color: #1C323F;
}
.chat-history-content
{
background-color: #1C323F;
.chat-history-container
{
background-color: #1C323F;
min-height: 200px;
.chat-history-list
{
.chathistory-entry
{
.head-container
{
height: 44px;
width: 42px;
.light {
background-color: #121f27;
}
.friend-bar-item-head {
top: -30px;
left: 15px;
pointer-events: none;
height: 44px;
width: 42px;
.dark {
background-color: #0d171d;
}
}
}

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

@ -70,6 +70,8 @@ export const ChatHistoryView: FC<{}> = props =>
{
const item = chatHistoryState.chats[props.index];
const isDark = (props.index % 2 === 0);
return (
<CellMeasurer
cache={cache}
@ -80,26 +82,17 @@ export const ChatHistoryView: FC<{}> = props =>
>
<div key={props.key} style={props.style} className="row chathistory-entry justify-content-start">
{(item.type === ChatEntryType.TYPE_CHAT) &&
<>
<div className="col-auto text-center">{item.timestamp}</div>
<div className="col-auto justify-content-start username">
<span className="fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: item.name }} />
<div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
<div className="p-1">{item.timestamp}</div>
<div className="p-1 fw-bold cursor-pointer" dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
<div className="p-1 text-break text-wrap">{item.message}</div>
</div>
<div className="col justify-content-start h-100">
<span className="text-break text-wrap h-100">{item.message}</span>
</div>
</>
}
{(item.type === ChatEntryType.TYPE_ROOM_INFO) &&
<>
<div className="col-auto text-center">{item.timestamp}</div>
<div className="col-auto justify-content-start username">
<span className="fw-bold cursor-pointer">{item.name}</span>
<div className={`col d-flex flex-wrap text-break text-wrap ${isDark ? 'dark' : 'light'}`}>
<div className="p-1">{item.timestamp}</div>
<div className="p-1 fw-bold cursor-pointer">{item.name}</div>
</div>
<div className="col justify-content-start h-100">
<span className="text-break text-wrap h-100">{item.message}</span>
</div>
</>
}
</div>
@ -141,9 +134,9 @@ export const ChatHistoryView: FC<{}> = props =>
<ChatHistoryContextProvider value={ { chatHistoryState, roomHistoryState } }>
<ChatHistoryMessageHandler />
{isVisible &&
<NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false }>
<NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView className="chat-history-content" style={{ backgroundColor: '#1C323F !important' }}>
<NitroCardView uniqueKey="chat-history" className="nitro-chat-history" simple={ false } theme={'dark'} >
<NitroCardHeaderView headerText={ 'Chat History' } onCloseClick={ event => setIsVisible(false) } theme={'dark'}/>
<NitroCardContentView className="chat-history-content" theme={'dark'}>
<div className="row w-100 h-100 chat-history-container">
<AutoSizer defaultWidth={300} defaultHeight={200} onResize={onResize}>
{({ height, width }) =>

2
src/views/chat-history/utils/Utilities.ts
View File

@ -1,5 +1,5 @@
export const currentDate = () =>
{
const currentTime = new Date();
return `${currentTime.getHours()}:${currentTime.getMinutes()}`;
return `${currentTime.getHours().toString().padStart(2, '0')}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
}

4
src/views/mod-tools/views/chatlog/ChatlogView.scss
View File

@ -22,6 +22,10 @@
width: $username-col-width;
}
&.highlighted {
border: 1px solid $red;
}
.message {
word-break: break-all;
}

2
src/views/mod-tools/views/chatlog/ChatlogView.tsx
View File

@ -22,7 +22,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
parent={props.parent}
rowIndex={props.index}
>
<div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
<div key={props.key} style={props.style} className={'row chatlog-entry justify-content-start ' + (item.hasHighlighting ? 'highlighted' : '')}>
<div className="col-auto text-center">{item.timestamp}</div>
<div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
<div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>