Skip to content

Commit e51aa60

Browse files
cooper-joecooper-joe
committed
fix(interpretation): visual design, UX improvements
1 parent 405384c commit e51aa60

21 files changed

Lines changed: 350 additions & 266 deletions

‎src/components/Interpretations/InterpretationModal/CommentDeleteButton.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,26 @@ import { IconDelete16, colors } from '@dhis2/ui'
33
import PropTypes from 'prop-types'
44
import React from 'react'
55
import { MessageIconButton } from '../common/index.js'
6+
import { useConfirmClick } from '../common/useConfirmClick.js'
67
import { useDeleteCommentFromActiveInterpretation } from '../InterpretationsProvider/hooks.js'
78

89
const CommentDeleteButton = ({ id }) => {
910
const [remove, { loading, error }] =
1011
useDeleteCommentFromActiveInterpretation({ id })
12+
const { isConfirming, onClick } = useConfirmClick(remove)
1113

1214
return (
1315
<div className="delete-button-container">
1416
<MessageIconButton
15-
tooltipContent={i18n.t('Delete')}
17+
tooltipContent={
18+
isConfirming
19+
? i18n.t('Click again to delete')
20+
: i18n.t('Delete')
21+
}
1622
iconComponent={IconDelete16}
17-
onClick={remove}
23+
label={isConfirming ? i18n.t('Delete?') : undefined}
24+
confirming={isConfirming}
25+
onClick={onClick}
1826
disabled={loading}
1927
/>
2028
{error && (

‎src/components/Interpretations/InterpretationModal/CommentUpdateForm.js‎

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import i18n from '@dhis2/d2-i18n'
2-
import { Button, spacers, colors } from '@dhis2/ui'
2+
import { Button } from '@dhis2/ui'
33
import PropTypes from 'prop-types'
44
import React, { useState } from 'react'
55
import { RichTextEditor } from '../../RichText/index.js'
@@ -21,37 +21,23 @@ export const CommentUpdateForm = ({ id, text, onCancel, onComplete }) => {
2121
const errorText = error ? i18n.t('Could not update comment') : ''
2222

2323
return (
24-
<div className="message">
25-
<MessageEditorContainer currentUserName={currentUser.name}>
26-
<RichTextEditor
27-
inputPlaceholder={i18n.t('Enter comment text')}
28-
onChange={setCommentText}
29-
value={commentText}
30-
disabled={loading}
31-
errorText={errorText}
32-
/>
33-
<MessageButtonStrip>
34-
<Button loading={loading} primary small onClick={update}>
35-
{i18n.t('Update')}
36-
</Button>
37-
<Button
38-
disabled={loading}
39-
secondary
40-
small
41-
onClick={onCancel}
42-
>
43-
{i18n.t('Cancel')}
44-
</Button>
45-
</MessageButtonStrip>
46-
</MessageEditorContainer>
47-
<style jsx>{`
48-
.message {
49-
padding: 0 ${spacers.dp8} ${spacers.dp8};
50-
background-color: ${colors.grey100};
51-
border-radius: 5px;
52-
}
53-
`}</style>
54-
</div>
24+
<MessageEditorContainer currentUserName={currentUser.name}>
25+
<RichTextEditor
26+
inputPlaceholder={i18n.t('Enter comment text')}
27+
onChange={setCommentText}
28+
value={commentText}
29+
disabled={loading}
30+
errorText={errorText}
31+
/>
32+
<MessageButtonStrip>
33+
<Button loading={loading} primary small onClick={update}>
34+
{i18n.t('Update')}
35+
</Button>
36+
<Button disabled={loading} secondary small onClick={onCancel}>
37+
{i18n.t('Cancel')}
38+
</Button>
39+
</MessageButtonStrip>
40+
</MessageEditorContainer>
5541
)
5642
}
5743
CommentUpdateForm.propTypes = {

‎src/components/Interpretations/InterpretationModal/InterpretationModal.js‎

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useTimeZoneConversion } from '@dhis2/app-runtime'
12
import i18n from '@dhis2/d2-i18n'
23
import {
34
Modal,
@@ -12,6 +13,7 @@ import {
1213
CircularLoader,
1314
} from '@dhis2/ui'
1415
import cx from 'classnames'
16+
import moment from 'moment'
1517
import PropTypes from 'prop-types'
1618
import React, { useMemo } from 'react'
1719
import css from 'styled-jsx/css'
@@ -59,6 +61,7 @@ const InterpretationModal = ({
5961
}) => {
6062
const modalContentWidth = useModalContentWidth()
6163
const modalContentCSS = getModalContentCSS(modalContentWidth)
64+
const { fromServerDate } = useTimeZoneConversion()
6265
const currentUser = useInterpretationsCurrentUser()
6366
const {
6467
data: interpretation,
@@ -103,17 +106,17 @@ const InterpretationModal = ({
103106
dataTest="interpretation-modal"
104107
>
105108
<h1 className="title">
106-
<span className="ellipsis">
107-
{i18n.t(
108-
'Viewing interpretation: {{- visualisationName}}',
109-
{
110-
visualisationName:
111-
visualization.displayName ||
112-
visualization.name,
113-
nsSeparator: '^^',
114-
}
115-
)}
116-
</span>
109+
{interpretation?.created
110+
? i18n.t(
111+
'Viewing interpretation data from {{- interpretationDate}}',
112+
{
113+
interpretationDate: moment(
114+
fromServerDate(interpretation.created)
115+
).format('LL'),
116+
nsSeparator: '^^',
117+
}
118+
)
119+
: i18n.t('Viewing interpretation data')}
117120
</h1>
118121
<ModalContent className={modalContentCSS.className}>
119122
<div className="container">
@@ -157,28 +160,20 @@ const InterpretationModal = ({
157160
</div>
158161
</ModalContent>
159162
<ModalActions>
160-
<Button disabled={loading} onClick={onClose}>
161-
{i18n.t('Hide interpretation')}
163+
<Button secondary disabled={loading} onClick={onClose}>
164+
{i18n.t('Close')}
162165
</Button>
163166
</ModalActions>
164167
{modalCSS.styles}
165168
{modalContentCSS.styles}
166169
<style jsx>{`
167170
.title {
168171
color: ${colors.grey900};
169-
margin: 0px;
170-
padding: ${spacers.dp24} 0 ${spacers.dp4};
171-
}
172-
173-
.ellipsis {
174-
display: inline-block;
175-
font-size: 20px;
172+
margin: 0 0 ${spacers.dp4} 0;
173+
padding: 0 0 ${spacers.dp4};
174+
font-size: 16px;
176175
font-weight: 500;
177-
line-height: 24px;
178-
white-space: nowrap;
179-
width: 100%;
180-
overflow: hidden;
181-
text-overflow: ellipsis;
176+
line-height: 21px;
182177
}
183178
184179
.container {
@@ -200,7 +195,6 @@ const InterpretationModal = ({
200195
}
201196
202197
.thread-wrap {
203-
padding-right: ${spacers.dp4};
204198
flex-basis: 300px;
205199
flex-shrink: 0;
206200
}

‎src/components/Interpretations/InterpretationModal/InterpretationThread.js‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import { useTimeZoneConversion } from '@dhis2/app-runtime'
2-
import { IconClock16, colors } from '@dhis2/ui'
31
import cx from 'classnames'
4-
import moment from 'moment'
52
import PropTypes from 'prop-types'
63
import React, { useRef, useEffect } from 'react'
74
import { Interpretation, getInterpretationAccess } from '../common/index.js'
@@ -18,7 +15,6 @@ const InterpretationThread = ({
1815
dashboardRedirectUrl,
1916
}) => {
2017
const currentUser = useInterpretationsCurrentUser()
21-
const { fromServerDate } = useTimeZoneConversion()
2218
const focusRef = useRef()
2319

2420
useEffect(() => {
@@ -41,10 +37,6 @@ const InterpretationThread = ({
4137
dashboard: !!dashboardRedirectUrl,
4238
})}
4339
>
44-
<div className={'title'}>
45-
<IconClock16 color={colors.grey700} />
46-
{moment(fromServerDate(interpretation.created)).format('LLL')}
47-
</div>
4840
{DownloadMenu && (
4941
<DownloadMenu relativePeriodDate={interpretation.created} />
5042
)}
@@ -75,7 +67,6 @@ const InterpretationThread = ({
7567
)}
7668
<style jsx>{`
7769
.thread {
78-
margin-top: var(--spacers-dp16);
7970
overflow-y: auto;
8071
scroll-behavior: smooth;
8172
}
@@ -87,7 +78,7 @@ const InterpretationThread = ({
8778
.container {
8879
position: relative;
8980
overflow: auto;
90-
max-height: calc(100vh - 285px);
81+
max-height: calc(100vh - 258px);
9182
display: flex;
9283
flex-direction: column;
9384
}
@@ -120,21 +111,16 @@ const InterpretationThread = ({
120111
rotation;
121112
}
122113
123-
.title {
124-
display: flex;
125-
align-items: center;
126-
gap: var(--spacers-dp8);
127-
color: var(--colors-grey900);
128-
font-size: 14px;
129-
line-height: 18px;
130-
}
131-
132114
.comments {
133-
padding-left: 16px;
115+
margin-inline-start: var(--spacers-dp4);
116+
margin-block-start: var(--spacers-dp8);
117+
margin-block-end: var(--spacers-dp12);
118+
padding-inline-start: var(--spacers-dp12);
134119
display: flex;
135120
flex-direction: column;
136-
padding-top: var(--spacers-dp4);
137-
gap: var(--spacers-dp4);
121+
padding-block-start: var(--spacers-dp4);
122+
gap: var(--spacers-dp16);
123+
border-inline-start: 2px solid var(--colors-grey300);
138124
}
139125
140126
@keyframes rotation {

‎src/components/Interpretations/InterpretationModal/useModalContentWidth.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
22
import { useDebounce } from '../../../modules/utils.js'
33

44
const MODAL_SIDE_PADDING = 2 * 24
5-
const MODAL_SIDE_MARGINS = 2 * 128
5+
const MODAL_SIDE_MARGINS = 2 * 64
66

77
const computeModalContentWidth = (windowWidth) => {
88
return windowWidth - MODAL_SIDE_MARGINS - MODAL_SIDE_PADDING

‎src/components/Interpretations/InterpretationsUnit/InterpretationForm.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export const InterpretationForm = ({
7777
</>
7878
) : (
7979
<Input
80+
dense
8081
onFocus={() => setShowRichTextEditor(true)}
8182
placeholder={inputPlaceholder}
8283
disabled={disabled}

‎src/components/Interpretations/InterpretationsUnit/InterpretationList.js‎

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import { useTimeZoneConversion } from '@dhis2/app-runtime'
2-
import { IconCalendar24, colors, spacers } from '@dhis2/ui'
3-
import moment from 'moment'
41
import PropTypes from 'prop-types'
52
import React from 'react'
63
import { Interpretation } from '../common/index.js'
@@ -12,18 +9,10 @@ export const InterpretationList = ({
129
disabled,
1310
dashboardRedirectUrl,
1411
}) => {
15-
const { fromServerDate } = useTimeZoneConversion()
16-
1712
return (
1813
<ol className="interpretation-groups" data-test="interpretations-list">
1914
{Object.keys(interpretationIdsByDate).map((date) => (
2015
<li key={date}>
21-
<div className="date-section">
22-
<IconCalendar24 color={colors.grey600} />
23-
<time dateTime={date} className="date-header">
24-
{moment(fromServerDate(date)).format('ll')}
25-
</time>
26-
</div>
2716
<ol className="interpretation-list">
2817
{interpretationIdsByDate[date].map(
2918
(interpretationId) => (
@@ -41,37 +30,23 @@ export const InterpretationList = ({
4130
</li>
4231
))}
4332
<style jsx>{`
44-
.date-section {
45-
display: flex;
46-
gap: ${spacers.dp8};
47-
align-items: center;
48-
margin-bottom: ${spacers.dp8};
49-
}
50-
51-
.date-header {
52-
font-size: 14px;
53-
font-weight: 500;
54-
line-height: ${spacers.dp16};
55-
color: ${colors.grey800};
56-
}
57-
5833
.interpretation-groups {
5934
margin: 0;
6035
padding: 0;
61-
padding-top: ${spacers.dp12};
36+
padding-block-start: 20px;
6237
list-style: none;
6338
display: flex;
6439
flex-direction: column;
65-
gap: ${spacers.dp12};
40+
gap: 20px;
6641
}
6742
6843
.interpretation-list {
6944
margin: 0;
70-
padding-left: ${spacers.dp32};
45+
padding-inline-start: 0;
7146
list-style: none;
7247
display: flex;
7348
flex-direction: column;
74-
gap: ${spacers.dp4};
49+
gap: 20px;
7550
}
7651
`}</style>
7752
</ol>

‎src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,11 @@ export const InterpretationsUnit = ({
9292
.container {
9393
position: relative;
9494
padding: ${spacers.dp16};
95-
border-bottom: 1px solid ${colors.grey400};
9695
background-color: ${colors.white};
9796
}
9897
9998
.expanded {
100-
padding-bottom: ${spacers.dp32};
99+
padding-block-end: ${spacers.dp24};
101100
}
102101
103102
.loader {
@@ -111,6 +110,7 @@ export const InterpretationsUnit = ({
111110
display: flex;
112111
justify-content: space-between;
113112
cursor: pointer;
113+
margin-block-end: ${spacers.dp12};
114114
}
115115
116116
.title {

0 commit comments

Comments
 (0)