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

Fix layout

Browse Source
This commit is contained in:
Bill 2021-08-18 22:29:00 -04:00
parent f09a0d734c
commit 1bdcfd5cdf
4 changed files with 120 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss
View File

@ -5,6 +5,16 @@
height: 350px;
}
.user-rights-container {
.row {
.col:nth-child(even) {
//background: $light !important;
}
}
}
.list-container {
max-height: 100px;
min-height: 100px;

125
src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx
View File

@ -2,6 +2,7 @@ import { RemoveAllRightsMessageComposer, RoomGiveRightsComposer, RoomTakeRightsC
import { FC, useCallback, useMemo } from 'react';
import { LocalizeText } from '../../../../../../api';
import { SendMessageHook } from '../../../../../../hooks';
import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView';
import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
@ -52,48 +53,100 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
}, [roomSettingsData]);
return (
<>
<div className="d-flex flex-column h-100 overflow-hidden user-rights">
<div className="row">
<div className="col-6">
<div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}</div>
</div>
<div className="col-6">
<div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}</div>
<div className="col">
filter
</div>
</div>
<div className="row h-100">
<div className="col-6">
<div className="list-container rights justify-content-center align-items-center">
{
Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
{
return <div key={index} className={'list-item flex-row'} >
<span className="w-100" >{name}</span>
<button className="btn btn-danger btn-sm rights-button" onClick={ () => removeUserRights(id) }>
<i className="fas fa-times" />
</button>
</div>
})
}
<div className="col-6 d-flex flex-column h-100">
<div className="fw-bold mb-1">{ LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString() ]) }</div>
<div className="d-flex flex-column justify-content-between rounded bg-white h-100 overflow-hidden px-2 py-1 user-rights-container">
<div className="row row-cols-1 overflow-auto">
{ Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
{
return (
<div key={index} className="d-flex align-items-center col w-100" onClick={ () => removeUserRights(id) }>
<div className="d-flex align-items-center me-2">
<UserProfileIconView userName={ name } />
<span>{ name }</span>
</div>
<i className="fas fa-caret-right fw-bold text-black me-2" />
</div>
);
})
}
</div>
<button className="btn btn-danger btn-sm w-100" disabled={ !roomSettingsData.usersWithRights.size } onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
</div>
<button className={'btn btn-danger btn-sm w-100' + ((roomSettingsData.usersWithRights.size < 1) ? ' disabled' : '')} onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
</div>
<div className="col-6">
<div className="list-container h-100 friends-rights">
{
Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
{
return <div key={index} className={'list-item flex-row'} >
<span className="w-100">{name}</span>
<button className="btn btn-success btn-sm rights-button" onClick={ () => giveUserRights(id, name) }>
<i className="fas fa-chevron-left" />
</button>
</div>
})
}
<div className="col-6 d-flex flex-column h-100">
<div className="fw-bold mb-1">{ LocalizeText('navigator.flatctrls.friends', [ 'displayed', 'total' ], [ friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString() ]) }</div>
<div className="d-flex flex-column rounded bg-white h-100 overflow-hidden px-2 py-1 user-rights-container">
<div className="row row-cols-1 overflow-auto">
{ Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
{
return (
<div key={index} className="d-flex align-items-center col w-100" onClick={ () => giveUserRights(id, name) }>
<i className="fas fa-caret-left fw-bold text-black me-2" />
<div className="d-flex align-items-center">
<UserProfileIconView userName={ name } />
<span>{ name }</span>
</div>
</div>
);
})
}
</div>
</div>
</div >
</div >
</>
</div>
</div>
</div>
// <div className="row h-100">
// <div className="col-6">
// <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}</div>
// </div>
// <div className="col-6">
// <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}</div>
// </div>
// </div>
// <div className="row h-100">
// <div className="col-6 d-flex flex-column h-100">
// <div className="row row-cols-1 g-0 overflow-auto">
// {
// Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
// {
// return (
// <div key={ index } className="col">
// <span className="w-100" >{name}</span>
// <button className="btn btn-danger btn-sm rights-button" onClick={ () => removeUserRights(id) }>
// <i className="fas fa-times" />
// </button>
// </div>
// );
// })
// }
// </div>
// <button className={'btn btn-danger btn-sm w-100' + ((roomSettingsData.usersWithRights.size < 1) ? ' disabled' : '')} onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
// </div>
// <div className="col-6 d-flex flex-column h-100">
// <div className="row row-cols-1 g-0 overflow-auto bg-white h-100">
// {
// Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
// {
// return (
// <div key={index} className="col">
// <span className="w-100">{name}</span>
// <button className="btn btn-success btn-sm rights-button" onClick={ () => giveUserRights(id, name) }>
// <i className="fas fa-chevron-left" />
// </button>
// </div>
// );
// })
// }
// </div>
// </div >
// </div >
);
}

16
src/views/shared/user-profile-icon/UserProfileIconView.tsx Normal file
View File

@ -0,0 +1,16 @@
import { FC, useCallback } from 'react';
import { UserProfileIconViewProps } from './UserProfileIconView.types';
export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
{
const { userId = -1, userName = null } = props;
const visitProfile = useCallback(() =>
{
}, [ userId, userName ]);
return (
<i className="icon icon-user-profile me-1 cursor-pointer" onClick={ visitProfile } />
);
}

5
src/views/shared/user-profile-icon/UserProfileIconView.types.ts Normal file
View File

@ -0,0 +1,5 @@
export interface UserProfileIconViewProps
{
userId?: number;
userName?: string;
}