Skip to content

Commit 80fd94b

Browse files
marcbonmarcbon
authored
Merge pull request #865 from AppQuality/ui-improvements
Ui-improvements
2 parents fa635ac + 156fe72 commit 80fd94b

File tree

11 files changed

+275
-200
lines changed

11 files changed

+275
-200
lines changed

‎src/locales/en/translation.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -834,7 +834,8 @@
834834
"__TAILORED_LABEL": "Tailored",
835835
"__TOAST_CLOSE_TEXT": "Dismiss",
836836
"__TOAST_GENERIC_ERROR_MESSAGE": "Something went wrong. Please try again later.",
837-
"__VIDEO_LIST_META_SEVERITIES_COUNT": "You have found",
837+
"__VIDEO_LIST_META_SEVERITIES_COUNT_one": "<0>You have found <2>{{count}} observations:</2></0>",
838+
"__VIDEO_LIST_META_SEVERITIES_COUNT_other": "<0>You have found <2>{{count}} observations:</2></0>",
838839
"__VIDEO_PAGE_ACTIONS_EXPORT_BUTTON_LABEL": "Download report",
839840
"__VIDEO_PAGE_ACTIONS_EXPORT_TOAST_ERROR_MESSAGE": "Something went wrong, try again",
840841
"__VIDEO_PAGE_ACTIONS_EXPORT_TOAST_SUCCESS_MESSAGE": "Downloading report",
@@ -882,7 +883,8 @@
882883
"__VIDEOS_LIST_OTHER_TITLE": "Other",
883884
"__VIDEOS_LIST_SMARTPHONE_TITLE": "Mobile",
884885
"__VIDEOS_LIST_TABLET_TITLE": "Tablet",
885-
"__VIDEOS_LIST_USECASE_INFO": "videos",
886+
"__VIDEOS_LIST_USECASE_INFO_one": "video",
887+
"__VIDEOS_LIST_USECASE_INFO_other": "videos",
886888
"__VIDEOS_PAGE_TITLE": "Playlist",
887889
"__WIZARD_EXPRESS_2_USE_CASE_MODAL_HEADER_SAVE_BUTTON": "Save and continue",
888890
"__WIZARD_EXPRESS_2_USE_CASE_MODAL_PRE_TITLE": "Step \"How\"",

‎src/locales/it/translation.json‎

Lines changed: 41 additions & 2 deletions
Large diffs are not rendered by default.

‎src/pages/Video/Actions.tsx‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { LG, Skeleton, Tag } from '@appquality/unguess-design-system';
1+
import { Skeleton, Tag, XL } from '@appquality/unguess-design-system';
22
import { useParams } from 'react-router-dom';
33
import { appTheme } from 'src/app/theme';
44
import { Meta } from 'src/common/components/Meta';
55
import { Pipe } from 'src/common/components/Pipe';
6-
import { Divider } from 'src/common/components/divider';
76
import { getDeviceIcon } from 'src/common/components/BugDetail/Meta';
87
import { ReactComponent as ClockIcon } from 'src/assets/icons/time-icon.svg';
98
import {
@@ -72,7 +71,7 @@ const Actions = () => {
7271

7372
return (
7473
<Container ref={refScroll}>
75-
<LG isBold>{video.tester.name}</LG>
74+
<XL isBold>{video.tester.name}</XL>
7675
<MetaContainer>
7776
<Meta size="medium">T{video.tester.id}</Meta>
7877
<Pipe />
@@ -91,21 +90,18 @@ const Actions = () => {
9190
</Tag>
9291
)}
9392
</MetaContainer>
94-
<Divider style={{ margin: `${appTheme.space.sm} auto` }} />
9593
{observations && observations.length ? (
96-
<div style={{ margin: `${appTheme.space.sm} 0` }}>
97-
{observations &&
98-
observations.map((observation) => (
99-
<Observation
100-
refScroll={refScroll}
101-
key={observation.id}
102-
observation={observation}
103-
{...(video.transcript && {
104-
transcript: video.transcript,
105-
})}
106-
/>
107-
))}
108-
</div>
94+
observations &&
95+
observations.map((observation) => (
96+
<Observation
97+
refScroll={refScroll}
98+
key={observation.id}
99+
observation={observation}
100+
{...(video.transcript && {
101+
transcript: video.transcript,
102+
})}
103+
/>
104+
))
109105
) : (
110106
<NoObservations />
111107
)}

‎src/pages/Video/PageHeader.tsx‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
Skeleton,
66
Span,
77
} from '@appquality/unguess-design-system';
8-
import { useTranslation } from 'react-i18next';
8+
import { Trans, useTranslation } from 'react-i18next';
99
import { Link, useParams } from 'react-router-dom';
1010
import { appTheme } from 'src/app/theme';
1111
import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
@@ -22,12 +22,10 @@ import { getSeverityTagsByVideoCount } from '../Videos/utils/getSeverityTagsWith
2222

2323
const SeveritiesMetaContainer = styled.div`
2424
display: flex;
25-
align-items: center;
26-
margin-top: ${({ theme }) => theme.space.sm};
25+
flex-direction: row;
2726
`;
2827

29-
const SeveritiesMetaText = styled(MD)`
30-
color: ${({ theme }) => theme.palette.grey[600]};
28+
const SeveritiesMetaText = styled.div`
3129
margin-right: ${({ theme }) => theme.space.sm};
3230
`;
3331

@@ -78,10 +76,7 @@ const VideoPageHeader = () => {
7876
return (
7977
<LayoutWrapper isNotBoxed>
8078
<PageHeader style={{ padding: `${appTheme.space.xs} 0` }}>
81-
<PageHeader.Main
82-
mainTitle={t('__VIDEO_PAGE_TITLE')}
83-
style={{ padding: 0 }}
84-
>
79+
<PageHeader.Main mainTitle={t('__VIDEO_PAGE_TITLE')}>
8580
<PageHeader.Breadcrumbs>
8681
<Link to={campaignRoute}>
8782
<Anchor id="breadcrumb-parent">{campaign.customer_title}</Anchor>
@@ -90,27 +85,42 @@ const VideoPageHeader = () => {
9085
<Anchor id="breadcrumb-parent">{t('__VIDEOS_PAGE_TITLE')}</Anchor>
9186
</Link>
9287
</PageHeader.Breadcrumbs>
93-
<PageHeader.Description style={{ margin: 0 }}>
94-
<Span isBold style={{ margin: 0 }}>
88+
<PageHeader.Description>
89+
<Span isBold>
9590
T{video.tester.id} | {video.tester.name}
9691
</Span>
9792
</PageHeader.Description>
9893
<PageHeader.Meta>
9994
{severities && severities.length > 0 && (
100-
<SeveritiesMetaContainer>
95+
<>
10196
<SeveritiesMetaText>
102-
{t('__VIDEO_LIST_META_SEVERITIES_COUNT')}
103-
</SeveritiesMetaText>
104-
{severities.map((severity) => (
105-
<Meta
106-
size="large"
107-
color={severity.style}
108-
secondaryText={severity.count}
97+
<Trans
98+
i18nKey="__VIDEO_LIST_META_SEVERITIES_COUNT"
99+
count={observations.length}
109100
>
110-
{capitalizeFirstLetter(severity.name)}
111-
</Meta>
112-
))}
113-
</SeveritiesMetaContainer>
101+
<MD>
102+
You have found{' '}
103+
<Span
104+
isBold
105+
style={{ color: appTheme.palette.blue[600] }}
106+
>
107+
{{ count: observations.length }} observations:
108+
</Span>
109+
</MD>
110+
</Trans>
111+
</SeveritiesMetaText>
112+
<SeveritiesMetaContainer>
113+
{severities.map((severity) => (
114+
<Meta
115+
size="large"
116+
color={severity.style}
117+
secondaryText={severity.count}
118+
>
119+
{capitalizeFirstLetter(severity.name)}
120+
</Meta>
121+
))}
122+
</SeveritiesMetaContainer>
123+
</>
114124
)}
115125
</PageHeader.Meta>
116126
</PageHeader.Main>

‎src/pages/Video/components/Observation.tsx‎

Lines changed: 74 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
GetVideosByVidObservationsApiResponse,
1414
} from 'src/features/api';
1515
import { ReactComponent as TagIcon } from 'src/assets/icons/tag-icon.svg';
16-
import { ReactComponent as CopyIcon } from 'src/assets/icons/link-fill.svg';
16+
import { ReactComponent as ShareIcon } from 'src/assets/icons/share-stroke.svg';
1717
import { useTranslation } from 'react-i18next';
1818
import { useParams } from 'react-router-dom';
1919
import { useCallback, useEffect, useState } from 'react';
@@ -22,6 +22,7 @@ import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
2222
import { styled } from 'styled-components';
2323
import { getColorWithAlpha } from 'src/common/utils';
2424
import { formatDuration } from 'src/pages/Videos/utils/formatDuration';
25+
import { Divider } from 'src/common/components/divider';
2526
import { ObservationForm } from './ObservationForm';
2627
import { useVideoContext } from '../context/VideoContext';
2728

@@ -36,9 +37,11 @@ const Circle = styled.div<{
3637
align-items: center;
3738
border-radius: 50%;
3839
`;
39-
const StyledTitle = styled(Title)`
40+
41+
const Container = styled.div`
4042
display: flex;
4143
align-items: center;
44+
width: 100%;
4245
`;
4346

4447
const Observation = ({
@@ -144,95 +147,84 @@ const Observation = ({
144147
}, []);
145148

146149
return (
147-
<Accordion
148-
level={3}
149-
style={{ padding: 0, marginBottom: appTheme.space.md }}
150-
key={`observation_accordion_${observation.id}_${isOpen}`}
151-
defaultExpandedSections={isOpen ? [0, 1] : []}
152-
onChange={handleAccordionChange}
153-
id={`video-observation-accordion-${observation.id}`}
154-
>
155-
<Accordion.Section>
156-
<Accordion.Header>
157-
<Accordion.Label style={{ padding: 0 }}>
158-
<div
159-
style={{
160-
display: 'flex',
161-
flexDirection: 'row',
162-
alignItems: 'center',
163-
}}
164-
>
165-
<Circle
166-
color={
167-
observation.tags.find(
168-
(tag) => tag.group.name.toLowerCase() === 'severity'
169-
)?.tag.style || appTheme.palette.grey[600]
170-
}
171-
style={{
172-
backgroundColor: getColorWithAlpha(
150+
<>
151+
<Divider style={{ margin: `${appTheme.space.sm} auto` }} />
152+
<Accordion
153+
level={3}
154+
style={{ padding: `${appTheme.space.md} 0` }}
155+
key={`observation_accordion_${observation.id}_${isOpen}`}
156+
defaultExpandedSections={isOpen ? [0, 1] : []}
157+
onChange={handleAccordionChange}
158+
id={`video-observation-accordion-${observation.id}`}
159+
>
160+
<Accordion.Section>
161+
<Accordion.Header>
162+
<Accordion.Label style={{ padding: 0 }}>
163+
<Container>
164+
<Circle
165+
color={
173166
observation.tags.find(
174167
(tag) => tag.group.name.toLowerCase() === 'severity'
175-
)?.tag.style || appTheme.palette.grey[600],
176-
0.1
177-
),
178-
}}
179-
>
180-
<TagIcon
168+
)?.tag.style || appTheme.palette.grey[600]
169+
}
181170
style={{
182-
color:
171+
backgroundColor: getColorWithAlpha(
183172
observation.tags.find(
184173
(tag) => tag.group.name.toLowerCase() === 'severity'
185174
)?.tag.style || appTheme.palette.grey[600],
175+
0.1
176+
),
186177
}}
187-
/>
188-
</Circle>
189-
<div>
190-
<StyledTitle>
178+
>
179+
<TagIcon
180+
style={{
181+
color:
182+
observation.tags.find(
183+
(tag) => tag.group.name.toLowerCase() === 'severity'
184+
)?.tag.style || appTheme.palette.grey[600],
185+
}}
186+
/>
187+
</Circle>
188+
<Title style={{ flexGrow: 1 }}>
191189
<LG isBold>{title}</LG>
192-
</StyledTitle>
193-
</div>
194-
<Tooltip
195-
content={t('__VIDEO_PAGE_OBSERVATION_LINK_TOOLTIP')}
196-
size="large"
197-
type="light"
198-
placement="bottom-start"
199-
hasArrow={false}
200-
>
201-
<IconButton
202-
size="small"
203-
style={{
204-
display: 'flex',
205-
alignItems: 'center',
206-
marginLeft: appTheme.space.sm,
207-
}}
208-
onClick={(event) =>
209-
copyLink(`observation-${observation.id}`, event)
210-
}
190+
<SM
191+
style={{
192+
color: appTheme.palette.grey[600],
193+
marginTop: appTheme.space.xs,
194+
}}
195+
>
196+
{formatDuration(start)} - {formatDuration(end)}
197+
</SM>
198+
</Title>
199+
<Tooltip
200+
content={t('__VIDEO_PAGE_OBSERVATION_LINK_TOOLTIP')}
201+
size="large"
202+
type="light"
203+
placement="bottom-start"
204+
hasArrow={false}
211205
>
212-
<CopyIcon style={{ width: 14, height: 14 }} />
213-
</IconButton>
214-
</Tooltip>
215-
</div>
216-
<SM
217-
style={{
218-
color: appTheme.palette.grey[600],
219-
marginTop: appTheme.space.xs,
220-
marginLeft: appTheme.space.lg,
221-
}}
222-
>
223-
{formatDuration(start)} - {formatDuration(end)}
224-
</SM>
225-
</Accordion.Label>
226-
</Accordion.Header>
227-
<Accordion.Panel style={{ padding: 0 }}>
228-
<ObservationForm
229-
observation={observation}
230-
onSubmit={handleSubmit}
231-
paragraphs={transcript?.paragraphs}
232-
/>
233-
</Accordion.Panel>
234-
</Accordion.Section>
235-
</Accordion>
206+
<IconButton
207+
size="small"
208+
onClick={(event) =>
209+
copyLink(`observation-${observation.id}`, event)
210+
}
211+
>
212+
<ShareIcon />
213+
</IconButton>
214+
</Tooltip>
215+
</Container>
216+
</Accordion.Label>
217+
</Accordion.Header>
218+
<Accordion.Panel style={{ padding: 0 }}>
219+
<ObservationForm
220+
observation={observation}
221+
onSubmit={handleSubmit}
222+
paragraphs={transcript?.paragraphs}
223+
/>
224+
</Accordion.Panel>
225+
</Accordion.Section>
226+
</Accordion>
227+
</>
236228
);
237229
};
238230

0 commit comments

Comments
 (0)