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

fix ui - second batch of ui fixes (#2002)

Browse source
This commit is contained in:
Delirium 2024-03-27 14:59:23 +01:00 • committed by GitHub
parent 3d5c98c7a1
commit 7ea4523f20
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 89 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx
View file

@ -17,7 +17,7 @@ function SubHeader() {
<SessionTabs isLive />
</div>
{location && (
<div className={'w-full bg-white border-b border-gray-light'}>
<div className={'w-full bg-white border-b border-gray-lighter'}>
<div className="flex w-fit items-center cursor-pointer color-gray-medium text-sm p-1">
<Icon size="20" name="event/link" className="mr-1" />
<Tooltip title="Open in new tab" delay={0}>

4
frontend/app/components/Session/Player/ReplayPlayer/AiSubheader.tsx
View file

@ -147,7 +147,7 @@ function SubHeader(props: any) {
>
{showWarning ? (
<div
className="px-3 py-1 border border-gray-light drop-shadow-md rounded bg-active-blue flex items-center justify-between"
className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between"
style={{
zIndex: 999,
position: 'absolute',
@ -198,7 +198,7 @@ function SubHeader(props: any) {
</div>
</div>
{location && (
<div className={'w-full bg-white border-b border-gray-light'}>
<div className={'w-full bg-white border-b border-gray-lighter'}>
<div className="flex w-fit items-center cursor-pointer color-gray-medium text-sm p-1">
<Icon size="20" name="event/link" className="mr-1" />
<Tooltip title="Open in new tab" delay={0}>

4
frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
View file

@ -105,13 +105,13 @@ function PlayerBlockHeader(props: any) {
)}
{_metaList.length > 0 && (
<div className="border-l h-full flex items-center px-2">
<div className="border-l border-l-gray-lighter h-full flex items-center px-2">
<SessionMetaList className="" metaList={_metaList} maxLength={2} />
</div>
)}
</div>
</div>
<div className="relative border-l" style={{ minWidth: '270px' }}>
<div className="relative border-l border-l-gray-lighter" style={{ minWidth: '270px' }}>
<Tabs
tabs={TABS}
active={activeTab}

4
frontend/app/components/Session/Player/ReplayPlayer/playerBlockHeader.module.css
View file

@ -1,6 +1,6 @@
.header {
height: 50px;
border-bottom: solid thin $gray-light;
border-bottom: solid thin $gray-lighter;
padding-right: 0;
background-color: white;
}
@ -9,7 +9,7 @@
width: 1px;
height: 49px;
margin: 0 10px;
background-color: $gray-light;
background-color: $gray-lighter;
}
.liveSwitchButton {

4
frontend/app/components/Session/Player/SharedComponents/Tab.tsx
View file

@ -19,8 +19,8 @@ function Tab({ i, tab, currentTab, changeTab, isLive }: Props) {
'self-end py-1 px-4 text-sm',
changeTab && !isLive ? 'cursor-pointer' : 'cursor-default',
currentTab === tab
? 'border-gray-light border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold'
: 'cursor-pointer border-gray-light !border-b !border-t-transparent !border-l-transparent !border-r-transparent'
? 'border-gray-lighter border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold'
: 'cursor-pointer border-gray-lighter !border-b !border-t-transparent !border-l-transparent !border-r-transparent'
)}
>
Tab {i + 1}

8
frontend/app/components/Session_/EventsBlock/UxtEvent.tsx
View file

@ -5,9 +5,9 @@ import { Tooltip } from 'antd'
function UxtEvent({ event }: any) {
return (
<div className={'flex flex-col'}>
<div className={'border border-gray-light rounded bg-teal-light pt-2 pb-1 px-4 m-4 shadow'}>
<div className={'border border-gray-lighter rounded bg-teal-light pt-2 pb-1 px-4 m-4 shadow'}>
<div className={'w-full flex items-center gap-2'}>
<div className={'bg-white rounded border border-gray-light px-2'}>Task {event.indexNum}</div>
<div className={'bg-white rounded border border-gray-lighter px-2'}>Task {event.indexNum}</div>
<Tooltip title={event.description}>
<div className={'text-disabled-text underline-dashed cursor-pointer'}>instructions</div>
</Tooltip>
@ -16,8 +16,8 @@ function UxtEvent({ event }: any) {
<div className="font-semibold pt-1">{event.title}</div>
</div>
{event.comment ? (
<div className={'border border-gray-light rounded bg-cyan py-2 px-4 mx-4 mb-4 shadow'}>
<div className={'bg-white rounded border border-gray-light px-2 w-fit'}>
<div className={'border border-gray-lighter rounded bg-cyan py-2 px-4 mx-4 mb-4 shadow'}>
<div className={'bg-white rounded border border-gray-lighter px-2 w-fit'}>
Participant Response
</div>
<div>{event.comment}</div>

2
frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
View file

@ -70,7 +70,7 @@ function PlayerControls(props: Props) {
sessionTz={sessionTz}
/>
<div className="rounded ml-2 bg-white border-gray-light flex items-center" style={{ gap: 1 }}>
<div className="rounded ml-2 bg-white border-gray-lighter flex items-center" style={{ gap: 1 }}>
<JumpBack backTenSeconds={backTenSeconds} currentInterval={currentInterval} />
<IntervalSelector
skipIntervals={skipIntervals}

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

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

31
frontend/app/components/Session_/Player/Overlay.tsx
View file

@ -3,6 +3,9 @@ import type { MenuProps } from 'antd';
import { observer } from 'mobx-react-lite';
import React from 'react';
import { connect } from 'react-redux';
import { Link2 } from 'lucide-react';
import copy from 'copy-to-clipboard';
import { toast } from 'react-toastify';
import { PlayerContext } from 'App/components/Session/playerContext';
import {
@ -36,9 +39,16 @@ enum ItemKey {
Events = '4',
State = '5',
AddNote = '6',
CopySessionUrl = '7',
CopySessionUrlTs = '8',
}
const menuItems: MenuProps['items'] = [
{
key: ItemKey.Console,
label: 'Console',
icon: <Icon name={'terminal'} size={14} />,
},
{
key: ItemKey.Console,
label: 'Console',
@ -70,6 +80,16 @@ const menuItems: MenuProps['items'] = [
label: 'Add Note',
icon: <Icon name={'quotes'} size={14} />,
},
{
key: ItemKey.CopySessionUrl,
label: 'Copy Session URL',
icon: <Link2 />,
},
{
key: ItemKey.CopySessionUrlTs,
label: 'Copy Session URL At Current Time',
icon: <Link2 />,
},
];
function Overlay({ nextId, isClickmap, toggleBottomBlock }: Props) {
@ -127,6 +147,17 @@ function Overlay({ nextId, isClickmap, toggleBottomBlock }: Props) {
{ right: true, width: 380 }
);
break;
case ItemKey.CopySessionUrl:
copy(window.location.origin + window.location.pathname);
toast.success('Session URL copied to clipboard');
break;
case ItemKey.CopySessionUrlTs:
copy(window.location.origin
+ window.location.pathname
+ '?jumpto='
+ String(Math.round(store.get().time)));
toast.success('Session URL at current time copied to clipboard');
break;
default:
return;
}

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

@ -18,8 +18,7 @@
}
.checkers {
background: repeating-conic-gradient($gray-lightest 0% 25%, transparent 0% 50%)
50% / 10px 10px;
background: repeating-linear-gradient(135deg, #f3f3f3, #f3f3f3 1px, #f6f6f6 1px, #FFF 4px);
}
.solidBg {
background: $gray-lightest;

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

@ -95,7 +95,7 @@ function SubHeader(props) {
>
{showWarning ? (
<div
className="px-3 py-1 border border-gray-light drop-shadow-md rounded bg-active-blue flex items-center justify-between"
className="px-3 py-1 border border-gray-lighter drop-shadow-md rounded bg-active-blue flex items-center justify-between"
style={{
zIndex: 999,
position: 'absolute',
@ -170,7 +170,7 @@ function SubHeader(props) {
</div>
</div>
{location && (
<div className={'w-full bg-white border-b border-gray-light'}>
<div className={'w-full bg-white border-b border-gray-lighter'}>
<div className="flex w-fit items-center cursor-pointer color-gray-medium text-sm p-1">
<Icon size="20" name="event/link" className="mr-1" />
<Tooltip title="Open in new tab" delay={0}>

24
frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx
View file

@ -1,21 +1,18 @@
import React from 'react';
import { connect } from 'react-redux';
import { Button, Icon } from 'UI';
import copy from 'copy-to-clipboard';
import { PlayerContext } from 'App/components/Session/playerContext';
import { observer } from 'mobx-react-lite';
import { DateTime } from 'luxon';
function SessionCopyLink({ startedAt }: any) {
function SessionCopyLink({ time }: { time: number }) {
const [copied, setCopied] = React.useState(false);
const { store } = React.useContext(PlayerContext);
const time = store?.get().time;
const copyHandler = () => {
setCopied(true);
const timeStr = DateTime.fromMillis(startedAt + time);
copy(window.location.origin + window.location.pathname + '?jumpto=' + parseInt(String(timeStr.toMillis())));
copy(
window.location.origin
+ window.location.pathname
+ '?jumpto='
+ Math.round(time)
);
setTimeout(() => {
setCopied(false);
}, 1000);
@ -34,9 +31,4 @@ function SessionCopyLink({ startedAt }: any) {
);
}
export default connect((state: any) => {
return {
time: state.time,
startedAt: state.getIn(['sessions', 'current']).startedAt || 0,
};
})(observer(SessionCopyLink));
export default SessionCopyLink;

12
frontend/app/components/shared/SharePopup/SharePopup.tsx
View file

@ -10,6 +10,8 @@ import Select from 'Shared/Select';
import { fetchList as fetchSlack, sendSlackMsg } from 'Duck/integrations/slack';
import { fetchList as fetchTeams, sendMsTeamsMsg } from 'Duck/integrations/teams';
import { Button, Segmented } from 'antd';
import { PlayerContext } from 'App/components/Session/playerContext';
import { observer } from 'mobx-react-lite';
interface Msg {
integrationId: string;
@ -25,6 +27,7 @@ const SharePopup = ({
trigger: string;
showCopyLink?: boolean;
}) => {
const { store } = React.useContext(PlayerContext);
const { showModal, hideModal } = useModal();
const openModal = () => {
@ -32,6 +35,7 @@ const SharePopup = ({
<ShareModal
hideModal={hideModal}
showCopyLink={showCopyLink}
time={store?.get().time}
/>,
{ right: true, width: 300 }
);
@ -58,6 +62,7 @@ interface Props {
sendMsTeamsMsg: (msg: Msg) => any;
showCopyLink?: boolean;
hideModal: () => void;
time: number;
}
function ShareModalComp({
@ -72,6 +77,7 @@ function ShareModalComp({
fetchSlack,
fetchTeams,
hideModal,
time,
}: Props) {
const [shareTo, setShareTo] = useState('slack');
const [comment, setComment] = useState('');
@ -240,7 +246,7 @@ function ShareModalComp({
</div>
</div>
<div className={'mt-4'}>
<SessionCopyLink />
<SessionCopyLink time={time} />
<div className={'flex items-center gap-2 pt-8 mt-4 border-t'}>
<Button type={'primary'} onClick={sendMsg}>Send</Button>
<Button type={'primary'} ghost onClick={hideModal}>
@ -258,7 +264,7 @@ function ShareModalComp({
<>
<div className="border-t -mx-2" />
<div>
<SessionCopyLink />
<SessionCopyLink time={time} />
</div>
</>
)}
@ -286,4 +292,4 @@ const ShareModal = connect(mapStateToProps, {
sendMsTeamsMsg,
})(ShareModalComp);
export default SharePopup;
export default observer(SharePopup);

2
frontend/app/player/web/Screen/screen.module.css
View file

@ -5,7 +5,7 @@
transform-origin: left top;
top: 50%;
left: 50%;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
background: white;
}
.iframe {
position: absolute;

10
frontend/app/styles/colors-autogen.css
View file

@ -4,6 +4,7 @@
.fill-main { fill: #394EFF }
.fill-gray-light-shade { fill: #EEEEEE }
.fill-gray-lightest { fill: #f6f6f6 }
.fill-gray-lighter { fill: #f1f1f1 }
.fill-gray-light { fill: #ddd }
.fill-gray-bg { fill: #CCC }
.fill-gray-medium { fill: #888 }
@ -40,6 +41,7 @@
.fill-borderColor-primary { fill: #3490dc }
.fill-borderColor-transparent { fill: transparent }
.fill-transparent { fill: transparent }
.fill-cyan { fill: #EBF4F5 }
.fill-figmaColors-accent-secondary { fill: rgba(62, 170, 175, 1) }
.fill-figmaColors-main { fill: rgba(57, 78, 255, 1) }
.fill-figmaColors-primary-outlined-hover-background { fill: rgba(62, 170, 175, 0.08) }
@ -53,6 +55,7 @@
.hover-fill-main:hover svg { fill: #394EFF }
.hover-fill-gray-light-shade:hover svg { fill: #EEEEEE }
.hover-fill-gray-lightest:hover svg { fill: #f6f6f6 }
.hover-fill-gray-lighter:hover svg { fill: #f1f1f1 }
.hover-fill-gray-light:hover svg { fill: #ddd }
.hover-fill-gray-bg:hover svg { fill: #CCC }
.hover-fill-gray-medium:hover svg { fill: #888 }
@ -89,6 +92,7 @@
.hover-fill-borderColor-primary:hover svg { fill: #3490dc }
.hover-fill-borderColor-transparent:hover svg { fill: transparent }
.hover-fill-transparent:hover svg { fill: transparent }
.hover-fill-cyan:hover svg { fill: #EBF4F5 }
.hover-fill-figmaColors-accent-secondary:hover svg { fill: rgba(62, 170, 175, 1) }
.hover-fill-figmaColors-main:hover svg { fill: rgba(57, 78, 255, 1) }
.hover-fill-figmaColors-primary-outlined-hover-background:hover svg { fill: rgba(62, 170, 175, 0.08) }
@ -104,6 +108,7 @@
.color-main { color: #394EFF }
.color-gray-light-shade { color: #EEEEEE }
.color-gray-lightest { color: #f6f6f6 }
.color-gray-lighter { color: #f1f1f1 }
.color-gray-light { color: #ddd }
.color-gray-bg { color: #CCC }
.color-gray-medium { color: #888 }
@ -140,6 +145,7 @@
.color-borderColor-primary { color: #3490dc }
.color-borderColor-transparent { color: transparent }
.color-transparent { color: transparent }
.color-cyan { color: #EBF4F5 }
.color-figmaColors-accent-secondary { color: rgba(62, 170, 175, 1) }
.color-figmaColors-main { color: rgba(57, 78, 255, 1) }
.color-figmaColors-primary-outlined-hover-background { color: rgba(62, 170, 175, 0.08) }
@ -155,6 +161,7 @@
.hover-main:hover { color: #394EFF }
.hover-gray-light-shade:hover { color: #EEEEEE }
.hover-gray-lightest:hover { color: #f6f6f6 }
.hover-gray-lighter:hover { color: #f1f1f1 }
.hover-gray-light:hover { color: #ddd }
.hover-gray-bg:hover { color: #CCC }
.hover-gray-medium:hover { color: #888 }
@ -191,6 +198,7 @@
.hover-borderColor-primary:hover { color: #3490dc }
.hover-borderColor-transparent:hover { color: transparent }
.hover-transparent:hover { color: transparent }
.hover-cyan:hover { color: #EBF4F5 }
.hover-figmaColors-accent-secondary:hover { color: rgba(62, 170, 175, 1) }
.hover-figmaColors-main:hover { color: rgba(57, 78, 255, 1) }
.hover-figmaColors-primary-outlined-hover-background:hover { color: rgba(62, 170, 175, 0.08) }
@ -205,6 +213,7 @@
.border-main { border-color: #394EFF }
.border-gray-light-shade { border-color: #EEEEEE }
.border-gray-lightest { border-color: #f6f6f6 }
.border-gray-lighter { border-color: #f1f1f1 }
.border-gray-light { border-color: #ddd }
.border-gray-bg { border-color: #CCC }
.border-gray-medium { border-color: #888 }
@ -241,6 +250,7 @@
.border-borderColor-primary { border-color: #3490dc }
.border-borderColor-transparent { border-color: transparent }
.border-transparent { border-color: transparent }
.border-cyan { border-color: #EBF4F5 }
.border-figmaColors-accent-secondary { border-color: rgba(62, 170, 175, 1) }
.border-figmaColors-main { border-color: rgba(57, 78, 255, 1) }
.border-figmaColors-primary-outlined-hover-background { border-color: rgba(62, 170, 175, 0.08) }

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

@ -3,6 +3,7 @@ module.exports = {
"gray-light-shade": "#EEEEEE",
"gray-lightest": "#f6f6f6",
"gray-lighter": "#f1f1f1",
"gray-light": "#ddd",
"gray-bg": "#CCC",
"gray-medium": "#888",

1
frontend/package.json
View file

@ -49,6 +49,7 @@
"jshint": "^2.11.1",
"jspdf": "^2.5.1",
"jsx-runtime": "^1.2.0",
"lucide-react": "^0.363.0",
"luxon": "^1.24.1",
"mobx": "^6.3.8",
"mobx-react-lite": "^3.1.6",

10
frontend/yarn.lock
View file

@ -16429,6 +16429,15 @@ __metadata:
languageName: node
linkType: hard
"lucide-react@npm:^0.363.0":
version: 0.363.0
resolution: "lucide-react@npm:0.363.0"
peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0
checksum: e18d3710e619f86d9f6686aa6975bba8a20a48c70ef2da231b61b29fe56eff85df463d38d6885345597a0942c940971cd4e81e8e777583c7db2fd8d62160bf20
languageName: node
linkType: hard
"luxon@npm:^1.24.1":
version: 1.28.1
resolution: "luxon@npm:1.28.1"
@ -18319,6 +18328,7 @@ __metadata:
jshint: ^2.11.1
jspdf: ^2.5.1
jsx-runtime: ^1.2.0
lucide-react: ^0.363.0
luxon: ^1.24.1
mini-css-extract-plugin: ^2.6.0
minio: ^7.1.3