From 78363606addc371e9168b3d1dc9733ac00494ee3 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 22 Jun 2022 19:41:29 +0200 Subject: [PATCH] change(ui) - sessions list layout --- .../BugFinder/SessionList/SessionList.js | 76 ++++++++++--------- .../CustomMetricTableSessions.tsx | 5 +- .../WidgetSessions/WidgetSessions.tsx | 7 +- .../EventsBlock/Metadata/SessionList.js | 9 ++- .../LiveSessionList/LiveSessionList.tsx | 70 +++++++++-------- .../shared/SessionItem/PlayLink/PlayLink.tsx | 2 +- .../shared/SessionItem/SessionItem.tsx | 19 +++-- .../shared/SessionItem/sessionItem.module.css | 6 +- frontend/app/components/ui/Icon/Icon.js | 2 +- frontend/app/components/ui/SVG.tsx | 2 +- frontend/app/svg/icons/play-hover.svg | 2 +- 11 files changed, 114 insertions(+), 86 deletions(-) diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js index 47f02e5f5..ea5532211 100644 --- a/frontend/app/components/BugFinder/SessionList/SessionList.js +++ b/frontend/app/components/BugFinder/SessionList/SessionList.js @@ -95,42 +95,48 @@ export default class SessionList extends React.PureComponent { const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID); return ( - - - {this.getNoContentMessage(activeTab)} - } - // subtext="Please try changing your search parameters." - // animatedIcon="no-results" - show={ !loading && list.size === 0} - subtext={ -
-
Please try changing your search parameters.
-
- } - > - - { list.map(session => ( - - ))} - -
- this.props.updateCurrentPage(page)} - limit={PER_PAGE} - debounceRequest={1000} - /> +
+ + + {this.getNoContentMessage(activeTab)} +
} + // subtext="Please try changing your search parameters." + // animatedIcon="no-results" + show={ !loading && list.size === 0} + subtext={ +
+
Please try changing your search parameters.
+
+ } + > + + + { list.map(session => ( + <> + +
+ + ))} + +
+ this.props.updateCurrentPage(page)} + limit={PER_PAGE} + debounceRequest={1000} + /> +
+
- ); } diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx index f258dba8c..8e2fa38ea 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx @@ -16,7 +16,10 @@ function CustomMetricTableSessions(props: Props) { return useObserver(() => ( {metric.data.sessions && metric.data.sessions.map((session: any, index: any) => ( - + <> + +
+ ))} {isEdit && ( diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx index 64fa9db4c..06a722cfd 100644 --- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx +++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx @@ -90,7 +90,7 @@ function WidgetSessions(props: Props) { )}
-
+
{filteredSessions.sessions.map((session: any) => ( - + <> + +
+ ))}
diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js index 679e6b401..6565d5c23 100644 --- a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js +++ b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js @@ -36,7 +36,14 @@ class SessionList extends React.PureComponent { { site.name }
- { site.sessions.map(session => ) } +
+ { site.sessions.map(session => ( + <> + +
+ + )) } +
)) }
diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx index eae686134..0fe4b0b9a 100644 --- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx +++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx @@ -124,40 +124,46 @@ function LiveSessionList(props: Props) { props.applyFilter({ order: state })} sortOrder={filter.order} />
- + - See how to {'enable Assist'} and ensure you're using tracker-assist v3.5.0 or higher. - - } - image={} - show={ !loading && list.size === 0} - > - - {list.map(session => ( - - ))} + title={"No live sessions."} + subtext={ + + See how to {'enable Assist'} and ensure you're using tracker-assist v3.5.0 or higher. + + } + image={} + show={ !loading && list.size === 0} + > +
+ + {list.map(session => ( + <> + +
+ + ))} -
- props.updateCurrentPage(page)} - limit={PER_PAGE} - /> -
- - +
+ props.updateCurrentPage(page)} + limit={PER_PAGE} + /> +
+ + +
+
) } diff --git a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx index 203b72089..2234a5242 100644 --- a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx +++ b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx @@ -36,7 +36,7 @@ export default function PlayLink(props: Props) { onMouseEnter={() => toggleHover(true)} onMouseLeave={() => toggleHover(false)} > - + ) } \ No newline at end of file diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index 23aeab9f6..8fc751503 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -5,6 +5,7 @@ import { Avatar, TextEllipsis, Label, + Icon, } from 'UI'; import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; @@ -104,7 +105,7 @@ function SessionItem(props: RouteComponentProps) { }); return ( -
+
@@ -114,36 +115,38 @@ function SessionItem(props: RouteComponentProps) { className={cn('text-lg', {'color-teal cursor-pointer': !disableUser && hasUserId, [stl.userName]: !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})} onClick={() => (!disableUser && !hasUserFilter) && onUserClick(userId, userAnonymousId)} > - +
{formatTimeOrDate(startedAt, timezone) }
-
+
{!isAssist && ( <>
{ eventsCount } { eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event' }
-
·
+ )}
{ live ? : formattedDuration }
-
-
+
+ +
+
-
·
+ -
·
+ diff --git a/frontend/app/components/shared/SessionItem/sessionItem.module.css b/frontend/app/components/shared/SessionItem/sessionItem.module.css index 897ee327f..34ed53ad9 100644 --- a/frontend/app/components/shared/SessionItem/sessionItem.module.css +++ b/frontend/app/components/shared/SessionItem/sessionItem.module.css @@ -1,8 +1,8 @@ .sessionItem { background-color: #fff; user-select: none; - border-radius: 3px; - border: solid thin #EEEEEE; + /* border-radius: 3px; */ + /* border: solid thin #EEEEEE; */ transition: all 0.4s; & .favorite { @@ -14,7 +14,7 @@ &:hover { background-color: $active-blue; - border: solid thin $active-blue-border; + /* border: solid thin $active-blue-border; */ transition: all 0.2s; & .playLink { diff --git a/frontend/app/components/ui/Icon/Icon.js b/frontend/app/components/ui/Icon/Icon.js index 7fc6ffee9..0ed03acaa 100644 --- a/frontend/app/components/ui/Icon/Icon.js +++ b/frontend/app/components/ui/Icon/Icon.js @@ -11,7 +11,7 @@ const Icon = ({ color = 'gray-medium', className = '', style={}, - marginRight, + marginRight = 0, inline = false, ...props }) => { diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index 5cfd4ebb9..b489a90c6 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -306,7 +306,7 @@ const SVG = (props: Props) => { case 'play-circle': return ; case 'play-fill-new': return ; case 'play-fill': return ; - case 'play-hover': return ; + case 'play-hover': return ; case 'play': return ; case 'plus-circle': return ; case 'plus': return ; diff --git a/frontend/app/svg/icons/play-hover.svg b/frontend/app/svg/icons/play-hover.svg index 4939d51d9..13b3c271b 100644 --- a/frontend/app/svg/icons/play-hover.svg +++ b/frontend/app/svg/icons/play-hover.svg @@ -1,4 +1,4 @@ - +