Skip to content

Visually distinguish between business and mobile number #1988

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 14, 2022
Merged

Visually distinguish between business and mobile number #1988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1fee60
Add dedicated icon for BusinessPhone
Dec 14, 2022
50f4bef
Merge branch 'main' into 1980_visually_distinguish_phone_numbers
gavinbarron Dec 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions ...rc/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
title: this.strings.chatTitle
},
businessPhone: {
icon: getSvg(SvgIcon.CellPhone, '#929292'),
icon: getSvg(SvgIcon.Phone, '#929292'),
onClick: () => this.sendCall(this._person?.businessPhones?.length > 0 ? this._person.businessPhones[0] : null),
showCompact: true,
title: this.strings.businessPhoneTitle
Expand Down Expand Up @@ -263,13 +263,15 @@ export class MgtPersonCardContact extends BasePersonCardSection {
`;

return html`
<div class="part" @click=${(e: MouseEvent) => this.handlePartClick(e, part.value)} tabindex="0">
<div class="part__icon">${part.icon}</div>
<div class="part" @click=${(e: MouseEvent) => this.handlePartClick(e, part.value)} tabindex="0">
<div class="part__icon" aria-label=${part.title} title=${part.title}>${part.icon}</div>
<div class="part__details">
<div class="part__title">${part.title}</div>
<div class="part__value">${valueTemplate}</div>
<div class="part__value" title=${part.title}>${valueTemplate}</div>
</div>
<div class="part__copy">
<div class="part__copy" aria-role="button" aria-label=${this.strings.copyToClipboardButton} title=${
this.strings.copyToClipboardButton
}>
${getSvg(SvgIcon.Copy)}
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion ...mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/strings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,6 @@ export const strings = {
cellPhoneTitle: 'Mobile Phone',
departmentTitle: 'Department',
titleTitle: 'Title',
officeLocationTitle: 'Office Location'
officeLocationTitle: 'Office Location',
copyToClipboardButton: 'Copy to clipboard'
};
20 changes: 16 additions & 4 deletions packages/mgt-components/src/utils/SvgHelper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,11 @@ export enum SvgIcon {
*/
Copy,

/**
* A phone handset
*/
Phone,

/**
* A cellphone
*/
Expand Down Expand Up @@ -305,6 +310,13 @@ export function getSvg(svgIcon: SvgIcon, color?: string) {
</svg>
`;

case SvgIcon.Phone:
return html`
<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" fill="none">
<path d="M1607 1213q44 0 84 16t72 48l220 220q31 31 47 71t17 85q0 44-16 84t-48 72l-14 14q-54 54-99 96t-94 70-109 44-143 15q-125 0-257-39t-262-108-256-164-237-207-206-238-162-256T38 775 0 523q0-83 14-142t43-108 70-93 96-99l16-16q31-31 71-48t85-17q44 0 84 17t72 48l220 220q31 31 47 71t17 85q0 44-15 78t-37 63-48 51-49 45-37 44-15 49q0 38 27 65l551 551q27 27 65 27 26 0 48-15t45-37 45-48 51-49 62-37 79-15zm-83 707q72 0 120-13t88-39 76-64 85-86q27-27 27-65 0-18-14-42t-38-52-51-55-56-54-51-47-37-35q-27-27-66-27-26 0-48 15t-44 37-45 48-52 49-62 37-79 15q-44 0-84-16t-72-48L570 927q-31-31-47-71t-17-85q0-44 15-78t37-63 48-51 49-46 37-44 15-48q0-39-27-66-13-13-34-36t-47-51-54-56-56-52-51-37-43-15q-38 0-65 27l-85 85q-37 37-64 76t-40 87-14 120q0 112 36 231t101 238 153 234 192 219 219 190 234 150 236 99 226 36z" fill="${color}"></path>
</svg>
`;

case SvgIcon.CellPhone:
return html`
<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -480,17 +492,17 @@ export function getSvg(svgIcon: SvgIcon, color?: string) {
case SvgIcon.DragFile:
return html`
<svg width="13" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="m0,1.00189c0,-0.8451 0.983,-1.3091 1.636,-0.772l11.006,9.0622c0.724,0.5964 0.302,1.772 -0.636,1.772l-5.592,0c-0.435,0 -0.849,0.1892 -1.134,0.5185l-3.524,4.0725c-0.606,0.7003 -1.756,0.2717 -1.756,-0.6544l0,-13.9988zm12.006,9.0622l-11.006,-9.0622l0,13.9988l3.524,-4.0724c0.475,-0.5488 1.164,-0.8642 1.89,-0.8642l5.592,0z"
<path
d="m0,1.00189c0,-0.8451 0.983,-1.3091 1.636,-0.772l11.006,9.0622c0.724,0.5964 0.302,1.772 -0.636,1.772l-5.592,0c-0.435,0 -0.849,0.1892 -1.134,0.5185l-3.524,4.0725c-0.606,0.7003 -1.756,0.2717 -1.756,-0.6544l0,-13.9988zm12.006,9.0622l-11.006,-9.0622l0,13.9988l3.524,-4.0724c0.475,-0.5488 1.164,-0.8642 1.89,-0.8642l5.592,0z"
/>
</svg>
`;

case SvgIcon.Cancel:
return html`
<svg class="cancel-icon" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
<path
d="m5.52795,4.92946l4.37418,4.36141l-0.57055,0.56806l-4.38052,-4.35509l-4.38052,4.35509l-0.57055,-0.56806l4.37418,-4.36141l-4.37418,-4.36141l0.57055,-0.56806l4.38052,4.35509l4.38052,-4.35509l0.57055,0.56806l-4.37418,4.36141z"
<path
d="m5.52795,4.92946l4.37418,4.36141l-0.57055,0.56806l-4.38052,-4.35509l-4.38052,4.35509l-0.57055,-0.56806l4.37418,-4.36141l-4.37418,-4.36141l0.57055,-0.56806l4.38052,4.35509l4.38052,-4.35509l0.57055,0.56806l-4.37418,4.36141z"
/>
</svg>
`;
Expand Down