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

feat(ui) - session list - tabs and settings

Browse source
This commit is contained in:
Shekar Siri 2022-08-01 18:01:16 +02:00
parent b36a0a09ea
commit a034460838
4 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx
View file

@ -2,12 +2,12 @@ import React from 'react';
import SessionList from './components/SessionList';
import SessionHeader from './components/SessionHeader';
interface Props {}
function SessionListContainer(props: Props) {
function SessionListContainer() {
return (
<div className="widget-wrapper">
<SessionHeader />
<div className="p-4">
<div className="border-b" />
<div className="px-4">
<SessionList />
</div>
</div>

14
frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
View file

@ -33,20 +33,24 @@ function SessionHeader(props: Props) {
};
return (
<div className="flex items-center p-4 justify-between">
<div className="flex items-center px-4 pt-2 justify-between">
<div className="flex items-center justify-between">
<div className="mr-3 text-lg flex items-center">
<div
className={cn('py-3 cursor-pointer mr-4 ', { 'border-b color-teal border-teal': !isBookmark })}
className={cn('py-3 cursor-pointer mr-4', {
'border-b color-teal border-teal': !isBookmark,
})}
onClick={() => props.setActiveTab({ type: 'all' })}
>
<span className="font-bold">Sessions</span> <span className="color-gray-medium ml-2">{listCount}</span>
<span className="font-bold">SESSIONS</span> <span className="color-gray-medium ml-2">{listCount}</span>
</div>
<div
className={cn('py-3 cursor-pointer', { 'border-b color-teal border-teal': isBookmark })}
className={cn('py-3 cursor-pointer', {
'border-b color-teal border-teal': isBookmark,
})}
onClick={() => props.setActiveTab({ type: 'bookmark' })}
>
<span className="font-bold">{`${isEnterprise ? 'Vault' : 'Bookmarks'}`}</span>
<span className="font-bold">{`${isEnterprise ? 'VAULT' : 'BOOKMARKS'}`}</span>
</div>
</div>
</div>

5
frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
View file

@ -60,7 +60,7 @@ function SessionList(props: Props) {
show={!loading && list.size === 0}
>
{list.map((session: any) => (
<React.Fragment key={session.sessionId}>
<div key={session.sessionId} className="border-b">
<SessionItem
session={session}
hasUserFilter={hasUserFilter}
@ -68,8 +68,7 @@ function SessionList(props: Props) {
metaList={metaList}
lastPlayedSessionId={lastPlayedSessionId}
/>
<div className="border-b" />
</React.Fragment>
</div>
))}
</NoContent>

1
frontend/app/theme/colors.js
View file

@ -42,5 +42,6 @@ module.exports = {
default: '#DDDDDD',
'gray-light-shade': '#EEEEEE',
'primary': '#3490dc',
'transparent': 'transparent',
}
}