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

fix(ui): fix ui bugs

Browse source
This commit is contained in:
sylenien 2022-05-30 11:09:37 +02:00 • committed by Delirium
parent 366314193e
commit 13dff716ea
4 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/Session/WebPlayer.js
View file

@ -27,10 +27,10 @@ const PlayerContentConnected = connectPlayer(state => ({
}))(PlayerContent);
function PlayerContent({ live, fullscreen }) {
function PlayerContent({ live, fullscreen, activeTab }) {
return (
<div className={ cn(styles.session, 'relative') } data-fullscreen={fullscreen}>
<PlayerBlock />
<PlayerBlock activeTab={activeTab} />
</div>
)
}
@ -73,7 +73,7 @@ function WebPlayer (props) {
<InitLoader className="flex-1">
<PlayerBlockHeader activeTab={activeTab} setActiveTab={setActiveTab} tabs={TABS} fullscreen={fullscreen}/>
<div className="flex">
<div className="w-full"><PlayerContentConnected fullscreen={fullscreen} live={live} /></div>
<div className="w-full"><PlayerContentConnected activeTab={activeTab} fullscreen={fullscreen} live={live} /></div>
{activeTab !== '' && <ConnectedMenu activeTab={activeTab} setActiveTab={setActiveTab} fullscreen={fullscreen} tabs={TABS} live={live} />}
</div>
</InitLoader>

4
frontend/app/components/Session_/Player/Player.js
View file

@ -85,8 +85,10 @@ export default class Player extends React.PureComponent {
live,
closedLive,
bottomBlock,
activeTab
} = this.props;
const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw'
return (
<div
className={ cn(className, stl.playerBody, "flex flex-col relative") }
@ -101,7 +103,7 @@ export default class Player extends React.PureComponent {
/>
</div>
{ !fullscreen && !!bottomBlock &&
<div className="">
<div style={{ maxWidth, width: '100%' }}>
{ bottomBlock === CONSOLE &&
<Console />
}

3
frontend/app/components/Session_/PlayerBlock.js
View file

@ -18,7 +18,7 @@ import styles from './playerBlock.css';
}))
export default class PlayerBlock extends React.PureComponent {
render() {
const { fullscreen, bottomBlock, sessionId, disabled, previousId, nextId, setAutoplayValues } = this.props;
const { fullscreen, bottomBlock, sessionId, disabled, previousId, nextId, setAutoplayValues, activeTab } = this.props;
return (
<div className={ cn(styles.playerBlock, "flex flex-col") }>
@ -31,6 +31,7 @@ export default class PlayerBlock extends React.PureComponent {
bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }
bottomBlock={bottomBlock}
fullscreen={fullscreen}
activeTab={activeTab}
/>
</div>
);

6
frontend/app/components/Session_/PlayerBlockHeader.js
View file

@ -104,9 +104,11 @@ export default class PlayerBlockHeader extends React.PureComponent {
const TABS = [ this.props.tabs.EVENTS, this.props.tabs.HEATMAPS ].map(tab => ({ text: tab, key: tab }));
return (
<div className={ cn(stl.header, "flex justify-between", { "hidden" : fullscreen}) }>
<div className="flex w-full items-center" onClick={this.backHandler} >
<div className="flex w-full items-center" >
<div className='flex items-center h-full' onClick={this.backHandler}>
<BackLink label="Back" className="h-full" />
<div className={ stl.divider } />
<div className={ stl.divider } />
</div>
<UserCard
className=""
width={width}