rtl for person-card and subsequent sections (#791)

Author: vogtn

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss

@@ -316,3 +316,20 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
     }
   }
 }
+
+[dir='rtl'] {
+  .base-icons {
+    span {
+      margin-right: 8px;
+    }
+  }
+  .nav__back {
+    width: 20px !important;
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: FlipH;
+    -ms-filter: 'FlipH';
+  }
+}

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts

@@ -426,7 +426,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     const expandedDetailsTemplate = this.isExpanded ? this.renderExpandedDetails() : this.renderExpandedDetailsButton();
 
     return html`
-      <div class="root">
+      <div class="root" dir=${this.direction}>
         ${navigationTemplate}
         <div class="person-details-container">${personDetailsTemplate}</div>
         <div class="expanded-details-container">${expandedDetailsTemplate}</div>

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.scss

@@ -121,3 +121,21 @@
     }
   }
 }
+
+[dir='rtl'] {
+  .part__link {
+    &.phone {
+      text-align: right;
+      direction: ltr;
+    }
+  }
+  .part__icon {
+    margin: 10px 20px 0px 0px !important;
+  }
+  &.compact {
+    .part__icon {
+      margin-left: 6px !important;
+      margin-top: 0px !important;
+    }
+  }
+}

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts

@@ -8,6 +8,7 @@
 import { User } from '@microsoft/microsoft-graph-types';
 import { customElement, html, TemplateResult } from 'lit-element';
 import { TeamsHelper } from '@microsoft/mgt-element';
+import { classMap } from 'lit-html/directives/class-map';
 
 import { getEmailFromGraphEntity } from '../../../../graph/graph.people';
 import { BasePersonCardSection } from '../BasePersonCardSection';
@@ -193,7 +194,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
     `;
 
     return html`
-      <div class="root compact">
+      <div class="root compact" dir=${this.direction}>
         ${contentTemplate}
       </div>
     `;
@@ -218,7 +219,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
     }
 
     return html`
-      <div class="root">
+      <div class="root" dir=${this.direction}>
         <div class="title">${this.displayName}</div>
         ${contentTemplate}
       </div>
@@ -234,9 +235,20 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * @memberof MgtPersonCardContact
    */
   protected renderContactPart(part: IContactPart): TemplateResult {
+    let isPhone = false;
+
+    if (part.title === 'Mobile Phone' || part.title === 'Business Phone') {
+      isPhone = true;
+    }
+
+    const partLinkClasses = {
+      part__link: true,
+      phone: isPhone
+    };
+
     const valueTemplate = part.onClick
       ? html`
-          <span class="part__link" @click=${(e: Event) => part.onClick(e)}>${part.value}</span>
+          <span class=${classMap(partLinkClasses)} @click=${(e: Event) => part.onClick(e)}>${part.value}</span>
         `
       : html`
           ${part.value}

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.scss

@@ -77,3 +77,12 @@
     }
   }
 }
+
+[dir='rtl'] {
+  .file__icon {
+    margin-right: 0px !important;
+  }
+  .file__details {
+    margin-right: 12px !important;
+  }
+}

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.ts

@@ -86,7 +86,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
     }
 
     return html`
-      <div class="root compact">
+      <div class="root compact" dir=${this.direction}>
         ${contentTemplate}
       </div>
     `;
@@ -113,7 +113,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
     }
 
     return html`
-      <div class="root">
+      <div class="root" dir=${this.direction}>
         <div class="title">Files</div>
         ${contentTemplate}
       </div>

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.scss

@@ -172,3 +172,16 @@
     }
   }
 }
+
+[dir='rtl'] {
+  .org-member {
+    .org-member__more {
+      -moz-transform: scaleX(-1);
+      -o-transform: scaleX(-1);
+      -webkit-transform: scaleX(-1);
+      transform: scaleX(-1);
+      filter: FlipH;
+      -ms-filter: 'FlipH';
+    }
+  }
+}

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.ts

@@ -127,7 +127,7 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
     }
 
     return html`
-      <div class="root">
+      <div class="root" dir=${this.direction}>
         <div class="title">Organization</div>
         ${contentTemplate}
       </div>

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.scss

@@ -159,3 +159,9 @@
     }
   }
 }
+
+[dir='rtl'] {
+  .token-list__item {
+    margin-right: 0px !important;
+  }
+}

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.ts

@@ -129,7 +129,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
    */
   protected renderCompactView(): TemplateResult {
     return html`
-      <div class="root compact">
+      <div class="root compact" dir=${this.direction}>
         ${this.renderSubSections().slice(0, 2)}
       </div>
     `;
@@ -146,7 +146,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
     this.initPostRenderOperations();
 
     return html`
-      <div class="root">
+      <div class="root" dir=${this.direction}>
         <div class="title">About</div>
         ${this.renderSubSections()}
       </div>