diff --git a/projects/packages/forms/changelog/add-forms-native-dataviews-media-display b/projects/packages/forms/changelog/add-forms-native-dataviews-media-display new file mode 100644 index 0000000000000..d1607232c3afc --- /dev/null +++ b/projects/packages/forms/changelog/add-forms-native-dataviews-media-display @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Forms: use DataViews mediaField to display responders avatars diff --git a/projects/packages/forms/src/dashboard/components/gravatar/index.tsx b/projects/packages/forms/src/dashboard/components/gravatar/index.tsx index 7700be8e6fb20..50d375e943c8c 100644 --- a/projects/packages/forms/src/dashboard/components/gravatar/index.tsx +++ b/projects/packages/forms/src/dashboard/components/gravatar/index.tsx @@ -5,6 +5,7 @@ import { Hovercards } from '@gravatar-com/hovercards'; import '@gravatar-com/hovercards/dist/style.css'; import { useEffect, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +import clsx from 'clsx'; import { sha256 } from 'js-sha256'; import './style.scss'; @@ -23,6 +24,7 @@ type GravatarProps = { email: string; size?: number; useHovercard?: boolean; + isRounded?: boolean; }; /** @@ -40,6 +42,7 @@ export default function Gravatar( { email, size = 48, useHovercard = true, + isRounded = true, }: GravatarProps ): JSX.Element | null { const profileImageRef = useRef( null ); const hovercardRef = useRef( null ); @@ -80,10 +83,14 @@ export default function Gravatar( { const hashedEmail = sha256( email ); + const classes = clsx( 'jp-forms__gravatar', { + 'is-rounded': isRounded, + } ); + return ( { [ + { + id: 'avatar', + label: __( 'Avatar', 'jetpack-forms' ), + render: ( { item } ) => { + const authorInfo = decodeEntities( + item.author_name || item.author_email || item.author_url || item.ip + ); + const defaultImage = item.author_name || item.author_email ? 'initials' : 'mp'; + + return ( + <> + + + ); + }, + enableSorting: false, + enableHiding: true, + globalSearch: false, + type: 'media', + }, { id: 'from', label: __( 'From', 'jetpack-forms' ), @@ -227,7 +255,7 @@ export default function InboxView() { const authorInfo = decodeEntities( item.author_name || item.author_email || item.author_url || item.ip ); - const defaultImage = item.author_name || item.author_email ? 'initials' : 'mp'; + return (
{ item.is_unread && ( @@ -238,14 +266,6 @@ export default function InboxView() { ● ) } - { wrapperUnread( item.is_unread, authorInfo ) }
); diff --git a/projects/packages/forms/src/dashboard/inbox/dataviews/views.js b/projects/packages/forms/src/dashboard/inbox/dataviews/views.js index dff503c33f20f..c76097ec9dacb 100644 --- a/projects/packages/forms/src/dashboard/inbox/dataviews/views.js +++ b/projects/packages/forms/src/dashboard/inbox/dataviews/views.js @@ -13,7 +13,9 @@ const defaultView = { filters: [], page: 1, perPage: 20, - fields: [ 'from', 'date', 'source', 'ip' ], + fields: [ 'date', 'source', 'ip' ], + titleField: 'from', + mediaField: 'avatar', }; export const defaultLayouts = { diff --git a/projects/packages/forms/src/dashboard/inbox/style.scss b/projects/packages/forms/src/dashboard/inbox/style.scss index 90142c4ec0fb5..98073c3e060d1 100644 --- a/projects/packages/forms/src/dashboard/inbox/style.scss +++ b/projects/packages/forms/src/dashboard/inbox/style.scss @@ -305,6 +305,13 @@ border-right: 1px solid var(--jp-gray-5); } + // Override DataViews default max-width for media in primary column + // to better fit smaller avatars (24x24 instead of larger preview images) + .dataviews-column-primary__media { + max-width: 32px; + } + + .dataviews__view-actions { align-items: center; @@ -356,7 +363,8 @@ color: #d63638; font-size: 8px; position: absolute; - left: -12px; + left: -10px; + top: 5px; cursor: pointer; } }