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

UI Improvements

Browse source
This commit is contained in:
Sudheer Salavadi 2024-07-05 16:30:01 +05:30
parent e1a788568e
commit 779983b487
9 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
View file

@ -22,7 +22,7 @@ function DashboardList({ siteId }: { siteId: string }) {
const history = useHistory();
// Define custom width and height for each scenario
const searchImageDimensions = { width: 200, height: 'auto' };
const searchImageDimensions = { width: 60, height: 'auto' };
const defaultImageDimensions = { width: 600, height: 'auto' };
const tableConfig: TableColumnsType<Dashboard> = [

4
frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
View file

@ -4,7 +4,7 @@ import {Keyboard} from 'lucide-react'
import { Button, Tooltip } from 'antd';
import { useModal } from "../../../../Modal";
const Key = ({ label }: { label: string }) => <div style={{ minWidth: 52 }} className="whitespace-nowrap font-bold bg-gray-lightest rounded shadow px-2 py-1 text-figmaColors-text-primary text-center">{label}</div>;
const Key = ({ label }: { label: string }) => <div style={{ minWidth: 52 }} className="whitespace-nowrap font-normal bg-indigo-50 rounded-lg px-2 py-1 text-figmaColors-text-primary text-center font-mono">{label}</div>;
function Cell({ shortcut, text }: any) {
return (
<div className="flex items-center gap-2 justify-start rounded">
@ -68,7 +68,7 @@ function KeyboardHelp() {
size={'small'}
className={'flex items-center justify-center'}
onClick={() => {
showModal(<ShortcutGrid />, { right: true, width: 420 })
showModal(<ShortcutGrid />, { right: true, width: 320 })
}}
>
<Keyboard size={18}/>

8
frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
View file

@ -63,7 +63,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
<div className="flex items-center py-1">
<div className="font-medium w-36">Type</div>
<Tag className="text-base capitalize rounded-lg bg-indgo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
<Tag className="text-base capitalize rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
{resource.type}
</Tag>
</div>
@ -71,7 +71,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
{!!resource.decodedBodySize && (
<div className="flex items-center py-1">
<div className="font-medium w-36">Size</div>
<Tag className="text-base rounded-lg bg-indgo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
<Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
{formatBytes(resource.decodedBodySize)}
</Tag>
</div>
@ -82,7 +82,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
{!!_duration && (
<div className="flex items-center py-1">
<div className="font-medium w-36">Duration</div>
<Tag className="text-base rounded-lg bg-indgo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
<Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
{_duration} ms
</Tag>
</div>
@ -91,7 +91,7 @@ function FetchBasicDetails({ resource, timestamp }: Props) {
{timestamp && (
<div className="flex items-center py-1">
<div className="font-medium w-36">Time</div>
<Tag className="text-base rounded-lg bg-indgo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
<Tag className="text-base rounded-lg bg-indigo-50 whitespace-nowrap overflow-hidden text-clip" bordered={false}>
{timestamp}
</Tag>
</div>

15
frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
View file

@ -48,9 +48,9 @@ function NoteItem(props: Props) {
const safeStrMessage =
props.note.message.length > 150 ? props.note.message.slice(0, 150) + '...' : props.note.message;
return (
<div className="flex items-center px-2 border-b">
<div className="flex items-center px-2 border-b hover:bg-amber-50 justify-between py-2">
<Link
style={{ width: '90%' }}
style={{ width: '90%', }}
to={
session(props.note.sessionId) +
(props.note.timestamp > 0
@ -58,7 +58,7 @@ function NoteItem(props: Props) {
: `?note=${props.note.noteId}`)
}
>
<div className="flex flex-col p-2 rounded cursor-pointer">
<div className="flex flex-col p-2 rounded cursor-pointer justify-between">
<div className="flex py-1 text-base">
{props.note.tag ? (
@ -70,14 +70,14 @@ function NoteItem(props: Props) {
</Tag>
) : null}
<div className='cap-first'>
<div className='cap-first font-medium'>
{safeStrMessage}
</div>
</div>
<div className="flex items-center">
<div className="flex items-center text-sm">
<span className="text-gray-600 mr-1 capitalize">By </span>
<div className="flex items-center text-sm text-start">
<span className="text-gray-600 mr-1 capitalize text-start">By </span>
{props.note.userName},{' '}
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
<div className="mx-2" />
@ -86,9 +86,10 @@ function NoteItem(props: Props) {
</div>
</div>
</Link>
{/*
<div className="ml-auto">
<PlayLink isAssist={false} viewed={false} sessionId={props.note.sessionId} />
</div>
</div> */}
<div className="ml-2 cursor-pointer">
<ItemMenu bold items={menuItems} />
</div>

3
frontend/app/components/ui/ItemMenu/ItemMenu.tsx
View file

@ -98,9 +98,10 @@ export default class ItemMenu extends React.PureComponent<Props> {
>
<Button
type="text"
className={cn("select-none", !this.props.flat ? parentStyles : "", {
"": !this.props.flat && displayed && label,
}, ' shadow-sm')}
})}
>
{label && (
<span className={cn("font-medium")}>

2
frontend/app/components/ui/Link/Link.js
View file

@ -8,7 +8,7 @@ import styles from './link.module.css';
const OpenReplayLink = ({ siteId, to, className="", dispatch, ...other }) => (
<Link
{ ...other }
className={ cn(className, styles.link , 'px-2', 'rounded-lg', 'hover:text-inherit', 'hover:bg-amber-50', 'hover:shadow-sm') }
className={ cn(className, styles.link , 'px-2', 'hover:text-inherit') }
to={ withSiteId(to, siteId) }
/>
);

2
frontend/app/player-ui/PlayButton.tsx
View file

@ -44,7 +44,7 @@ export function PlayButton({ togglePlay, iconSize, state }: IProps) {
>
<div
onClick={togglePlay}
className="hover-main color-main cursor-pointer rounded hover:bg-gray-light-shade"
className="hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50"
>
<Icon name={icon} size={iconSize} color="inherit" />
</div>

6
frontend/app/svg/ghost.svg
View file

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="23 10.5 104 129">
<path d="M75 12.5C61.7392 12.5 49.0215 17.7678 39.6447 27.1447C30.2678 36.5215 25 49.2392 25 62.5V137.5L43.75 118.75L59.375 134.375L75 118.75L90.625 134.375L106.25 118.75L125 137.5V62.5C125 49.2392 119.732 36.5215 110.355 27.1447C100.979 17.7678 88.2608 12.5 75 12.5Z" fill="#E2E4F6" stroke="#394EFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M56.25 62.5H56.3133" stroke="#394EFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M93.75 62.5H93.8133" stroke="#394EFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M75 12.5C61.7392 12.5 49.0215 17.7678 39.6447 27.1447C30.2678 36.5215 25 49.2392 25 62.5V137.5L43.75 118.75L59.375 134.375L75 118.75L90.625 134.375L106.25 118.75L125 137.5V62.5C125 49.2392 119.732 36.5215 110.355 27.1447C100.979 17.7678 88.2608 12.5 75 12.5Z" fill="#E2E4F6" stroke="#394EFF" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M56.25 62.5H56.3133" stroke="#394EFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M93.75 62.5H93.8133" stroke="#394EFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 680 B

After

Width:  |  Height:  |  Size: 678 B

6
frontend/tests/mocks/sessionResponse.js
View file

@ -1292,7 +1292,7 @@ export const session = {
sessionId: 8119081922378909,
messageId: 37522,
timestamp: 1673887715900,
label: 'hover-main color-main cursor-pointer rounded hover:bg-gray-light-shade',
label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50',
url: 'app.openreplay.com/5095/session/8118843021704432',
selector:
'#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',
@ -2780,7 +2780,7 @@ export const session = {
sessionId: 8119081922378909,
messageId: 67718,
timestamp: 1673888012602,
label: 'hover-main color-main cursor-pointer rounded hover:bg-gray-light-shade',
label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50',
url: 'app.openreplay.com/5095/session/8118633985734291',
selector:
'#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',
@ -4046,7 +4046,7 @@ export const session = {
sessionId: 8119081922378909,
messageId: 90402,
timestamp: 1673888133249,
label: 'hover-main color-main cursor-pointer rounded hover:bg-gray-light-shade',
label: 'hover-main color-main cursor-pointer rounded-full hover:bg-indigo-50',
url: 'app.openreplay.com/5095/session/8118556979885624',
selector:
'#app > div.relative > div.flex > div.w-full > div.session-module__session--PKpp5.relative > div.playerBlock-module__playerBlock--c8_Ul.flex.flex-col.overflow-x-hidden > div.flex-1.player-module__playerBody--aoTX_.flex.flex-col.relative > div.controls-module__controls--fXp80 > div.controls-module__buttons--vje3y > div.flex.items-center > div.flex.items-center > div.relative > div > div.hover-main.color-main.cursor-pointer.rounded.hover:bg-gray-light-shade',