Skip to content

Commit

Permalink
Merge pull request Expensify#24425 from spcheema/fix/21073-show-avata…
Browse files Browse the repository at this point in the history 
…r-preview

Enable avatar preview for workspace & thread replies
  • Loading branch information
@PauloGasparSv
PauloGasparSv authored Aug 15, 2023
2 parents c419a10 + 8ff1d2f commit 82f06ed
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 19 deletions.
5 changes: 5 additions & 0 deletions src/components/AttachmentModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ const propTypes = {
...withLocalizePropTypes,

...windowDimensionsPropTypes,

/** Denotes whether it is a workspace avatar or not */
isWorkspaceAvatar: PropTypes.bool,
};

const defaultProps = {
Expand All @@ -86,6 +89,7 @@ const defaultProps = {
onModalShow: () => {},
onModalHide: () => {},
onCarouselAttachmentChange: () => {},
isWorkspaceAvatar: false,
};

function AttachmentModal(props) {
Expand Down Expand Up @@ -345,6 +349,7 @@ function AttachmentModal(props) {
isAuthTokenRequired={isAuthTokenRequired}
file={file}
onToggleKeyboard={updateConfirmButtonVisibility}
isWorkspaceAvatar={props.isWorkspaceAvatar}
/>
)
)}
Expand Down
17 changes: 16 additions & 1 deletion src/components/Attachments/AttachmentView/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import variables from '../../../styles/variables';
import AttachmentViewImage from './AttachmentViewImage';
import AttachmentViewPdf from './AttachmentViewPdf';
import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL';

import * as StyleUtils from '../../../styles/StyleUtils';
import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes';

const propTypes = {
Expand All @@ -34,6 +34,9 @@ const propTypes = {
/** Extra styles to pass to View wrapper */
// eslint-disable-next-line react/forbid-prop-types
containerStyles: PropTypes.arrayOf(PropTypes.object),

/** Denotes whether it is a workspace avatar or not */
isWorkspaceAvatar: PropTypes.bool,
};

const defaultProps = {
Expand All @@ -42,6 +45,7 @@ const defaultProps = {
shouldShowLoadingSpinnerIcon: false,
onToggleKeyboard: () => {},
containerStyles: [],
isWorkspaceAvatar: false,
};

function AttachmentView({
Expand All @@ -57,16 +61,27 @@ function AttachmentView({
onToggleKeyboard,
translate,
isFocused,
isWorkspaceAvatar,
}) {
const [loadComplete, setLoadComplete] = useState(false);

// Handles case where source is a component (ex: SVG)
if (_.isFunction(source)) {
let iconFillColor = '';
let additionalStyles = [];
if (isWorkspaceAvatar) {
const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name);
iconFillColor = defaultWorkspaceAvatarColor.fill;
additionalStyles = [defaultWorkspaceAvatarColor];
}

return (
<Icon
src={source}
height={variables.defaultAvatarPreviewSize}
width={variables.defaultAvatarPreviewSize}
fill={iconFillColor}
additionalStyles={additionalStyles}
/>
);
}
Expand Down
72 changes: 55 additions & 17 deletions src/components/RoomHeaderAvatars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import Avatar from './Avatar';
import themeColors from '../styles/themes/default';
import * as StyleUtils from '../styles/StyleUtils';
import avatarPropTypes from './avatarPropTypes';
import PressableWithoutFocus from './Pressable/PressableWithoutFocus';
import * as UserUtils from '../libs/UserUtils';
import AttachmentModal from './AttachmentModal';

const propTypes = {
icons: PropTypes.arrayOf(avatarPropTypes),
Expand All @@ -25,14 +28,31 @@ function RoomHeaderAvatars(props) {

if (props.icons.length === 1) {
return (
<Avatar
source={props.icons[0].source}
imageStyles={[styles.avatarLarge]}
fill={themeColors.iconSuccessFill}
size={CONST.AVATAR_SIZE.LARGE}
name={props.icons[0].name}
type={props.icons[0].type}
/>
<AttachmentModal
headerTitle={props.icons[0].name}
source={UserUtils.getFullSizeAvatar(props.icons[0].source, props.icons[0].id)}
isAuthTokenRequired
isWorkspaceAvatar={props.icons[0].type === CONST.ICON_TYPE_WORKSPACE}
originalFileName={props.icons[0].name}
>
{({show}) => (
<PressableWithoutFocus
style={[styles.noOutline]}
onPress={show}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityLabel={props.icons[0].name}
>
<Avatar
source={props.icons[0].source}
imageStyles={[styles.avatarLarge]}
fill={themeColors.iconSuccessFill}
size={CONST.AVATAR_SIZE.LARGE}
name={props.icons[0].name}
type={props.icons[0].type}
/>
</PressableWithoutFocus>
)}
</AttachmentModal>
);
}

Expand All @@ -45,27 +65,45 @@ function RoomHeaderAvatars(props) {
StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED),
];
return (
<View pointerEvents="none">
<View pointerEvents="box-none">
<View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
{_.map(iconsToDisplay, (icon, index) => (
<View
key={`${icon.source}${index}`}
style={[styles.justifyContentCenter, styles.alignItemsCenter]}
>
<Avatar
source={icon.source}
fill={themeColors.iconSuccessFill}
size={CONST.AVATAR_SIZE.LARGE}
containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
name={icon.name}
type={icon.type}
/>
<AttachmentModal
headerTitle={icon.name}
source={UserUtils.getFullSizeAvatar(icon.source, icon.id)}
isAuthTokenRequired
originalFileName={icon.name}
isWorkspaceAvatar={icon.type === CONST.ICON_TYPE_WORKSPACE}
>
{({show}) => (
<PressableWithoutFocus
style={[styles.mln4, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
onPress={show}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityLabel={icon.name}
>
<Avatar
source={icon.source}
fill={themeColors.iconSuccessFill}
size={CONST.AVATAR_SIZE.LARGE}
containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
name={icon.name}
type={icon.type}
/>
</PressableWithoutFocus>
)}
</AttachmentModal>
{index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.icons.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && (
<>
<View
style={[
styles.roomHeaderAvatarSize,
styles.roomHeaderAvatar,
styles.mln4,
...iconStyle,
StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type),
styles.roomHeaderAvatarOverlay,
Expand Down
1 change: 0 additions & 1 deletion src/styles/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2358,7 +2358,6 @@ const styles = {

roomHeaderAvatar: {
backgroundColor: themeColors.appBG,
marginLeft: -16,
borderRadius: 100,
borderColor: themeColors.componentBG,
borderWidth: 4,
Expand Down
4 changes: 4 additions & 0 deletions src/styles/utilities/spacing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,10 @@ export default {
marginLeft: 16,
},

mln4: {
marginLeft: -16,
},

ml5: {
marginLeft: 20,
},
Expand Down

0 comments on commit 82f06ed

Please sign in to comment.