Images embedded in webpack bundle as data URIs

src/main/angular/images/m_circle-horz-menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><title>m</title><path d="M16,43a6.89,6.89,0,1,1,6.89-6.89A6.9,6.9,0,0,1,16,43Zm0-11.09a4.19,4.19,0,1,0,4.19,4.19A4.2,4.2,0,0,0,16,31.91Z" fill="gray"/><path d="M36.22,43a6.89,6.89,0,1,1,6.89-6.89A6.9,6.9,0,0,1,36.22,43Zm0-11.09a4.19,4.19,0,1,0,4.19,4.19A4.2,4.2,0,0,0,36.22,31.91Z" fill="gray"/><path d="M56.09,43A6.89,6.89,0,1,1,63,36.11,6.9,6.9,0,0,1,56.09,43Zm0-11.09a4.19,4.19,0,1,0,4.19,4.19A4.2,4.2,0,0,0,56.09,31.91Z" fill="gray"/></svg>

src/main/angular/images/m_question_mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><title>m_question_mark</title><path d="M32.31,47.66l-0.16-2c-0.47-4.12.93-8.79,4.82-13.37,3.5-4.2,5.44-7.23,5.44-10.73,0-4-2.49-6.61-7.39-6.69a13.82,13.82,0,0,0-7.85,2.41l-1.87-4.9A20.58,20.58,0,0,1,36.43,9.24c8.94,0,13,5.52,13,11.43,0,5.29-3,9.18-6.69,13.53-3.42,4-4.67,7.54-4.43,11.51l0.08,1.94H32.31Zm2.8,15.79a4.54,4.54,0,0,1-4.51-4.82,4.6,4.6,0,0,1,4.67-4.9c2.72,0,4.59,2,4.59,4.9a4.53,4.53,0,0,1-4.67,4.82H35.11Z" fill="gray"/><rect x="0.36" y="0.36" width="71.28" height="71.28" fill="none"/></svg>

src/main/angular/package.json

@@ -18,6 +18,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "url-loader": "0.5.7"
   },
   "devDependencies": {
     "@types/angular": "1.5.8",

src/main/angular/src/peoplesearch/orgchart.component.html

@@ -4,7 +4,9 @@
     <icon-button ng-click="$ctrl.close()"></icon-button>
 </app-bar>
 
-<div class="org-chart-section managers" ng-if="$ctrl.hasManagementChain() || $ctrl.isPersonOrphan()">
+<div class="org-chart-section managers"
+     ng-class="{ 'overflow': $ctrl.showingOverflow() }"
+     ng-if="$ctrl.hasManagementChain() || $ctrl.isPersonOrphan()">
     <h3>Management</h3>
     <div ng-if="!$ctrl.isPersonOrphan()">
         <div class="manager"
@@ -38,8 +40,4 @@
                      ng-click="$ctrl.selectPerson(directReport.userKey)">
         </person-card>
     </div>
-
-    <div class="person-card-list" ng-if="!$ctrl.hasDirectReports()">
-        <span class="empty-section-label">0 direct reports</span>
-    </div>
 </div>

src/main/angular/src/peoplesearch/orgchart.component.scss

@@ -1,3 +1,7 @@
+$org-chart-connector-color: #808080;
+$org-chart-secondary-connector-color: #dae1e1;
+$org-chart-text-color: #808080;
+
 $manager-connector-height: 16px;
 
 // Default display
@@ -18,6 +22,20 @@ org-chart {
     &.managers {
       min-height: 98px;
 
+      &.overflow {
+        .manager {
+          &:last-child {
+            > person-card {
+              > .person-card-content {
+                > .avatar {
+                  background-image: url('../../images/m_circle-horz-menu.svg');
+                }
+              }
+            }
+          }
+        }
+      }
+
       .manager {
         margin-bottom: $manager-connector-height;
         position: relative;
@@ -29,14 +47,14 @@ org-chart {
 
             > .person-card-content {
               > .avatar {
-                background-color: #dae1e1;
-                border-color: #dae1e1;
+                background: $org-chart-secondary-connector-color url('../../images/m_question_mark.svg');
+                border-color: $org-chart-secondary-connector-color;
               }
             }
           }
 
           > .org-chart-connector {
-            background-color: #dae1e1;
+            background-color: $org-chart-secondary-connector-color;
           }
         }
 
@@ -53,7 +71,7 @@ org-chart {
     }
 
     > h3 {
-      color: #808080;
+      color: $org-chart-text-color;
       font-size: 14px;
       line-height: 14px;
       margin: 0;
@@ -68,7 +86,7 @@ org-chart {
     }
 
     > .person-card-list {
-      border-top: 3px solid #808080;
+      border-top: 3px solid $org-chart-connector-color;
       min-height: 90px;
       padding-top: 5px;
 
@@ -83,7 +101,7 @@ org-chart {
     }
 
     .org-chart-connector {
-      background-color: #808080;
+      background-color: $org-chart-connector-color;
       left: 0;
       margin: 0 auto;
       position: absolute;
@@ -91,10 +109,6 @@ org-chart {
       top: 0;
       width: 5px;
     }
-
-    .empty-section-label {
-      color: #808080;
-    }
   }
 }
 
@@ -199,7 +213,7 @@ org-chart {
 
           &:not(:first-child) {
             > .org-chart-connector {
-              background-color: #dae1e1;
+              background-color: $org-chart-secondary-connector-color;
               bottom: initial;
               height: 3px;
               left: -37px;
@@ -210,16 +224,16 @@ org-chart {
             > person-card {
               > .person-card-content {
                 > .avatar {
-                  background-color: #dae1e1;
+                  background-color: $org-chart-secondary-connector-color;
 
                   &:not(:hover) {
-                    border-color: #dae1e1;
+                    border-color: $org-chart-secondary-connector-color;
                   }
                 }
 
                 > .details {
                   > :first-child {
-                    color: #808080;
+                    color: $org-chart-connector-color;
                   }
                 }
               }

src/main/angular/src/peoplesearch/orgchart.component.ts

@@ -16,7 +16,7 @@ export default class OrgChartComponent {
         displayNames: [
             'No Managers'
         ],
-        photoURL: 'images/question_mark.png',
+        photoURL: null,
         userKey: null
     });
 
@@ -82,7 +82,7 @@ export default class OrgChartComponent {
 
                 this.managers.push(new Person({
                     userKey: lastManager.userKey,
-                    photoURL: 'images/more.png',
+                    photoURL: null,
                     displayNames: []
                 }));
             }
@@ -102,6 +102,12 @@ export default class OrgChartComponent {
         return this.managementChain && this.managementChain.length;
     }
 
+    showingOverflow() {
+        return this.managers &&
+            this.managementChain &&
+            this.managers.length < this.managementChain.length;
+    }
+
     isPersonOrphan() {
         return !(this.hasDirectReports() || this.hasManagementChain());
     }

src/main/angular/src/peoplesearch/person-card.component.html

@@ -1,6 +1,6 @@
 <div class="person-card-content" ng-switch="$ctrl.size">
     <div class="avatar">
-        <img ng-src="{{ $ctrl.person.photoURL }}" alt="User photo">
+        <img ng-src="{{ $ctrl.person.photoURL }}" ng-if="$ctrl.person.photoURL" alt="User photo">
     </div>
     <div class="reports" ng-if="$ctrl.directReports.length" ng-bind="$ctrl.directReports.length"></div>
 

src/main/angular/src/peoplesearch/person-card.component.scss

@@ -12,7 +12,7 @@ $person-card-spacing: 10px;
 $person-card-large-avatar-size: 65px;
 
 person-card {
-  background-color: $person-card-bg-color;
+  background: $person-card-bg-color;
   border: 1px solid $person-card-bg-color;
   border-radius: 3px;
   box-sizing: border-box;
@@ -49,7 +49,6 @@ person-card {
         width: $person-card-large-avatar-size;
 
         img {
-          height: 100%;
           width: 100%;
         }
       }
@@ -102,7 +101,8 @@ person-card {
     overflow: hidden;
 
     > .avatar {
-      background-color: gray;
+      background: gray url('../../images/user.png') no-repeat center center;
+      background-size: cover;
       flex: 0 0 $person-card-avatar-size;
       height: $person-card-avatar-size;
       margin-right: $person-card-spacing;

src/main/angular/src/services/people.data.json

@@ -8,7 +8,7 @@
     "telephoneNumber": "(564) 683-6597",
     "title": "Senior Sales Associate",
     "managerId": null,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Jean Ryan",
       "jryan0@csmonitor.com",
@@ -78,7 +78,7 @@
     "telephoneNumber": "(567) 798-6155",
     "title": "Quality Engineer",
     "managerId": 1,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Ruby Bowman",
       "rbowman1@pinterest.com",
@@ -148,7 +148,7 @@
     "telephoneNumber": "(523) 622-4293",
     "title": "Community Outreach Specialist",
     "managerId": 1,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "William Carter",
       "wcarter2@delicious.com",
@@ -218,7 +218,7 @@
     "telephoneNumber": "(345) 682-1430",
     "title": "Research Nurse",
     "managerId": 1,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Alan Snyder",
       "asnyder3@blinklist.com",
@@ -288,7 +288,7 @@
     "telephoneNumber": "(457) 877-1797",
     "title": "Financial Analyst",
     "managerId": 2,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Aaron Alvarez",
       "aalvarez4@ezinearticles.com",
@@ -358,7 +358,7 @@
     "telephoneNumber": "(268) 336-2705",
     "title": "Accountant II",
     "managerId": 2,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Deborah Morrison",
       "dmorrison5@nytimes.com",
@@ -428,7 +428,7 @@
     "telephoneNumber": "(638) 951-3305",
     "title": "Design Engineer",
     "managerId": 2,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Mildred Hayes",
       "mhayes6@house.gov",
@@ -498,7 +498,7 @@
     "telephoneNumber": "(564) 818-6794",
     "title": "Structural Engineer",
     "managerId": 3,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Margaret Holmes",
       "mholmes7@nbcnews.com",
@@ -568,7 +568,7 @@
     "telephoneNumber": "(206) 987-9763",
     "title": "Junior Executive",
     "managerId": 3,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Jack Jackson",
       "jjackson8@thetimes.co.uk",
@@ -638,7 +638,7 @@
     "telephoneNumber": "(751) 250-5973",
     "title": "Chief Design Engineer",
     "managerId": 3,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Judy Butler",
       "jbutler9@reference.com",
@@ -708,7 +708,7 @@
     "telephoneNumber": "(205) 653-6795",
     "title": "Engineer IV",
     "managerId": 9,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Tina Gutierrez",
       "tgutierreza@godaddy.com",
@@ -778,7 +778,7 @@
     "telephoneNumber": "(816) 816-8474",
     "title": "Human Resources Manager",
     "managerId": 9,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Jose Cox",
       "jcoxb@stumbleupon.com",
@@ -848,7 +848,7 @@
     "telephoneNumber": "(207) 691-7625",
     "title": "Internal Auditor",
     "managerId": 4,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Paul Barnes",
       "pbarnesc@mediafire.com",
@@ -918,7 +918,7 @@
     "telephoneNumber": "(133) 596-4078",
     "title": "Automation Specialist I",
     "managerId": 14,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Joe Stevens",
       "jstevensd@ocn.ne.jp",
@@ -988,7 +988,7 @@
     "telephoneNumber": "(343) 776-3486",
     "title": "Safety Technician I",
     "managerId": 20,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Randy Grant",
       "rgrante@europa.eu",
@@ -1058,7 +1058,7 @@
     "telephoneNumber": "(285) 576-0850",
     "title": "Compensation Analyst",
     "managerId": 9,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Martin Mason",
       "mmasonf@who.int",
@@ -1128,7 +1128,7 @@
     "telephoneNumber": "(594) 905-7773",
     "title": "Data Coordiator",
     "managerId": 16,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Cynthia Porter",
       "cporterg@a8.net",
@@ -1198,7 +1198,7 @@
     "telephoneNumber": "(444) 231-5492",
     "title": "Business Systems Development Analyst",
     "managerId": 17,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Nancy Burns",
       "nburnsh@wordpress.org",
@@ -1268,7 +1268,7 @@
     "telephoneNumber": "(675) 799-8793",
     "title": "Structural Engineer",
     "managerId": 18,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Jimmy Montgomery",
       "jmontgomeryi@addtoany.com",
@@ -1338,7 +1338,7 @@
     "telephoneNumber": "(658) 289-4550",
     "title": "Desktop Support Technician",
     "managerId": 19,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Bruce Carroll",
       "bcarrollj@paypal.com",
@@ -1408,7 +1408,7 @@
     "telephoneNumber": "(454) 249-4440",
     "title": "No Real Position",
     "managerId": null,
-    "photoURL": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
+    "photoURL": null,
     "displayNames": [
       "Orphan User",
       "orphan.user@gmail.com",

src/main/angular/webpack.common.js

@@ -51,6 +51,10 @@ module.exports = {
             {
                 test: /\.json/,
                 loaders: [ 'json' ]
+            },
+            {
+                test: /\.(png|jpg|jpeg|gif|svg)$/,
+                loaders: [ 'url?limit=25000' ]
             }
         ]
     },
@@ -62,8 +66,7 @@ module.exports = {
     plugins: [
         new CopyWebpackPlugin([
             { from: 'vendor/angular-ui-router.js', to: 'vendor/' },
-            { from: 'node_modules/angular/angular.js', to: 'vendor/' },
-            { from: 'images/', to: 'images/' }
+            { from: 'node_modules/angular/angular.js', to: 'vendor/' }
         ]),
 
         new HtmlWebpackPlugin({