Removed PersonCard stylesheet. Fixed broken direct reports on person cards. Cleaned up display names code in person card component

client/src/peoplesearch/orgchart.component.scss

@@ -27,6 +27,19 @@ $org-chart-text-color: #808080;
 
 $manager-connector-height: 16px;
 
+.reports {
+  background-color: #dae1e1;
+  border-radius: 2px;
+  color: #434c50;
+  font-size: 14px;
+  height: 25px;
+  line-height: 25px;
+  position: absolute;
+  right: 3px;
+  text-align: center;
+  top: 3px;
+  min-width: 35px;
+}
 
 .assistant,
 .manager {
@@ -50,6 +63,10 @@ $manager-connector-height: 16px;
       }
     }
 
+    > .reports {
+      right: 20px;
+    }
+
     > .ias-tile-content {
       background-color: white;
       display: block;
@@ -57,15 +74,15 @@ $manager-connector-height: 16px;
       text-align: center;
       width: 100%;
 
-      > .reports {
-        right: 20px;
-      }
-
       :nth-child(n + 3) {
         display: none;
       }
     }
   }
+
+  .reports {
+    right: 20px;
+  }
 }
 
 .self {
@@ -233,14 +250,14 @@ org-chart {
         .manager {
           &:last-child {
             > .ias-tile {
+              > .reports {
+                display: none;
+              }
+
               > .ias-tile-content {
                 > .avatar {
                   //background-image: url('../../images/icons/m_circle-horz-menu_thin.svg');
                 }
-
-                > .reports {
-                  display: none;
-                }
               }
             }
           }
@@ -316,6 +333,14 @@ org-chart {
 }
 
 [dir="rtl"] {
+  .assistant,
+  .manager {
+    .reports {
+      left: 20px;
+      right: auto;
+    }
+  }
+
   // (XS) Default display
   org-chart {
     > .org-chart-section {
@@ -333,6 +358,11 @@ org-chart {
           &[size="large"] {
             margin: 0 128px 0 0;
           }
+
+          .reports {
+            left: 3px;
+            right: initial;
+          }
         }
 
         .org-chart-connector {

client/src/peoplesearch/peoplesearch.scss

@@ -105,4 +105,4 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}

client/src/peoplesearch/person-card.component.html

@@ -31,26 +31,23 @@
          ng-attr-title="{{$ctrl.person.numDirectReports}} {{ 'Title_DirectReports' | translate }}"></div>
 
     <div class="ias-tile-content" ng-switch-when="small">
-        <h3 ng-bind="$ctrl.person.displayNames[0]"></h3>
-        <div ng-bind="$ctrl.person.displayNames[1]"></div>
+        <h3 class="single-line" ng-bind="$ctrl.person.displayNames[0]"
+            ng-attr-title="{{$ctrl.person.displayNames[0]}}"></h3>
+        <div class="single-line" ng-bind="$ctrl.person.displayNames[1]"
+             ng-attr-title="{{$ctrl.person.displayNames[1]}}"></div>
     </div>
 
     <div class="ias-tile-content" ng-class="{'direct-reports': $ctrl.numDirectReportsVisible}" ng-switch-when="large">
-        <h3 ng-bind="$ctrl.person.displayNames[0]"></h3>
-        <div ng-bind="$ctrl.person.displayNames[1]"></div>
-        <div ng-bind="$ctrl.person.displayNames[2]"></div>
-        <div ng-bind="$ctrl.person.displayNames[3]"></div>
-
-        <div ng-bind="$ctrl.person.displayNames[4]"></div>
-        <div ng-bind="$ctrl.person.displayNames[5]"></div>
-        <div ng-bind="$ctrl.person.displayNames[6]"></div>
-        <div ng-bind="$ctrl.person.displayNames[7]"></div>
+        <h3 class="single-line" ng-bind="$ctrl.person.displayNames[0]"
+            ng-attr-title="{{$ctrl.person.displayNames[0]}}"></h3>
+        <div class="single-line" ng-bind="displayName" ng-attr-title="{{displayName}}"
+            ng-repeat="displayName in $ctrl.person.displayNames.slice(1, 8)"></div>
     </div>
 
     <div class="ias-tile-content" ng-class="{'direct-reports': $ctrl.numDirectReportsVisible}" ng-switch-default>
-        <h3 ng-bind="$ctrl.person.displayNames[0]"></h3>
-        <div ng-bind="$ctrl.person.displayNames[1]"></div>
-        <div ng-bind="$ctrl.person.displayNames[2]"></div>
-        <div ng-bind="$ctrl.person.displayNames[3]"></div>
+        <h3 class="single-line" ng-bind="$ctrl.person.displayNames[0]"
+            ng-attr-title="{{$ctrl.person.displayNames[0]}}"></h3>
+        <div class="single-line" ng-bind="displayName" ng-attr-title="{{displayName}}"
+             ng-repeat="displayName in $ctrl.person.displayNames.slice(1, 4)"></div>
     </div>
 </div>

client/src/peoplesearch/person-card.component.scss

@@ -1,270 +0,0 @@
-/*!
- * Password Management Servlets (PWM)
- * http://www.pwm-project.org
- *
- * Copyright (c) 2006-2009 Novell, Inc.
- * Copyright (c) 2009-2018 The PWM Project
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
- */
-
-
-$text-color: #000000;
-$text-color-subtext: #808080;
-
-$person-card-bg-color: #eef2f2;
-$person-card-hover-bg-color: #f6f9f8;
-$person-card-border-color: #01a9e7;
-$person-card-height: 84px;
-$person-card-width: 272px;
-$person-card-avatar-size: 50px;
-$person-card-spacing: 10px;
-
-$person-card-large-avatar-size: 65px;
-
-person-card {
-  background: $person-card-bg-color;
-  border: 1px solid $person-card-bg-color;
-  border-radius: 3px;
-  box-sizing: border-box;
-  display: block;
-  height: $person-card-height;
-  padding: $person-card-spacing;
-  position: relative;
-  text-align: left;
-  vertical-align: top;
-  width: $person-card-width;
-
-  &[ng-click] {
-    cursor: pointer;
-
-    &:focus,
-    &:hover {
-      outline: none;
-    }
-
-    &:focus {
-      background-color: #fff6ce;
-      border-color: #ffd92d;
-    }
-
-    &:hover {
-      background-color: $person-card-hover-bg-color;
-      border-color: $person-card-border-color;
-    }
-  }
-
-  &[size="large"] {
-    background-color: #ffffff;
-    border: 3px solid #808080;
-    border-radius: 3px;
-    height: auto;
-    min-height: 96px;
-    width: 346px;
-    max-width: 100%;
-
-    > .person-card-content {
-      flex-flow: row nowrap;
-
-      > .avatar {
-        flex: 0 0 $person-card-large-avatar-size;
-        height: $person-card-large-avatar-size;
-        width: $person-card-large-avatar-size;
-        margin-bottom: 5px;
-      }
-    }
-  }
-
-  &[size="small"] {
-    border: none;
-    background-color: transparent;
-    height: 96px;
-    padding: 0;
-    width: 120px;
-
-    &[ng-click] {
-      &:focus,
-      &:hover {
-        background-color: transparent;
-      }
-
-      &:focus {
-        > .person-card-content {
-          > .avatar {
-            border-color: #ffd92d !important;
-          }
-        }
-      }
-
-      &:hover {
-        > .person-card-content {
-          > .avatar {
-            border-color: $person-card-border-color !important;
-          }
-        }
-      }
-    }
-
-    > .person-card-content {
-      display: block;
-      text-align: center;
-
-      > .avatar {
-        background-color: #808080;
-        border: 3px solid #808080;
-        border-radius: 100%;
-        height: $person-card-avatar-size;
-        margin: 0 auto;
-        width: $person-card-avatar-size;
-
-        > img {
-          border-radius: 100%;
-        }
-
-        &:hover {
-          border-color: $person-card-border-color;
-        }
-      }
-
-      > .details {
-        background-color: white;
-        margin-top: 8px;
-        width: 100%;
-
-        :first-child {
-          font-size: 13px;
-        }
-      }
-
-      > .reports {
-        right: 20px;
-      }
-    }
-  }
-
-  > .person-card-content {
-    display: flex;
-    flex-flow: row nowrap;
-    overflow: hidden;
-
-    > .avatar {
-      background: transparent url('../../images/user.png') no-repeat center center;
-      background-size: contain;
-      border-radius: 3px;
-      flex: 0 0 $person-card-avatar-size;
-      height: $person-card-avatar-size;
-      margin-right: $person-card-spacing;
-
-      img {
-        height: 100%;
-        width: 100%;
-      }
-    }
-
-    > .details {
-      flex: 1;
-      overflow: hidden;
-
-      &.direct-reports {
-        >:first-child {
-          margin-right: 28px;
-        }
-      }
-
-      > div {
-        line-height: 16px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      > :first-child {
-        color: $text-color;
-        font-size: 16px;
-        margin-bottom: 2px;
-      }
-
-      > :not(:first-child) {
-        color: $text-color-subtext;
-        font-size: 12px;
-      }
-
-      > .secondary-details {
-        padding-top: 8px;
-      }
-    }
-
-    > .reports {
-      background-color: #dae1e1;
-      border-radius: 2px;
-      color: #434c50;
-      font-size: 14px;
-      height: 25px;
-      line-height: 25px;
-      position: absolute;
-      right: 3px;
-      text-align: center;
-      top: 3px;
-      min-width: 35px;
-    }
-  }
-}
-
-[dir="rtl"] {
-  person-card {
-    text-align: right;
-
-    &[size="large"] {
-      > .person-card-content {
-        > .avatar {
-        }
-      }
-    }
-
-    &[size="small"] {
-      > .person-card-content {
-        > .avatar {
-          margin: 0 auto;
-        }
-
-        > .reports {
-          left: 20px;
-          right: auto;
-        }
-      }
-    }
-
-    > .person-card-content {
-      > .avatar {
-        margin-left: $person-card-spacing;
-        margin-right: 0;
-      }
-
-      > .details {
-        &.direct-reports {
-          >:first-child {
-            margin-left: 28px;
-            margin-right: 0;
-          }
-        }
-      }
-
-      > .reports {
-        left: 3px;
-        right: initial;
-      }
-    }
-  }
-}

client/src/peoplesearch/person-card.component.ts

@@ -26,7 +26,6 @@ import { IPerson } from '../models/person.model';
 import { IPeopleService } from '../services/people.service';
 
 const templateUrl = require('peoplesearch/person-card.component.html');
-require('peoplesearch/person-card.component.scss');
 
 class PersonCardController {
     private details: any[]; // For large style cards