From 987a34e2c6c90268e559863ea77ac88ab86c29d0 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 28 Nov 2022 16:22:50 +0100 Subject: [PATCH 1/5] change(ui) - text color and icon --- .../Session_/Player/Overlay/AutoplayTimer.tsx | 7 ++- .../Session_/components/HeaderMenu.tsx | 50 +++++++------------ frontend/app/svg/icons/quotes.svg | 2 +- 3 files changed, 24 insertions(+), 35 deletions(-) diff --git a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx index 83d993e6b..045b7492b 100644 --- a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx +++ b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import cn from 'classnames'; import { connect } from 'react-redux'; import { withRouter, RouteComponentProps } from 'react-router-dom'; -import { Button, Link } from 'UI'; +import { Button, Link, Icon } from 'UI'; import { session as sessionRoute, withSiteId } from 'App/routes'; import stl from './AutoplayTimer.module.css'; import clsOv from './overlay.module.css'; @@ -51,7 +51,10 @@ function AutoplayTimer({ nextId, siteId, history }: IProps) { -
Turn on/off auto-replay in: More options
+
+ + Turn on/off auto-replay in: More options +
); diff --git a/frontend/app/components/Session_/components/HeaderMenu.tsx b/frontend/app/components/Session_/components/HeaderMenu.tsx index 08c875f96..003ca5ab3 100644 --- a/frontend/app/components/Session_/components/HeaderMenu.tsx +++ b/frontend/app/components/Session_/components/HeaderMenu.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from 'UI'; +import { Icon, Button } from 'UI'; import styles from './menu.module.css'; import cn from 'classnames'; import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; @@ -32,8 +32,8 @@ export default class ItemMenu extends React.PureComponent { }; closeMenu = () => { - this.setState({ displayed: false }) - } + this.setState({ displayed: false }); + }; render() { const { items } = this.props; @@ -42,36 +42,22 @@ export default class ItemMenu extends React.PureComponent { return (
-
-
- + +
+ {items.map((item) => + item.component ? ( +
+ {item.component} +
+ ) : null + )}
- More -
-
- {items.map((item) => - item.component ? ( -
- {item.component} -
- ) : null - )} -
); diff --git a/frontend/app/svg/icons/quotes.svg b/frontend/app/svg/icons/quotes.svg index 252b3b50f..5989049be 100644 --- a/frontend/app/svg/icons/quotes.svg +++ b/frontend/app/svg/icons/quotes.svg @@ -1,3 +1,3 @@ - + From 0cd89e63ea6f8bcf5043297ca44293a17c6c3e47 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 28 Nov 2022 16:23:07 +0100 Subject: [PATCH 2/5] fix(ui) - dev tools sync check --- .../Session_/Player/Overlay/AutoplayTimer.tsx | 3 +-- .../shared/DevTools/ConsolePanel/ConsolePanel.tsx | 8 +++----- .../shared/DevTools/NetworkPanel/NetworkPanel.tsx | 13 ++++++------- .../DevTools/StackEventPanel/StackEventPanel.tsx | 10 ++++------ 4 files changed, 14 insertions(+), 20 deletions(-) diff --git a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx index 045b7492b..fc292e737 100644 --- a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx +++ b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx @@ -52,8 +52,7 @@ function AutoplayTimer({ nextId, siteId, history }: IProps) {
- - Turn on/off auto-replay in: More options + Turn on/off auto-replay in More options
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx index 38714b92d..c9f040c50 100644 --- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx +++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx @@ -72,14 +72,13 @@ function ConsolePanel(props: Props) { const { sessionStore: { devTools }, } = useStore(); - const [isDetailsModalActive, setIsDetailsModalActive] = useState(false); const [filteredList, setFilteredList] = useState([]); const filter = useObserver(() => devTools[INDEX_KEY].filter); const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab); const activeIndex = useObserver(() => devTools[INDEX_KEY].index); const [pauseSync, setPauseSync] = useState(activeIndex > 0); const synRef: any = useRef({}); - const { showModal } = useModal(); + const { showModal, component: modalActive } = useModal(); const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab }); const onFilterChange = ({ target: { value } }: any) => { @@ -92,7 +91,7 @@ function ConsolePanel(props: Props) { }; const removePause = () => { - setIsDetailsModalActive(false); + if (!!modalActive) return; clearTimeout(timeOut); timeOut = setTimeout(() => { devTools.update(INDEX_KEY, { index: getCurrentIndex() }); @@ -101,7 +100,6 @@ function ConsolePanel(props: Props) { }; const onMouseLeave = () => { - if (isDetailsModalActive) return; removePause(); }; @@ -136,7 +134,7 @@ function ConsolePanel(props: Props) { const _list = React.useRef(); const showDetails = (log: any) => { - setIsDetailsModalActive(true); + clearTimeout(timeOut); showModal(, { right: true, onClose: removePause }); devTools.update(INDEX_KEY, { index: filteredList.indexOf(log) }); setPauseSync(true); diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 634aa9bae..416dd24eb 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -140,11 +140,9 @@ interface Props { } function NetworkPanel(props: Props) { const { resources, time, domContentLoadedTime, loadTime, domBuildingTime, fetchList } = props; - const { showModal } = useModal(); - + const { showModal, component: modalActive } = useModal(); const [filteredList, setFilteredList] = useState([]); const [showOnlyErrors, setShowOnlyErrors] = useState(false); - const [isDetailsModalActive, setIsDetailsModalActive] = useState(false); const additionalHeight = 0; const fetchPresented = fetchList.length > 0; const { @@ -169,7 +167,7 @@ function NetworkPanel(props: Props) { }; const removePause = () => { - setIsDetailsModalActive(false); + if (!!modalActive) return; clearTimeout(timeOut); timeOut = setTimeout(() => { devTools.update(INDEX_KEY, { index: getCurrentIndex() }); @@ -178,7 +176,7 @@ function NetworkPanel(props: Props) { }; const onMouseLeave = () => { - if (isDetailsModalActive) return; + if (!!modalActive) return; removePause(); }; @@ -261,7 +259,8 @@ function NetworkPanel(props: Props) { }, []); const showDetailsModal = (row: any) => { - setIsDetailsModalActive(true); + clearTimeout(timeOut); + setPauseSync(true); showModal( , { @@ -270,7 +269,6 @@ function NetworkPanel(props: Props) { } ); devTools.update(INDEX_KEY, { index: filteredList.indexOf(row) }); - setPauseSync(true); }; useEffect(() => { @@ -296,6 +294,7 @@ function NetworkPanel(props: Props) { border={false} /> + {pauseSync &&
pause
} devTools[INDEX_KEY].filter); const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab); @@ -55,8 +54,8 @@ function StackEventPanel(props: Props) { }; const removePause = () => { + if (!!modalActive) return; clearTimeout(timeOut); - setIsDetailsModalActive(false); timeOut = setTimeout(() => { devTools.update(INDEX_KEY, { index: getCurrentIndex() }); setPauseSync(false); @@ -71,7 +70,6 @@ function StackEventPanel(props: Props) { }, [time]); const onMouseLeave = () => { - if (isDetailsModalActive) return; removePause(); }; @@ -97,7 +95,7 @@ function StackEventPanel(props: Props) { }); const showDetails = (item: any) => { - setIsDetailsModalActive(true); + clearTimeout(timeOut); showModal(, { right: true, onClose: removePause }); devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) }); setPauseSync(true); From 4049b7f7436a689a87ac1207d4b3c0b283ef3f84 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 28 Nov 2022 16:34:05 +0100 Subject: [PATCH 3/5] fix(ui) - dev tools sync check --- .../app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 416dd24eb..4a7e71ea2 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -294,7 +294,6 @@ function NetworkPanel(props: Props) { border={false} /> - {pauseSync &&
pause
} Date: Mon, 28 Nov 2022 16:36:00 +0100 Subject: [PATCH 4/5] fix(ui) - audit sort value --- frontend/app/components/Client/Audit/AuditView/AuditView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx index b93c26d08..df30e64ff 100644 --- a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx +++ b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx @@ -46,7 +46,7 @@ function AuditView(props) { ]} defaultValue={order} plain - onChange={({ value }) => auditStore.updateKey('order', value)} + onChange={({ value }) => auditStore.updateKey('order', value.value)} /> auditStore.updateKey('searchQuery', value) }/> From 7a0f735f195e43019cb6fc1a89564e68f2916d56 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 28 Nov 2022 16:43:58 +0100 Subject: [PATCH 5/5] fix(ui) - note overflow auto --- .../components/Session_/Player/Controls/components/ReadNote.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx index edc58aa9f..7a9f54bcf 100644 --- a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx @@ -67,7 +67,7 @@ function ReadNote(props: Props) { -
+
{props.note.message}