jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui) - assist list show active status

Browse source
This commit is contained in:
Shekar Siri 2022-07-05 09:50:30 +02:00
parent 53b1cb5cbb
commit 1fbd838988
2 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -109,7 +109,7 @@ function SessionItem(props: RouteComponentProps & Props) {
<div className="flex items-start">
<div className={ cn('flex items-center w-full')}>
<div className="flex items-center pr-2" style={{ width: "30%"}}>
<div><Avatar seed={ userNumericHash } isAssist={isAssist} /></div>
<div><Avatar isActive={active} seed={ userNumericHash } isAssist={isAssist} /></div>
<div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center">
<div
className={cn('text-lg', {'color-teal cursor-pointer': !disableUser && hasUserId, [stl.userName]: !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})}

28
frontend/app/components/ui/Avatar/Avatar.js
View file

@ -2,19 +2,23 @@ import React from 'react';
import cn from 'classnames';
import { avatarIconName } from 'App/iconNames';
import stl from './avatar.module.css';
import { Icon } from 'UI';
import { Icon, Popup } from 'UI';
const Avatar = ({ isAssist = false, className, width = "38px", height = "38px", iconSize = 26, seed }) => {
var iconName = avatarIconName(seed);
return (
<div
className={ cn(stl.wrapper, "p-2 border flex items-center justify-center rounded-full relative")}
style={{ width, height }}
>
<Icon name={iconName} size={iconSize} color="tealx"/>
{isAssist && <div className="w-2 h-2 bg-green rounded-full absolute right-0 bottom-0" style={{ marginRight: '3px', marginBottom: '3px'}} /> }
</div>
);
const Avatar = ({ isActive = false, isAssist = false, className, width = '38px', height = '38px', iconSize = 26, seed }) => {
var iconName = avatarIconName(seed);
return (
<Popup content={isActive ? 'Active user' : 'User might be inactive'} disabled={!isAssist}>
<div className={cn(stl.wrapper, 'p-2 border flex items-center justify-center rounded-full relative')} style={{ width, height }}>
<Icon name={iconName} size={iconSize} color="tealx" />
{isAssist && (
<div
className={cn('w-2 h-2 rounded-full absolute right-0 bottom-0', { 'bg-green': isActive, 'bg-orange': !isActive })}
style={{ marginRight: '3px', marginBottom: '3px' }}
/>
)}
</div>
</Popup>
);
};
export default Avatar;