Skip to content

Commit

Permalink
contacts card code improvements (superdesk#4727)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomaskikutis
tomaskikutis authored Jan 20, 2025
1 parent 665f5aa commit 5dc82cf
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 101 deletions.
20 changes: 20 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"dependencies": {
"@metadata/exif": "github:superdesk/exif#431066d",
"@popperjs/core": "2.10.2",
"@sourcefabric/common": "0.0.43",
"@superdesk/common": "0.0.17",
"@types/angular": "1.6.50",
"@types/draft-js": "0.11.5",
Expand Down
2 changes: 1 addition & 1 deletion scripts/apps/contacts/components/ContactFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ interface IProps {
*/
export const ContactFooter: React.FunctionComponent<IProps> = ({item}) => {
return (
<Spacer style={{padding: 8}} h gap="4" justifyContent="start" alignItems="center" noGrow>
<Spacer style={{padding: 8}} h gap="16" justifyContent="start" alignItems="center" noGrow>
<Spacer h gap="4" justifyContent="start" alignItems="center" noWrap>
<span className="sd-grid-item__text-label">{gettext('Updated:')}</span>
<DateTime dateTime={item._updated} />
Expand Down
184 changes: 85 additions & 99 deletions scripts/apps/contacts/components/ContactInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
/* eslint-disable react/no-multi-comp */
import React from 'react';
import {ItemContainer} from 'apps/contacts/components';
import {ContactName, Notes, JobTitle} from 'apps/contacts/components/fields';
import {isEmpty, findKey} from 'lodash';
import {gettext} from 'core/utils';
import {IContact} from 'superdesk-api';
import {ContentDivider, Icon, Spacer} from 'superdesk-ui-framework/react';
import {ContentDivider, Icon, Spacer, SpacerBlock} from 'superdesk-ui-framework/react';
import {WithDivider} from '@sourcefabric/common';

interface IProps {
item: IContact;
showIfContactIsInactive?: string;
hideHeader?: boolean;
}

const ContactDetail: React.FunctionComponent = ({children}: {children: Array<JSX.Element>}) => (
<Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
{children}
</Spacer>
);

/**
* Media Contact Info - renders contact's information
*/
Expand All @@ -20,114 +28,92 @@ export const ContactInfo: React.FunctionComponent<IProps> = ({
showIfContactIsInactive,
hideHeader,
}) => {
const meta = [];
const info = [];

const contactJobTitle = item.job_title ? <JobTitle item={item} /> : null;
const contactOrg = item.first_name && item.organisation ?
<span>{item.organisation}</span> : null;

if (hideHeader != true) {
info.push(
<Spacer style={{margin: '8px 0'}} h gap="8" justifyContent="start" alignItems="center" noWrap>
<div
style={{
backgroundColor: 'var(--sd-colour-success)',
borderRadius: '50%',
width: 36,
height: 36,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon size="small" color="white" name={`${item.first_name ? 'user' : 'business'}`} />
</div>
<h3 key="contact-name">
<ContactName item={item} />
{contactJobTitle && <span title={item.job_title}>{contactJobTitle}</span>}
</h3>
<div key="contact-org">
<span className="item-info">{contactOrg}</span>
{!item.is_active && showIfContactIsInactive && (
<span
title="inactive"
className="label label--draft label--hollow pull-right"
return (
<div className="sd-grid-item__content" x-ms-format-detection="none">
{
hideHeader !== true && (
<Spacer style={{margin: '8px 0'}} h gap="8" justifyContent="start" alignItems="center" noWrap>
<div
style={{
backgroundColor: 'var(--sd-colour-success)',
borderRadius: '50%',
width: 36,
height: 36,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
{gettext('Inactive')}
</span>
)}
</div>
</Spacer>,
);
}
<Icon size="small" color="white" name={`${item.first_name ? 'user' : 'business'}`} />
</div>
<h3 key="contact-name">
<ContactName item={item} />
{contactJobTitle && <span title={item.job_title}>{contactJobTitle}</span>}
</h3>
<div key="contact-org">
<span className="item-info">{contactOrg}</span>
{!item.is_active && showIfContactIsInactive && (
<span
title="inactive"
className="label label--draft label--hollow pull-right"
>
{gettext('Inactive')}
</span>
)}
</div>
</Spacer>
)
}

meta.push(
<Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
<ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
<Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
<Icon name="envelope" size="small" />
{!isEmpty(item.contact_email) && (<ItemContainer item={item} field="contact_email" />)}
</Spacer>
<ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
</Spacer>,
);
<WithDivider
leading
trailing
divider={(
<>
<SpacerBlock v gap="4" />
<ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
<SpacerBlock v gap="4" />
</>
)}
>
<ContactDetail>
<Icon name="envelope" size="small" />
{!isEmpty(item.contact_email) && (<ItemContainer item={item} field="contact_email" />)}
</ContactDetail>

meta.push(
<Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
<Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
<Icon name="globe" size="small" />
{!isEmpty(item.contact_phone) && findKey(item.contact_phone, 'number') &&
(<ItemContainer item={item} field="contact_phone" />)
}
</Spacer>
<ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
</Spacer>,
);
<ContactDetail>
<Icon name="globe" size="small" />
{!isEmpty(item.contact_phone) && findKey(item.contact_phone, 'number') &&
(<ItemContainer item={item} field="contact_phone" />)
}
</ContactDetail>

meta.push(
<Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
<Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
<Icon name="phone" size="small" />
{item.website && (<ItemContainer item={item} field="website" />)}
</Spacer>
<ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
</Spacer>,
);
<ContactDetail>
<Icon name="phone" size="small" />
{item.website && (<ItemContainer item={item} field="website" />)}
</ContactDetail>

meta.push(
<Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
<Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
<Icon name="mobile" size="small" />
{!isEmpty(item.mobile) && findKey(item.mobile, 'number') &&
(<ItemContainer item={item} field="mobile" />)
}
</Spacer>
<ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
</Spacer>,
);
<ContactDetail>
<Icon name="mobile" size="small" />
{!isEmpty(item.mobile) && findKey(item.mobile, 'number') &&
(<ItemContainer item={item} field="mobile" />)
}
</ContactDetail>

meta.push(
<Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
<Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
<Icon name="map-marker" size="small" />
{item && (<ItemContainer item={item} field="location" />)}
</Spacer>
<ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
</Spacer>,
);
<ContactDetail>
<Icon name="map-marker" size="small" />
{item && (<ItemContainer item={item} field="location" />)}
</ContactDetail>

info.push(
<Spacer v gap="4" justifyContent="space-between" alignItems="center">
{meta}
<Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
<Icon name="info-sign" size="small" />
{item.notes && (<Notes item={item} />)}
</Spacer>
</Spacer>,
);

return (
<div className="sd-grid-item__content" x-ms-format-detection="none">{info}</div>
<ContactDetail>
<Icon name="info-sign" size="small" />
{item.notes && (<Notes item={item} />)}
</ContactDetail>
</WithDivider>
</div>
);
};
5 changes: 4 additions & 1 deletion scripts/apps/contacts/components/fields/SocialInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {ItemContainer} from 'apps/contacts/components';
import {Spacer} from 'superdesk-ui-framework/react';

/**
* SocialInfo - to display facebook, twitter etc. information of a contact
Expand All @@ -10,7 +11,9 @@ export const SocialInfo: React.StatelessComponent<any> = ({item}) => {

return (
<div key="contact-social" className="social-info">
{keys.map((k) => (item[k] && <ItemContainer key={k} item={item} field={k} />))}
<Spacer h gap="8">
{keys.map((k) => (item[k] && <ItemContainer key={k} item={item} field={k} />))}
</Spacer>
</div>
);
};
Expand Down

0 comments on commit 5dc82cf

Please sign in to comment.