From 7ea4523f208afb4e6859869e3b4a3c0935f88e74 Mon Sep 17 00:00:00 2001 From: Delirium Date: Wed, 27 Mar 2024 14:59:23 +0100 Subject: [PATCH] fix ui - second batch of ui fixes (#2002) --- .../Player/LivePlayer/LivePlayerSubHeader.tsx | 2 +- .../Player/ReplayPlayer/AiSubheader.tsx | 4 +-- .../Player/ReplayPlayer/PlayerBlockHeader.tsx | 4 +-- .../ReplayPlayer/playerBlockHeader.module.css | 4 +-- .../Session/Player/SharedComponents/Tab.tsx | 4 +-- .../Session_/EventsBlock/UxtEvent.tsx | 8 ++--- .../Controls/components/PlayerControls.tsx | 2 +- .../Player/Controls/timeline.module.css | 2 +- .../components/Session_/Player/Overlay.tsx | 31 +++++++++++++++++++ .../Session_/Player/player.module.css | 3 +- frontend/app/components/Session_/Subheader.js | 4 +-- .../SessionCopyLink/SessionCopyLink.tsx | 24 +++++--------- .../shared/SharePopup/SharePopup.tsx | 12 +++++-- .../app/player/web/Screen/screen.module.css | 2 +- frontend/app/styles/colors-autogen.css | 10 ++++++ frontend/app/theme/colors.js | 1 + frontend/package.json | 1 + frontend/yarn.lock | 10 ++++++ 18 files changed, 89 insertions(+), 39 deletions(-) diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx index 7312e08fb..8f3b73157 100644 --- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx +++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx @@ -17,7 +17,7 @@ function SubHeader() { {location && ( -
+
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/AiSubheader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/AiSubheader.tsx index 35d05408e..f00ba82fb 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/AiSubheader.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/AiSubheader.tsx @@ -147,7 +147,7 @@ function SubHeader(props: any) { > {showWarning ? (
{location && ( -
+
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx index 59f33c10f..1fcf8e8ae 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx @@ -105,13 +105,13 @@ function PlayerBlockHeader(props: any) { )} {_metaList.length > 0 && ( -
+
)}
-
+
Tab {i + 1} diff --git a/frontend/app/components/Session_/EventsBlock/UxtEvent.tsx b/frontend/app/components/Session_/EventsBlock/UxtEvent.tsx index 74e751bb9..ad841444a 100644 --- a/frontend/app/components/Session_/EventsBlock/UxtEvent.tsx +++ b/frontend/app/components/Session_/EventsBlock/UxtEvent.tsx @@ -5,9 +5,9 @@ import { Tooltip } from 'antd' function UxtEvent({ event }: any) { return (
-
+
-
Task {event.indexNum}
+
Task {event.indexNum}
instructions
 @@ -16,8 +16,8 @@ function UxtEvent({ event }: any) {
{event.title}
{event.comment ? ( -
-
+
+
Participant Response
{event.comment}
diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx index c3839c0a4..e2edabb03 100644 --- a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx @@ -70,7 +70,7 @@ function PlayerControls(props: Props) { sessionTz={sessionTz} /> -
+
, + }, { key: ItemKey.Console, label: 'Console', @@ -70,6 +80,16 @@ const menuItems: MenuProps['items'] = [ label: 'Add Note', icon: , }, + { + key: ItemKey.CopySessionUrl, + label: 'Copy Session URL', + icon: , + }, + { + key: ItemKey.CopySessionUrlTs, + label: 'Copy Session URL At Current Time', + icon: , + }, ]; 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; } diff --git a/frontend/app/components/Session_/Player/player.module.css b/frontend/app/components/Session_/Player/player.module.css index d03ab1bc1..d281b7c35 100644 --- a/frontend/app/components/Session_/Player/player.module.css +++ b/frontend/app/components/Session_/Player/player.module.css @@ -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; diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index 5b770b541..3c190cf75 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/frontend/app/components/Session_/Subheader.js @@ -95,7 +95,7 @@ function SubHeader(props) { > {showWarning ? (
{location && ( -
+
diff --git a/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx b/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx index 9d9e49963..e408d683d 100644 --- a/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx +++ b/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx @@ -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; diff --git a/frontend/app/components/shared/SharePopup/SharePopup.tsx b/frontend/app/components/shared/SharePopup/SharePopup.tsx index ee55216ce..6ac06e4b9 100644 --- a/frontend/app/components/shared/SharePopup/SharePopup.tsx +++ b/frontend/app/components/shared/SharePopup/SharePopup.tsx @@ -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 = ({ , { 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({
- +