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 navigator

Browse Source
This commit is contained in:
Bill 2021-04-22 02:45:33 -04:00
parent a39db6cf91
commit 3effb407ce
6 changed files with 37 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/navigator/NavigatorView.tsx
View File

@ -140,7 +140,7 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
</button> </button>
</div> </div>
<NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } /> <NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
<TransitionAnimation className="d-flex px-3 pb-3" type={ TransitionAnimationTypes.FADE_IN } inProp={ (!isSearching && !!searchResults) } timeout={ 200 }> <TransitionAnimation className="d-flex px-3 pb-3" type={ TransitionAnimationTypes.FADE_IN } inProp={ (!isSearching && !!searchResults) } timeout={ 150 }>
<NavigatorResultListsView resultLists={ searchResults } /> <NavigatorResultListsView resultLists={ searchResults } />
</TransitionAnimation> </TransitionAnimation>
</div> </div>

4
src/views/navigator/result-lists/NavigatorResultListsView.tsx
View File

@ -7,9 +7,9 @@ export function NavigatorResultListsView(props: NavigatorResultListsViewProps):
return ( return (
<div className="nitro-navigator-result-lists w-100"> <div className="nitro-navigator-result-lists w-100">
{ resultLists && resultLists.length && resultLists.map((resultList, index) => { resultLists && resultLists.length && resultLists.map((resultList, index) =>
{ {
return <NavigatorResultListView key={ index } resultList={ resultList } isLast={ index + 1 === resultLists.length } /> return <NavigatorResultListView key={ index } resultList={ resultList } />
}) })
} }
</div> </div>

8
src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx
View File

@ -6,7 +6,7 @@ import { NavigatorResultView } from './result/NavigatorResultView';
export function NavigatorResultListView(props: NavigatorResultListViewProps): JSX.Element export function NavigatorResultListView(props: NavigatorResultListViewProps): JSX.Element
{ {
const { resultList = null, isLast = false } = props; const { resultList = null } = props;
const [ isExtended, setIsExtended ] = useState(true); const [ isExtended, setIsExtended ] = useState(true);
const [ displayMode, setDisplayMode ] = useState<number>(0); const [ displayMode, setDisplayMode ] = useState<number>(0);
@ -55,12 +55,10 @@ export function NavigatorResultListView(props: NavigatorResultListViewProps): JS
<div className="align-self-center w-100 ml-2">{ LocalizeText(getListCode()) }</div> <div className="align-self-center w-100 ml-2">{ LocalizeText(getListCode()) }</div>
<i className={ "fas " + classNames({ 'fa-bars': displayMode === NavigatorResultListViewDisplayMode.LIST, 'fa-th': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS })} onClick={ toggleDisplayMode }></i> <i className={ "fas " + classNames({ 'fa-bars': displayMode === NavigatorResultListViewDisplayMode.LIST, 'fa-th': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS })} onClick={ toggleDisplayMode }></i>
</div> </div>
<div className={ 'row row-grid row-cols-' + classNames({ '1': displayMode === NavigatorResultListViewDisplayMode.LIST, '2': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS }) }> <div className={ 'row mx-n2 row-cols-' + classNames({ '1': displayMode === NavigatorResultListViewDisplayMode.LIST, '2': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS }) }>
{ isExtended && resultList && resultList.rooms.map((room, index) => { isExtended && resultList && resultList.rooms.map((room, index) =>
{ {
return <div className="col"> return <NavigatorResultView key={ index } result={ room } />
<NavigatorResultView key={ index } result={ room } />
</div>
}) })
} }
</div> </div>

1
src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts
View File

@ -3,7 +3,6 @@ import { NavigatorSearchResultList } from 'nitro-renderer';
export interface NavigatorResultListViewProps export interface NavigatorResultListViewProps
{ {
resultList: NavigatorSearchResultList; resultList: NavigatorSearchResultList;
isLast: boolean;
} }
export class NavigatorResultListViewDisplayMode export class NavigatorResultListViewDisplayMode

19
src/views/navigator/result-lists/result-list/result/NavigatorResultView.scss
View File

@ -6,21 +6,32 @@
} }
.nitro-navigator-result-list { .nitro-navigator-result-list {
.nitro-navigator-result {
border-radius: $border-radius;
background: $secondary;
}
.row { .row {
&.row-cols-1 { &.row-cols-1 {
.col:nth-child(odd) {
.col:nth-child(even) {
.nitro-navigator-result { .nitro-navigator-result {
border-radius: $border-radius; border-radius: $border-radius;
background: $secondary !important; background: $primary !important;
} }
} }
} }
&.row-cols-2 { &.row-cols-2 {
.col {
.col:nth-child(4n+3),
.col:nth-child(4n+4) {
.nitro-navigator-result { .nitro-navigator-result {
border-radius: $border-radius; border-radius: $border-radius;
background: $secondary !important; background: $primary !important;
} }
} }
} }

30
src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx
View File

@ -39,23 +39,25 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
} }
return ( return (
<div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small" onClick={ () => navigatorContext.onTryVisitRoom(result) }> <div className="col px-2">
<div className="d-flex justify-content-between w-100 px-2 py-1"> <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
<div className="d-flex justify-content-center flex-grow-1 overflow-hidden"> <div className="d-flex justify-content-between w-100 px-2 py-1">
<div className={ "d-flex justify-content-center align-items-center badge text-center " + getUserCounterColor() }> <div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
<i className="fas fa-user mr-1"></i> { result.userCount } <div className={ "d-flex justify-content-center align-items-center badge text-center " + getUserCounterColor() }>
<i className="fas fa-user mr-1"></i> { result.userCount }
</div>
<div className="d-flex flex-column justify-content-center align-items-start flex-grow-1 px-2 overflow-hidden">
<span className="d-block text-truncate" style={ { maxWidth: '95%' } }>{ result.roomName }</span>
</div>
</div> </div>
<div className="d-flex flex-column justify-content-center align-items-start flex-grow-1 px-2 overflow-hidden"> <div className="d-flex flex-row-reverse align-items-center">
<span className="d-block text-truncate" style={ { maxWidth: '95%' } }>{ result.roomName }</span> <i className="fas fa-info-circle" onClick={ openInfo }></i>
{ result.habboGroupId > 0 && <i className="fas fa-users mr-2"></i> }
{ result.doorMode !== RoomDataParser.OPEN_STATE &&
<i className={ 'mr-2 fas ' + classNames( {'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
}
</div> </div>
</div> </div>
<div className="d-flex flex-row-reverse align-items-center">
<i className="fas fa-info-circle" onClick={ openInfo }></i>
{ result.habboGroupId > 0 && <i className="fas fa-users mr-2"></i> }
{ result.doorMode !== RoomDataParser.OPEN_STATE &&
<i className={ 'mr-2 fas ' + classNames( {'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
}
</div>
</div> </div>
</div> </div>
); );