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

fix(ui): fix styles in player header

Browse source
This commit is contained in:
sylenien 2022-05-24 16:23:53 +02:00 • committed by Delirium
parent 3444b73ed0
commit ce5affddd6
7 changed files with 60 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Assist/components/AssistTabs/assistTabs.module.css
View file

@ -2,4 +2,5 @@
cursor: pointer;
color: $green;
text-decoration: underline;
}
white-space: nowrap;
}

43
frontend/app/components/Session_/Autoplay/Autoplay.js
View file

@ -5,6 +5,8 @@ import { session as sessionRoute } from 'App/routes';
import { Link, Icon, Slider, Toggler } from 'UI';
import { connectPlayer } from 'Player/store';
import { Controls as PlayerControls } from 'Player';
import { Tooltip } from 'react-tippy';
import cn from 'classnames';
function Autoplay(props) {
const { previousId, nextId, autoplay } = props
@ -15,23 +17,48 @@ function Autoplay(props) {
return (
<div className="flex items-center">
<div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2">
<div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2">
<Toggler
name="sessionsLive"
onChange={ props.toggleAutoplay }
checked={ autoplay }
plain
/>
<span className="ml-2">Auto-Play</span>
</div>
<Link className="mr-1 cursor-pointer p-2 bg-tealx-light rounded-full color-tealx font-medium" to={ sessionRoute(previousId) } disabled={!previousId}>
<Icon name="prev1" className="hover:fill-teal" color="inherit" size="16" />
</Link>
<Tooltip
delay={0}
arrow
animation="fade"
position="bottom center"
title="Play Previous Session"
disabled={!previousId}
className={cn(
"p-1 bg-active-blue group rounded-full color-teal-light font-medium",
previousId && 'cursor-pointer'
)}
>
<Link to={ sessionRoute(previousId) } disabled={!previousId}>
<Icon name="prev1" className="group-hover:fill-blue" color="inherit" size="16" />
</Link>
</Tooltip>
<Link className="cursor-pointer p-2 bg-tealx-light rounded-full color-tealx font-medium" to={ sessionRoute(nextId) } disabled={!nextId}>
<Icon name="next1" className="hover:fill-teal" color="inherit" size="16" />
</Link>
<Tooltip
delay={0}
arrow
animation="fade"
position="bottom center"
title="Play Next Session"
disabled={!nextId}
className={cn(
"p-1 bg-active-blue group ml-1 rounded-full color-teal-light font-medium",
nextId && 'cursor-pointer'
)}
>
<Link to={ sessionRoute(nextId) } disabled={!nextId} >
<Icon name="next1" className="group-hover:fill-blue" color="inherit" size="16" />
</Link>
</Tooltip>
</div>
)
}

14
frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
View file

@ -64,19 +64,19 @@ function UserCard({
{ userDisplayName }
</TextEllipsis>
<div className="text-sm color-gray-medium">
<span>{formatDateTimeDefault(startedAt)}</span>
<span className="mx-1">·</span>
<span>{userBrowser}, {userDevice}</span>
<span className="mx-1">·</span>
<div className="text-sm color-gray-medium flex items-center">
<span style={{ whiteSpace: 'nowrap' }}>{formatDateTimeDefault(startedAt)}</span>
<span className="mx-1 font-bold text-xl">&#183;</span>
<span>{countries[userCountry]}</span>
<span className="mx-1">·</span>
<span className="mx-1 font-bold text-xl">&#183;</span>
<span className='capitalize'>{userBrowser}, {userOs}, {userDevice}</span>
<span className="mx-1 font-bold text-xl">&#183;</span>
<Popup
trigger={<span className="color-teal cursor-pointer">More</span>}
content={(
<div className=''>
<SessionInfoItem comp={<CountryFlag country={ userCountry } />} label={countries[userCountry]} value={ formatTimeOrDate(startedAt) } />
<SessionInfoItem comp={<CountryFlag country={ userCountry } />} label={countries[userCountry]} value={<span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt)}</span> } />
<SessionInfoItem icon={browserIcon(userBrowser)} label={userBrowser} value={ `v${ userBrowserVersion }` } />
<SessionInfoItem icon={osIcon(userOs)} label={userOs} value={ userOsVersion } />
<SessionInfoItem icon={deviceTypeIcon(userDeviceType)} label={userDeviceType} value={ getDimension(width, height) } isLast />

10
frontend/app/components/Session_/Subheader.js
View file

@ -18,7 +18,7 @@ function SubHeader(props) {
<div className="w-full px-4 py-2 flex items-center">
{location && (
<div
className="flex items-center cursor-pointer color-gray-medium text-lg"
className="flex items-center cursor-pointer color-gray-medium text-xs p-2 hover:bg-gray-light-shade rounded-md"
onClick={() => {
copy(props.currentLocation);
setCopied(true)
@ -38,14 +38,14 @@ function SubHeader(props) {
</Tooltip>
</div>
)}
<div className="ml-auto flex items-center color-gray-medium" style={{ width: 'max-content' }}>
<div className="ml-auto text-xs flex items-center color-gray-medium" style={{ width: 'max-content' }}>
<div className="cursor-pointer">
<SharePopup
entity="sessions"
id={ props.sessionId }
showCopyLink={true}
trigger={
<div className="flex items-center">
<div className="flex items-center hover:bg-gray-light-shade rounded-md p-2">
<Icon
className="mr-2"
disabled={ props.disabled }
@ -58,8 +58,8 @@ function SubHeader(props) {
}
/>
</div>
<div className="mx-4">
<Bookmark />
<div className="mx-2 hover:bg-gray-light-shade rounded-md p-2">
<Bookmark noMargin />
</div>
<div>
<Autoplay />

3
frontend/app/components/Session_/playerBlockHeader.module.css
View file

@ -16,4 +16,5 @@
cursor: pointer;
color: $green;
text-decoration: underline;
}
white-space: nowrap;
}

11
frontend/app/components/shared/Bookmark/Bookmark.tsx
View file

@ -3,12 +3,15 @@ import { Popup, Button, Icon } from 'UI'
import { toggleFavorite } from 'Duck/sessions'
import { connect } from 'react-redux'
import { toast } from 'react-toastify';
import { Tooltip } from 'react-tippy';
import cn from 'classnames';
interface Props {
toggleFavorite: (sessionId: string) => Promise<void>,
favorite: Boolean,
sessionId: any,
isEnterprise: Boolean
toggleFavorite: (sessionId: string) => Promise<void>;
favorite: Boolean;
sessionId: any;
isEnterprise: Boolean;
noMargin?: boolean;
}
function Bookmark(props : Props ) {
const { sessionId, favorite, isEnterprise } = props;

4
frontend/app/components/ui/CountryFlag/countryFlag.module.css
View file

@ -1,8 +1,8 @@
.default {
width: 22px !important;
height: 14px !important;
height: 12px !important;
}
.label {
line-height: 0 !important;
}
}