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

change(ui) - live list header

Browse source
This commit is contained in:
Shekar Siri 2022-08-12 12:02:23 +02:00
parent bf3bb7a840
commit 5658aaaea2
2 changed files with 26 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
View file

@ -14,6 +14,7 @@ import { capitalize } from 'App/utils';
import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton';
import cn from 'classnames';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import { numberWithCommas } from 'App/utils';
const AUTOREFRESH_INTERVAL = 0.5 * 60 * 1000;
const PER_PAGE = 10;
@ -83,33 +84,33 @@ function LiveSessionList(props: Props) {
return (
<div>
<div className="flex mb-6 justify-between items-end">
<div className="flex items-baseline">
<h3 className="text-2xl capitalize">
<span>Live Sessions</span>
<span className="ml-2 font-normal color-gray-medium">{total}</span>
</h3>
<div className="bg-white p-3 rounded border">
<div className="flex mb-6 justify-between items-center">
<div className="flex items-baseline">
<h3 className="text-2xl capitalize">
<span>Live Sessions</span>
<span className="ml-2 font-normal color-gray-medium">{numberWithCommas(total)}</span>
</h3>
<LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter })} />
</div>
<div className="flex items-center">
<div className="flex items-center ml-6 mr-4">
<span className="mr-2 color-gray-medium">Sort By</span>
<div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
<Select
plain
right
options={sortOptions}
onChange={onSortChange}
value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
/>
<div className="mx-2" />
<SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
<LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter })} />
</div>
<div className="flex items-center">
<div className="flex items-center ml-6">
<span className="mr-2 color-gray-medium">Sort By</span>
<div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
<Select
plain
right
options={sortOptions}
onChange={onSortChange}
value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
/>
<div className="mx-2" />
<SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
</div>
</div>
</div>
</div>
</div>
<div className="bg-white p-3 rounded border">
<Loader loading={loading}>
<NoContent
title={

4
frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
View file

@ -14,7 +14,7 @@ export default React.memo(function SortOrderButton(props: Props) {
<div className="flex items-center border">
<Popup content={'Ascending'} >
<div
className={cn("p-1 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue pointer-events-none' : isAscending })}
className={cn("p-2 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue pointer-events-none' : isAscending })}
onClick={() => onChange('asc')}
>
<Icon name="arrow-up" size="14" color={isAscending ? 'teal' : 'gray-medium'} />
@ -23,7 +23,7 @@ export default React.memo(function SortOrderButton(props: Props) {
<Popup content={'Descending'} >
<div
className={cn("p-1 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue pointer-events-none' : !isAscending })}
className={cn("p-2 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue pointer-events-none' : !isAscending })}
onClick={() => onChange('desc')}
>
<Icon name="arrow-down" size="14" color={!isAscending ? 'teal' : 'gray-medium'} />