Use custom avatars (#1839)

superdesk · Aug 10, 2023 · c453929 · c453929
1 parent 6e18be8
commit c453929
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 154 deletions.
diff --git a/client/components/Assignments/AssignmentItem/AssignmentItem_test.tsx b/client/components/Assignments/AssignmentItem/AssignmentItem_test.tsx
@@ -8,7 +8,7 @@ import {Provider} from 'react-redux';
 import * as helpers from '../../tests/helpers';
 import {cloneDeep} from 'lodash';
 import {AbsoluteDate} from '../../AbsoluteDate';
-import {UserAvatar} from '../../UserAvatar';
+import {UserAvatarWithMargin} from '../../UserAvatar';
 
 describe('assignments', () => {
     describe('components', () => {
@@ -101,7 +101,7 @@ describe('assignments', () => {
                 const wrapper = getMountedWrapper();
 
                 expect(wrapper.find('.icon-time').length).toBe(1);
-                expect(wrapper.find(UserAvatar).length).toBe(1);
+                expect(wrapper.find(UserAvatarWithMargin).length).toBe(1);
                 expect(wrapper.find(AbsoluteDate).length).toBe(1);
             });
 

diff --git a/client/components/Assignments/AssignmentItem/index.tsx b/client/components/Assignments/AssignmentItem/index.tsx
@@ -20,7 +20,7 @@ import {ASSIGNMENTS, CLICK_DELAY} from '../../../constants';
 import {getAssignmentTypeInfo} from '../../../utils/assignments';
 
 import {Menu} from 'superdesk-ui-framework/react';
-import {UserAvatar} from '../../';
+import {UserAvatarWithMargin} from '../../../components/UserAvatar';
 import {Item, Border, Column, Row} from '../../UI/List';
 
 import {getComponentForField, getAssignmentsListView} from './fields';
@@ -217,14 +217,7 @@ export class AssignmentItem extends React.Component<IProps, IState> {
 
         return (
             <Column border={false}>
-                <UserAvatar
-                    user={user}
-                    large={false}
-                    withLoggedInfo={isCurrentUser}
-                    isLoggedIn={isCurrentUser}
-                    tooltip={tooltip}
-                    showInactive
-                />
+                <UserAvatarWithMargin user={user} tooltip={tooltip} />
             </Column>
         );
     }

diff --git a/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreviewHeader.tsx b/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreviewHeader.tsx
@@ -9,7 +9,6 @@ import {assignmentUtils, planningUtils, gettext, stringUtils} from '../../../uti
 import {Item, Column, Row} from '../../UI/List';
 import {ContentBlock, ContentBlockInner, Tools} from '../../UI/SidePanel';
 import {
-    UserAvatar,
     AbsoluteDate,
     PriorityLabel,
     StateLabel,
@@ -18,6 +17,7 @@ import {
     ItemActionsMenu,
     Label,
 } from '../../';
+import {UserAvatar} from '../../../components/UserAvatar';
 import {TO_BE_CONFIRMED_FIELD} from '../../../constants';
 
 export const AssignmentPreviewHeader = ({
@@ -77,10 +77,7 @@ export const AssignmentPreviewHeader = ({
                                 <Column border={false}>
                                     <UserAvatar
                                         user={assignedUser}
-                                        large={true}
-                                        noMargin={true}
-                                        initials={false}
-                                        showInactive
+                                        size="large"
                                     />
                                 </Column>
                             )

diff --git a/client/components/Coverages/CoverageEditor/CoverageFormHeader.tsx b/client/components/Coverages/CoverageEditor/CoverageFormHeader.tsx
@@ -8,7 +8,7 @@ import {IArticle, IDesk, IUser} from 'superdesk-api';
 import {getCreator, getItemInArrayById, gettext, planningUtils, onEventCapture} from '../../../utils';
 import {Item, Border, Column, Row as ListRow} from '../../UI/List';
 import {Button} from '../../UI';
-import {UserAvatar} from '../../';
+import {UserAvatar} from '../../../components/UserAvatar';
 import {StateLabel} from '../../StateLabel';
 import * as actions from '../../../actions';
 
@@ -85,10 +85,8 @@ export class CoverageFormHeaderComponent extends React.PureComponent<IProps> {
                     <Border />
                     <Column border={false}>
                         <UserAvatar
-                            empty={true}
-                            noMargin={true}
-                            large={true}
-                            initials={false}
+                            user={null}
+                            size="large"
                         />
                     </Column>
                     <Column grow={true} border={false}>
@@ -122,10 +120,8 @@ export class CoverageFormHeaderComponent extends React.PureComponent<IProps> {
                 <Border />
                 <Column border={false}>
                     <UserAvatar
-                        user={userAssigned}
-                        noMargin={true}
-                        large={true}
-                        showInactive
+                        user={userAssigned == null || typeof userAssigned === 'string' ? null : userAssigned}
+                        size="large"
                     />
                 </Column>
                 <Column grow={true} border={false}>

diff --git a/client/components/Coverages/CoverageIcons.tsx b/client/components/Coverages/CoverageIcons.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import moment from 'moment-timezone';
-import {getUserInitials} from './../../components/UserAvatar';
+import {getCustomAvatarContent, getUserInitials} from './../../components/UserAvatar';
 import * as config from 'appConfig';
 import {IPlanningCoverageItem, IG2ContentType, IContactItem, IPlanningConfig} from '../../interfaces';
 import {IUser, IDesk} from 'superdesk-api';
@@ -17,7 +17,7 @@ import {
 import {IPropsAvatarPlaceholder} from 'superdesk-ui-framework/react/components/avatar/avatar-placeholder';
 import {IPropsAvatar} from 'superdesk-ui-framework/react/components/avatar/avatar';
 import {trimStartExact} from 'superdesk-core/scripts/core/helpers/utils';
-import {getItemWorkflowStateLabel, planningUtils} from '../../utils';
+import {getItemWorkflowStateLabel, gettext, planningUtils} from '../../utils';
 import {getVocabularyItemFieldTranslated} from '../../utils/vocabularies';
 import {getUserInterfaceLanguageFromCV} from '../../utils/users';
 import './coverage-icons.scss';
@@ -67,8 +67,9 @@ export function getAvatarForCoverage(
 
     if (user == null) {
         const placeholder: Omit<IPropsAvatarPlaceholder, 'size'> = {
-            kind: 'plus-button',
+            kind: 'user-icon',
             icon: icon,
+            tooltip: gettext('Unassigned'),
         };
 
         return placeholder;
@@ -78,6 +79,7 @@ export function getAvatarForCoverage(
             imageUrl: user.picture_url,
             displayName: user.display_name,
             icon: icon,
+            customContent: getCustomAvatarContent(user),
         };
 
         return avatar;

diff --git a/client/components/Coverages/CoverageItem.tsx b/client/components/Coverages/CoverageItem.tsx
@@ -20,7 +20,6 @@ import {getUserInterfaceLanguageFromCV} from '../../utils/users';
 import {Item, Column, Row, Border, ActionMenu} from '../UI/List';
 import {StateLabel, InternalNoteLabel} from '../../components';
 import {CoverageIcons} from './CoverageIcons';
-import {UserAvatar} from '../UserAvatar';
 
 interface IProps {
     coverage: IPlanningCoverageItem;
@@ -166,33 +165,19 @@ export class CoverageItemComponent extends React.Component<IProps, IState> {
 
         return (
             <Column border={false}>
-                {this.state.userAssigned ? (
-                    <UserAvatar
-                        user={this.state.userAssigned}
-                        small={false}
-                        showInactive
-                    />
-                ) : (
-                    <UserAvatar
-                        empty={true}
-                        noMargin={true}
-                        initials={false}
-                        small={false}
-                    />
-                )}
+                <CoverageIcons
+                    coverages={[this.props.coverage]}
+                    users={this.props.users}
+                    desks={this.props.desks}
+                    contentTypes={this.props.contentTypes}
+                />
             </Column>
         );
     }
 
     renderFirstRow() {
         return (
             <Row paddingBottom>
-                <CoverageIcons
-                    coverages={[this.props.coverage]}
-                    users={this.props.users}
-                    desks={this.props.desks}
-                    contentTypes={this.props.contentTypes}
-                />
                 <span className="sd-overflow-ellipsis sd-list-item--element-grow">
                     {this.state.displayContentType}
                 </span>

diff --git a/client/components/LockContainer/LockContainerPopup.tsx b/client/components/LockContainer/LockContainerPopup.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import {gettext} from '../../utils';
 
-import {UserAvatar} from '../';
+import {UserAvatarWithMargin} from '../../components/UserAvatar';
 import {Popup, Header, Content, Footer} from '../UI/Popup';
 import {Button} from '../UI';
 
@@ -33,7 +33,7 @@ export const LockContainerPopup = ({
                 noBorder={true}
             />
             <Content>
-                <UserAvatar user={user} large={true} />
+                <UserAvatarWithMargin user={user} size="large" />
                 <div>{user.display_name}</div>
             </Content>
             <Footer noBorder={true}>

diff --git a/client/components/LockContainer/index.tsx b/client/components/LockContainer/index.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {get} from 'lodash';
 import classNames from 'classnames';
 
-import {UserAvatar} from '../';
+import {UserAvatarWithMargin} from '../../components/UserAvatar';
 import {LockContainerPopup} from './LockContainerPopup';
 
 import './style.scss';
@@ -49,11 +49,7 @@ export class LockContainer extends React.Component {
                     )}
                 >
                     <a onClick={this.toggleOpenUnlockPopup}>
-                        <UserAvatar
-                            user={user}
-                            withLoggedInfo={withLoggedInfo}
-                            small={small}
-                        />
+                        <UserAvatarWithMargin user={user} />
                     </a>
                 </div>
                 {this.state.openUnlockPopup && (

diff --git a/client/components/UI/Form/SelectUserInput/SelectUserPopup.tsx b/client/components/UI/Form/SelectUserInput/SelectUserPopup.tsx
@@ -7,7 +7,7 @@ import {KEYCODES} from '../../constants';
 import {gettext, scrollListItemIfNeeded, onEventCapture} from '../../utils';
 
 import {Popup, Content} from '../../Popup';
-import {UserAvatar} from '../../../';
+import {UserAvatarWithMargin} from '../../../../components/UserAvatar';
 
 import './style.scss';
 
@@ -118,7 +118,7 @@ export class SelectUserPopup extends React.Component {
                                         {'user-search__popup-item--active': index === this.state.activeIndex})}
                             >
                                 <button type="button" onClick={this.handleOnChange.bind(null, user)}>
-                                    <UserAvatar user={user} />
+                                    <UserAvatarWithMargin user={user} />
                                     <div className="user-search__popup-item-label">{user.display_name}</div>
                                 </button>
                             </li>
@@ -127,7 +127,7 @@ export class SelectUserPopup extends React.Component {
                         {users.length === 0 && (
                             <li className="user-search__popup-item">
                                 <button disabled>
-                                    <UserAvatar empty={true} initials={false} />
+                                    <UserAvatarWithMargin user={null} />
                                     <div className="user-search__popup-item-label">{gettext('No users found')}</div>
                                 </button>
                             </li>

diff --git a/client/components/UI/Form/SelectUserInput/index.tsx b/client/components/UI/Form/SelectUserInput/index.tsx
@@ -7,7 +7,7 @@ import {KEYCODES} from '../../constants';
 import {onEventCapture} from '../../utils';
 
 import {Row, LineInput, Label, Input} from '../';
-import {UserAvatar} from '../../../';
+import {UserAvatarWithMargin} from '../../../../components/UserAvatar';
 import {SelectUserPopup} from './SelectUserPopup';
 
 interface IProps {
@@ -118,7 +118,7 @@ export class SelectUserInput extends React.Component<IProps, IState> {
                                     onClick={this.openPopup}
                                     style={inline ? {margin: 0} : {}}
                                 >
-                                    <UserAvatar user={value} />
+                                    <UserAvatarWithMargin user={value} />
                                     <div className="user-search__popup-item-label">{value.display_name}</div>
                                     {!readOnly && (
                                         <button type="button" onClick={this.onUserChange.bind(null, null)}>