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

fix(ui): small design fixes

Browse source
This commit is contained in:
sylenien 2022-06-01 11:37:43 +02:00 • committed by Delirium
parent 8a2d777d8c
commit 997a5421ae
8 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import { connectPlayer } from 'Player/store';
import { Controls as PlayerControls } from 'Player';
import { Tooltip } from 'react-tippy';
import cn from 'classnames';
import { disabled } from '../Player/Controls/controlButton.css';
function Autoplay(props) {
const { previousId, nextId, autoplay } = props
@ -34,12 +35,13 @@ function Autoplay(props) {
title="Play Previous Session"
disabled={!previousId}
className={cn(
"p-1 bg-active-blue group rounded-full color-teal-light font-medium",
previousId && 'cursor-pointer'
"p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium",
previousId && 'cursor-pointer',
!disabled && 'hover:bg-bg-blue'
)}
>
<Link to={ sessionRoute(previousId) } disabled={!previousId}>
<Icon name="prev1" className="group-hover:fill-main group-hover:bg-bg-blue" color="inherit" size="16" />
<Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
</Link>
</Tooltip>
@ -51,12 +53,13 @@ function Autoplay(props) {
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'
"p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium",
nextId && 'cursor-pointer',
!disabled && 'hover:bg-bg-blue'
)}
>
<Link to={ sessionRoute(nextId) } disabled={!nextId} >
<Icon name="next1" className="group-hover:fill-main group-hover:bg-bg-blue" color="inherit" size="16" />
<Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
</Link>
</Tooltip>
</div>

2
frontend/app/components/Session_/Player/Controls/Controls.js
View file

@ -492,7 +492,7 @@ export default class Controls extends React.Component {
<Tooltip
title="Fullscreen"
delay={0}
position="top"
position="top-end"
className="mx-4"
>
{this.controlIcon("arrows-angle-extend", 18, this.props.fullscreenOn, false, "rounded hover:bg-gray-light-shade color-gray-medium")}

14
frontend/app/components/Session_/Player/Controls/Timeline.js
View file

@ -146,8 +146,8 @@ export default class Timeline extends React.PureComponent {
return (
<div
className={ cn("flex items-center absolute w-full") }
style={{ top: '-5px', zIndex: 100}}
className="flex items-center absolute w-full"
style={{ top: '-5px', zIndex: 100, padding: '0 15px'}}
>
<div
className={ stl.progress }
@ -197,7 +197,7 @@ export default class Timeline extends React.PureComponent {
</div>
}
>
<Icon className="rounded-full p-px bg-white" name={iss.icon} size="16" />
<Icon className=" p-px bg-white" name={iss.icon} size="16" />
</Tooltip>
</div>
))
@ -222,7 +222,7 @@ export default class Timeline extends React.PureComponent {
</div>
}
>
<Icon className="rounded-full p-px bg-white" name={getPointerIcon('click_rage')} size="16" />
<Icon className=" p-px bg-white" name={getPointerIcon('click_rage')} size="16" />
</Tooltip>
</div>
))}
@ -244,7 +244,7 @@ export default class Timeline extends React.PureComponent {
</div>
}
>
<Icon className="rounded-full p-px bg-white" name={getPointerIcon('click_rage')} size="16" />
<Icon className=" p-px bg-white" name={getPointerIcon('click_rage')} size="16" />
</Tooltip>
</div>
}
@ -267,7 +267,7 @@ export default class Timeline extends React.PureComponent {
</div>
}
>
<Icon className="rounded-full p-px bg-white" name={getPointerIcon('exception')} size="16" />
<Icon className=" p-px bg-white" name={getPointerIcon('exception')} size="16" />
</Tooltip>
</div>
))
@ -295,7 +295,7 @@ export default class Timeline extends React.PureComponent {
</div>
}
>
<Icon className="rounded-full p-px bg-white" name={getPointerIcon('resource')} size="16" />
<Icon className=" p-px bg-white" name={getPointerIcon('resource')} size="16" />
</Tooltip>
</div>
))

3
frontend/app/components/Session_/Player/Controls/timeline.module.css
View file

@ -114,8 +114,7 @@
left: 0;
right: 0;
height: 10px;
border-top: 1px solid $gray-light;
border-bottom: 1px solid $gray-light;
border: 1px solid $gray-light;
display: flex;
align-items: center;
}

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

@ -91,7 +91,7 @@ export default class Player extends React.PureComponent {
const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw'
return (
<div
className={ cn(className, stl.playerBody, "flex flex-col relative") }
className={ cn(className, stl.playerBody, "flex flex-col relative", fullscreen && 'pb-2') }
data-bottom-block={ bottomBlockIsActive }
>
{fullscreen && <EscapeButton onClose={ fullscreenOff } />}

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

@ -30,11 +30,11 @@ export default class PlayerBlock extends React.PureComponent {
return (
<div className={ cn(styles.playerBlock, "flex flex-col") }>
<SubHeader
{!fullscreen && <SubHeader
sessionId={sessionId}
disabled={disabled}
jiraConfig={jiraConfig}
/>
/>}
<Player
className="flex-1"
bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }

6
frontend/app/components/ui/EscapeButton/escapeButton.module.css
View file

@ -17,7 +17,9 @@ $padding: 23px;
flex-direction: column;
cursor: pointer;
transition: all 0.3s ease-out;
opacity: 0.5;
color: #333;
border: 1px solid #ddd;
opacity: 0.7;
&:hover {
opacity: 1
}
@ -26,4 +28,4 @@ $padding: 23px;
font-size: 8px;
line-height: 12px;
}
}
}

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

@ -4,6 +4,7 @@ module.exports = {
"gray-light-shade": "#EEEEEE",
"gray-lightest": "#f6f6f6",
"gray-light": "#ddd",
"gray-bg": "#CCC",
"gray-medium": "#888",
"gray-dark": "#666",
"gray-darkest": "#333",