nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-31 18:32:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Navigator updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-05-12 19:59:49 -03:00
parent 2736f262ac
commit 9d8e2e9e97
4 changed files with 54 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.tsx
View File

@ -56,7 +56,7 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
</div> </div>
</div> </div>
<div className="d-flex flex-row-reverse align-items-center"> <div className="d-flex flex-row-reverse align-items-center">
<i className="fas fa-info-circle" onClick={ openInfo }></i> <i className="fas fa-info-circle text-secondary" onClick={ openInfo }></i>
{ roomData.habboGroupId > 0 && <i className="fas fa-users mr-2"></i> } { roomData.habboGroupId > 0 && <i className="fas fa-users mr-2"></i> }
{ roomData.doorMode !== RoomDataParser.OPEN_STATE && { roomData.doorMode !== RoomDataParser.OPEN_STATE &&
<i className={ 'mr-2 fas ' + classNames( {'fa-lock': roomData.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': roomData.doorMode === RoomDataParser.PASSWORD_STATE })}></i> <i className={ 'mr-2 fas ' + classNames( {'fa-lock': roomData.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': roomData.doorMode === RoomDataParser.PASSWORD_STATE })}></i>

20
src/views/navigator/views/search-result/NavigatorSearchResultView.tsx
View File

@ -49,22 +49,16 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
} }
return ( return (
<div className="bg-white rounded mb-1 overflow-hidden"> <div className="bg-white rounded mb-2 overflow-hidden">
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className="d-flex align-items-center p-2 pb-0 mb-2"> <div className="d-flex align-items-center px-2 py-1 text-black">
<div className="d-flex flex-grow-1"> <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
<button type="button" className="btn btn-primary btn-sm p-0 px-1 me-1" onClick={ toggleExtended }> <div className="ms-2 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>
<i className={ "fas " + (isExtended ? 'fa-minus' : 'fa-plus') }></i> <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
</button>
<div className="h5 m-0 text-black">{ LocalizeText(getResultTitle()) }</div>
</div>
<button type="button" className="btn btn-primary btn-sm p-0 px-1 ms-1" onClick={ toggleDisplayMode }>
<i className={ "fas " + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
</button>
</div> </div>
{ isExtended && { isExtended &&
<div className={ 'nitro-navigator-result-list row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }> <div className={ 'nitro-navigator-result-list mt-1 row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
{ searchResult.rooms.length && searchResult.rooms.map((room, index) => { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
{ {
return <NavigatorSearchResultItemView key={ index } roomData={ room } /> return <NavigatorSearchResultItemView key={ index } roomData={ room } />
}) } }) }

52
src/views/navigator/views/search/NavigatorSearchView.tsx
View File

@ -1,21 +1,49 @@
import { FC } from 'react'; import { FC, useState } from 'react';
import { LocalizeText } from '../../../../utils/LocalizeText'; import { LocalizeText } from '../../../../utils/LocalizeText';
import { NavigatorSearchViewProps } from './NavigatorSearchView.types'; import { INavigatorSearchFilter, NavigatorSearchViewProps } from './NavigatorSearchView.types';
export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props => export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
{ {
const searchFilters: INavigatorSearchFilter[] = [
{
name: 'anything',
query: null
},
{
name: 'room.name',
query: 'roomname'
},
{
name: 'owner',
query: 'owner'
},
{
name: 'tag',
query: 'tag'
},
{
name: 'group',
query: 'group'
}
];
const [ searchFilter, setSearchFilter ] = useState<INavigatorSearchFilter>(searchFilters[0]);
const [ searchString, setSearchString ] = useState<string>(null);
return ( return (
<div className="d-flex mb-1"> <div className="d-flex w-100 mb-3">
<div className="flex-grow-1 input-group"> <div>
<button type="button" className="btn btn-primary btn-sm dropdown-toggle">{ LocalizeText('navigator.filter.') }</button> <select className="form-select form-select-sm flex-shrink-1" onChange={ event => setSearchFilter(searchFilters[event.target.value]) }>
<ul className="dropdown-menu"> { searchFilters.map((filter, index) =>
<li> {
<p className="dropdown-item">{ LocalizeText('navigator.filter.') }</p> return <option value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
</li> }) }
</ul> </select>
<input type="text" className="form-control form-control-sm" />
</div> </div>
<div className="ms-1 d-flex"> <div className="ms-2 flex-grow-1">
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } onChange={ event => setSearchString(event.target.value) } />
</div>
<div className="ms-2">
<button type="button" className="btn btn-primary btn-sm"> <button type="button" className="btn btn-primary btn-sm">
<i className="fas fa-search"></i> <i className="fas fa-search"></i>
</button> </button>

6
src/views/navigator/views/search/NavigatorSearchView.types.ts
View File

@ -2,3 +2,9 @@ export interface NavigatorSearchViewProps
{ {
} }
export interface INavigatorSearchFilter
{
name: string;
query: string;
}