From 23df8c29b89493001aca99922be8fa32e6ead1b4 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Thu, 18 Jul 2024 21:43:27 +0200 Subject: [PATCH 1/6] feat: temp --- .../components/CardList/CardListItem.component.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js index 328926bdb8..033e74e72c 100644 --- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js +++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js @@ -3,8 +3,8 @@ import i18n from '@dhis2/d2-i18n'; import React from 'react'; import moment from 'moment'; import type { ComponentType } from 'react'; -import { Avatar, Grid, withStyles } from '@material-ui/core'; -import { colors, Tag, IconCheckmark16 } from '@dhis2/ui'; +import { Grid, withStyles } from '@material-ui/core'; +import { colors, Tag, IconCheckmark16, UserAvatar } from '@dhis2/ui'; import type { CardDataElementsInformation, CardProfileImageElementInformation, @@ -149,7 +149,8 @@ const CardListItemIndex = ({ const imageValue = item.values[imageElement.id]; return (
- {imageValue && } + {imageValue && } +
); }; @@ -207,7 +208,7 @@ const CardListItemIndex = ({ }; return ( -
+
From 0d6dc313e2448c706172221d3a0082980bb89efe Mon Sep 17 00:00:00 2001 From: henrikmv Date: Fri, 19 Jul 2024 18:50:50 +0200 Subject: [PATCH 2/6] feat: change to UserAvatar from dhis2/ui --- .../capture-core/components/CardList/CardListItem.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js index 033e74e72c..86110fb011 100644 --- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js +++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js @@ -208,7 +208,7 @@ const CardListItemIndex = ({ }; return ( -
+
From 9801b1bbb92ce9a865da5c0fb064d70e12d718be Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 16:06:45 +0200 Subject: [PATCH 3/6] feat: create component for user avatar image --- .../CardList/CardListItem.component.js | 9 +-- .../UserAvatarImage.component.js | 58 +++++++++++++++++++ 2 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js index 86110fb011..cdae762705 100644 --- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js +++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js @@ -4,7 +4,8 @@ import React from 'react'; import moment from 'moment'; import type { ComponentType } from 'react'; import { Grid, withStyles } from '@material-ui/core'; -import { colors, Tag, IconCheckmark16, UserAvatar } from '@dhis2/ui'; +import { colors, Tag, IconCheckmark16 } from '@dhis2/ui'; +import { UserAvatarImage } from '../../../capture-ui/UserAvatarImage/UserAvatarImage.component'; import type { CardDataElementsInformation, CardProfileImageElementInformation, @@ -62,8 +63,8 @@ const getStyles = (theme: Theme) => ({ flexGrow: 1, }, image: { - width: theme.typography.pxToRem(44), - height: theme.typography.pxToRem(44), + width: theme.typography.pxToRem(54), + height: theme.typography.pxToRem(54), marginRight: theme.typography.pxToRem(8), }, buttonMargin: { @@ -149,7 +150,7 @@ const CardListItemIndex = ({ const imageValue = item.values[imageElement.id]; return (
- {imageValue && } + {imageValue && }
); diff --git a/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js b/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js new file mode 100644 index 0000000000..f125b18eb6 --- /dev/null +++ b/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js @@ -0,0 +1,58 @@ +// @flow +import React from 'react'; +import { withStyles } from '@material-ui/core/styles'; + +const sizes = { + extrasmall: { + height: 24, + width: 24, + }, + small: { + height: 36, + width: 36, + }, + medium: { + height: 48, + width: 48, + }, + large: { + height: 72, + width: 72, + }, + extralarge: { + height: 144, + width: 144, + }, +}; + +const styles = { + img: { + borderRadius: '50%', + objectFit: 'cover', + }, + ...sizes, +}; + +type Props = { + imageUrl: string, + dataTest: string, + classes: Object, + className: Object, + size: 'extrasmall' | 'small' | 'medium' | 'large' | 'extralarge', +}; + +const UserAvatarImagePlain = ({ imageUrl, dataTest, classes, className, size }: Props) => { + return ( +
+ user avatar +
+ ); +}; + + +export const UserAvatarImage = withStyles(styles)(UserAvatarImagePlain); From 48b8a67ef0be865ff4b6635ab6be5c13d6fc9cb4 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 16:08:00 +0200 Subject: [PATCH 4/6] fix: lint --- .../UserAvatarImage.component.js | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js b/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js index f125b18eb6..c10b53fcd3 100644 --- a/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js +++ b/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js @@ -41,18 +41,16 @@ type Props = { size: 'extrasmall' | 'small' | 'medium' | 'large' | 'extralarge', }; -const UserAvatarImagePlain = ({ imageUrl, dataTest, classes, className, size }: Props) => { - return ( -
- user avatar -
- ); -}; +const UserAvatarImagePlain = ({ imageUrl, dataTest, classes, className, size }: Props) => ( +
+ user avatar +
+); export const UserAvatarImage = withStyles(styles)(UserAvatarImagePlain); From ed4306efc872ffac4e3b4c0851d70470f8c2c1f4 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Wed, 31 Jul 2024 10:47:04 +0200 Subject: [PATCH 5/6] fix: review changes --- .../components/CardList/CardListItem.component.js | 4 ++-- .../capture-ui/UserAvatarImage/UserAvatarImage.component.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js index 585db00e03..f2931cdefb 100644 --- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js +++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js @@ -6,7 +6,7 @@ import type { ComponentType } from 'react'; import { Grid, withStyles } from '@material-ui/core'; import { colors, Tag, IconCheckmark16, Tooltip } from '@dhis2/ui'; import { useTimeZoneConversion } from '@dhis2/app-runtime'; -import { UserAvatarImage } from '../../../capture-ui/UserAvatarImage/UserAvatarImage.component'; +import { CardImage } from '../../../capture-ui/UserAvatarImage/UserAvatarImage.component'; import type { CardDataElementsInformation, CardProfileImageElementInformation, @@ -152,7 +152,7 @@ const CardListItemIndex = ({ const imageValue = item.values[imageElement.id]; return (
- {imageValue && } + {imageValue && }
); diff --git a/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js b/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js index c10b53fcd3..c4873cbb42 100644 --- a/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js +++ b/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js @@ -41,7 +41,7 @@ type Props = { size: 'extrasmall' | 'small' | 'medium' | 'large' | 'extralarge', }; -const UserAvatarImagePlain = ({ imageUrl, dataTest, classes, className, size }: Props) => ( +const CardImagePlain = ({ imageUrl, dataTest, classes, className, size }: Props) => (
Date: Wed, 31 Jul 2024 11:31:32 +0200 Subject: [PATCH 6/6] fix: change file and folder name --- .../capture-core/components/CardList/CardListItem.component.js | 2 +- .../CardImage.component.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/core_modules/capture-ui/{UserAvatarImage/UserAvatarImage.component.js => CardImage/CardImage.component.js} (100%) diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js index f2931cdefb..a1fe4bc5d1 100644 --- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js +++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js @@ -6,7 +6,7 @@ import type { ComponentType } from 'react'; import { Grid, withStyles } from '@material-ui/core'; import { colors, Tag, IconCheckmark16, Tooltip } from '@dhis2/ui'; import { useTimeZoneConversion } from '@dhis2/app-runtime'; -import { CardImage } from '../../../capture-ui/UserAvatarImage/UserAvatarImage.component'; +import { CardImage } from '../../../capture-ui/CardImage/CardImage.component'; import type { CardDataElementsInformation, CardProfileImageElementInformation, diff --git a/src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js b/src/core_modules/capture-ui/CardImage/CardImage.component.js similarity index 100% rename from src/core_modules/capture-ui/UserAvatarImage/UserAvatarImage.component.js rename to src/core_modules/capture-ui/CardImage/CardImage.component.js