Stylistic changes to PeopleSearch/OrgChart. Make "Loading" message only display when no person cards are showing yet

src/main/angular/images/icons/m_circle-horz-menu.svg → src/main/angular/images/icons/m_circle-horz-menu_thin.svg

@@ -20,4 +20,4 @@
   ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   -->
 
-<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>
+<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/icons/m_search_thick.svg

@@ -20,4 +20,4 @@
   ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   -->
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><title>1-icons_expanded</title><path d="M64.5,61.57,46.4,42.7a20.11,20.11,0,1,0-2.88,2.77l18.1,18.87ZM15.16,29.77a16,16,0,1,1,16,16A16,16,0,0,1,15.16,29.77Z" fill="gray"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><title>1-icons_expanded</title><path d="M64.5,61.57,46.4,42.7a20.11,20.11,0,1,0-2.88,2.77l18.1,18.87ZM15.16,29.77a16,16,0,1,1,16,16A16,16,0,0,1,15.16,29.77Z" fill="gray"/></svg>

src/main/angular/images/icons/m_view-list.svg → src/main/angular/images/icons/m_view-list_thin.svg

@@ -20,4 +20,4 @@
   ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   -->
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><title>1-icons_expanded</title><path d="M63,17.65H8.9a1.5,1.5,0,0,1-1.5-1.5V9a1.5,1.5,0,0,1,1.5-1.5H63A1.5,1.5,0,0,1,64.49,9v7.14A1.5,1.5,0,0,1,63,17.65Zm-52.59-3H61.49V10.51H10.4v4.14Z" fill="gray"/><path d="M63,64.45H8.9A1.5,1.5,0,0,1,7.4,63V55.81a1.5,1.5,0,0,1,1.5-1.5H63a1.5,1.5,0,0,1,1.5,1.5V63A1.5,1.5,0,0,1,63,64.45Zm-52.59-3H61.49V57.31H10.4v4.14Z" fill="gray"/><path d="M63,48.85H8.9a1.5,1.5,0,0,1-1.5-1.5V40.21a1.5,1.5,0,0,1,1.5-1.5H63a1.5,1.5,0,0,1,1.5,1.5v7.14A1.5,1.5,0,0,1,63,48.85Zm-52.59-3H61.49V41.71H10.4v4.14Z" fill="gray"/><path d="M63,33.25H8.9a1.5,1.5,0,0,1-1.5-1.5V24.61a1.5,1.5,0,0,1,1.5-1.5H63a1.5,1.5,0,0,1,1.5,1.5v7.14A1.5,1.5,0,0,1,63,33.25Zm-52.59-3H61.49V26.11H10.4v4.14Z" fill="gray"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><title>1-icons_special</title><rect x="13.31" y="9.52" width="45.01" height="3" fill="gray"/><rect x="13.31" y="34.31" width="45.01" height="3" fill="gray"/><rect x="13.31" y="21.92" width="45.01" height="3" fill="gray"/><rect x="13.31" y="46.7" width="45.01" height="3" fill="gray"/><rect x="13.31" y="59.1" width="45.01" height="3" fill="gray"/><rect x="0.36" y="0.36" width="71.28" height="71.28" fill="none"/></svg>

src/main/angular/src/i18n/translations_en.json

@@ -8,8 +8,8 @@
 
   "Display_PleaseWait": "Loading...",
 
-  "Display_SearchResultsExceeded": "Search results exceeded maximum search size.",
-  "Display_SearchResultsNone": "No results.",
+  "Display_SearchResultsExceeded": "Search results exceeded maximum search size",
+  "Display_SearchResultsNone": "No results",
 
   "Placeholder_Search": "Search"
 }

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

@@ -34,18 +34,19 @@
     </mf-auto-complete>
     <span flex></span>
     <mf-icon-button
-            icon="view-tile"
+            icon="view-tile_thin"
             ng-click="$ctrl.gotoSearchState('search.cards')"
             ng-attr-title="{{ 'Title_PeopleSearch' | translate }}"
             id="view-tile-icon"></mf-icon-button>
     <mf-icon-button
-            icon="view-list"
+            icon="view-list_thin"
             ng-click="$ctrl.gotoSearchState('search.table')"
             ng-attr-title="{{ 'Title_PeopleSearch' | translate }}"
             id="view-list-icon"></mf-icon-button>
     <div class="mf-divider vertical"></div>
     <mf-icon-button
-            icon="orgchart"
+            icon="orgchart_thin"
+            class="selected"
             disabled="true"
             ng-attr-title="{{ 'Title_OrgChart' | translate }}"
             id="orgcharg-icon"></mf-icon-button>

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

@@ -177,7 +177,7 @@ org-chart {
             > person-card {
               > .person-card-content {
                 > .avatar {
-                  background-image: url('../../images/icons/m_circle-horz-menu.svg');
+                  background-image: url('../../images/icons/m_circle-horz-menu_thin.svg');
                 }
 
                 > .reports {

src/main/angular/src/peoplesearch/peoplesearch-base.component.ts

@@ -96,8 +96,9 @@ abstract class PeopleSearchBaseComponent {
         this.$state.go('.details', { personId: person.userKey, query: this.query });
     }
 
+    // We are still loading if there are pending requests but no search results have come back yet
     get loading(): boolean {
-        return !!this.pendingRequests.length;
+        return !!this.pendingRequests.length && !this.searchResult;
     }
 
     protected abortPendingRequests() {

src/main/angular/src/peoplesearch/peoplesearch-cards.component.html

@@ -29,18 +29,19 @@
                    auto-focus></mf-search-bar>
     <span flex></span>
     <mf-icon-button
-            icon="view-tile"
+            icon="view-tile_thin"
+            class="selected"
             disabled="true"
             ng-attr-title="{{ 'Title_PeopleSearch' | translate }}"
             id="view-tile-icon"></mf-icon-button>
     <mf-icon-button
-            icon="view-list"
+            icon="view-list_thin"
             ng-click="$ctrl.gotoTableView()"
             ng-attr-title="{{ 'Title_PeopleSearch' | translate }}"
             id="view-list-icon"></mf-icon-button>
     <div class="mf-divider vertical" ng-if="$ctrl.orgChartEnabled"></div>
     <mf-icon-button
-            icon="orgchart"
+            icon="orgchart_thin"
             ng-click="$ctrl.gotoOrgchart()"
             ng-if="$ctrl.orgChartEnabled"
             ng-attr-title="{{ 'Title_OrgChart' | translate }}"
@@ -49,7 +50,7 @@
 
 <div class="people-search-component-content">
     <div class="search-info-container">
-        <div class="search-info"
+        <div class="search-info" ng-class="{'loading': !$ctrl.getMessage()}"
              ng-if="$ctrl.loading || $ctrl.searchMessage || $ctrl.errorMessage"
              ng-bind="$ctrl.getMessage() || ('Display_PleaseWait' | translate)">
         </div>

src/main/angular/src/peoplesearch/peoplesearch-table.component.html

@@ -29,18 +29,19 @@
                    auto-focus></mf-search-bar>
     <span flex></span>
     <mf-icon-button
-            icon="view-tile"
+            icon="view-tile_thin"
             id="view-title-button"
             ng-click="$ctrl.gotoCardsView()"
             ng-attr-title="{{ 'Title_PeopleSearch' | translate }}"></mf-icon-button>
     <mf-icon-button
-            icon="view-list"
+            icon="view-list_thin"
             id="view-list-button"
+            class="selected"
             disabled="true"
             ng-attr-title="{{ 'Title_PeopleSearch' | translate }}"></mf-icon-button>
     <div class="mf-divider vertical" ng-if="$ctrl.orgChartEnabled"></div>
     <mf-icon-button
-            icon="orgchart"
+            icon="orgchart_thin"
             id="view-orgchart-button"
             ng-click="$ctrl.gotoOrgchart()"
             ng-if="$ctrl.orgChartEnabled"
@@ -49,7 +50,7 @@
 
 <div class="people-search-component-content">
     <div class="search-info-container">
-        <div class="search-info"
+        <div class="search-info" ng-class="{'loading': !$ctrl.getMessage()}"
              ng-if="$ctrl.loading || $ctrl.searchMessage || $ctrl.errorMessage"
              ng-bind="$ctrl.getMessage() || ('Display_PleaseWait' | translate)">
         </div>

src/main/angular/src/peoplesearch/peoplesearch.scss

@@ -64,9 +64,10 @@ a {
   }
 
   .search-info-container {
-    min-height: 38px;
+    text-align: left;
 
     .search-info {
+      background-color: #fff6ce;
       border: 1px solid #dae1e1;
       border-radius: 3px;
       color: #808080;
@@ -74,11 +75,22 @@ a {
       font-size: 14px;
       margin: 0 auto 10px;
       padding: 5px;
-      text-align: center;
+
+      &.loading {
+        background-color: white;
+      }
     }
   }
 }
 
 .highlight {
   color: #01a9e7;
+}
+
+[dir="rtl"] {
+  .people-search-component {
+    .search-info-container {
+      text-align: right;
+    }
+  }
 }

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

@@ -70,8 +70,10 @@ person-card {
     background-color: #ffffff;
     border: 3px solid #808080;
     border-radius: 3px;
-    height: 166px;
-    width: 316px;
+    box-sizing: content-box;
+    height: auto;
+    min-height: 70px;
+    width: 320px;
     max-width: 100%;
 
     > .person-card-content {

src/main/angular/src/peoplesearch/person-details-dialog.component.html

@@ -29,7 +29,7 @@
                          show-image="$ctrl.photosEnabled"
                          show-direct-report-count="false"></person-card>
             <mf-button type="button" ng-click="$ctrl.gotoOrgChart()" ng-if="$ctrl.orgChartEnabled">
-                <mf-icon icon="orgchart" id="orgchart-button"></mf-icon>
+                <mf-icon icon="orgchart_thin" id="orgchart-button"></mf-icon>
                 <span translate="Title_OrgChart">Organizational Chart</span>
             </mf-button>
         </div>

src/main/angular/src/services/people.service.ts

@@ -45,8 +45,7 @@ export default class PeopleService implements IPeopleService {
                 private $log: ILogService,
                 private $q: IQService,
                 private pwmService: IPwmService,
-                $window: IWindowService)
-    {
+                $window: IWindowService) {
         if ($window['PWM_GLOBAL']) {
             this.PWM_GLOBAL = $window['PWM_GLOBAL'];
         }

src/main/angular/src/ux/app-bar.component.scss

@@ -21,8 +21,8 @@
  */
 
 
-$mf-app-bar-height: 29px;
-$mf-app-bar-icon-size: 24px;
+$mf-app-bar-height: 37px;
+$mf-app-bar-icon-size: 32px;
 
 mf-app-bar {
   display: block;
@@ -61,7 +61,7 @@ mf-app-bar {
     }
 
     > #page-content-title {
-      font-size: 24px;
+      font-size: 20px;
       height: $mf-app-bar-height;
       line-height: $mf-app-bar-height;
     }

src/main/angular/src/ux/dialog.component.scss

@@ -47,8 +47,8 @@ mf-dialog {
 
     > mf-icon-button {
       position: absolute;
-      right: 1px;
-      top: 1px;
+      right: 5px;
+      top: 5px;
       z-index: 1;
     }
 
@@ -82,7 +82,7 @@ mf-dialog {
     > .mf-dialog-container {
       > mf-icon-button {
         right: auto;
-        left: 1px;
+        left: 5px;
       }
     }
   }

src/main/angular/src/ux/icon-button.component.scss

@@ -23,7 +23,8 @@
 
 $mf-icon-button-color: #808080;
 $mf-icon-button-disabled-color: transparentize($mf-icon-button-color, .50);
-$mf-icon-button-size: 24px;
+$mf-icon-button-selected-color: #007cd0;
+$mf-icon-button-size: 32px;
 $mf-icon-button-bg-color: transparent;
 
 $mf-icon-button-hover-bg-color: #f6f9f8;
@@ -72,6 +73,10 @@ mf-icon-button {
     }
   }
 
+  &.selected {
+    color: $mf-icon-button-selected-color;
+  }
+
   > button {
     background: transparent none;
     border: 1px solid transparent;

src/main/angular/src/ux/icon.component.scss

@@ -23,7 +23,7 @@
 
 mf-icon {
   display: inline-block;
-  font-size: 20px;
+  font-size: 28px;
   height: 24px;
   position: relative;
   vertical-align: top;

src/main/angular/src/ux/search-bar.component.scss

@@ -34,9 +34,10 @@ mf-search-bar {
     box-sizing: border-box;
     display: block;
     flex: 1 1 100%;
+    font-size: 15px;
     height: 100%;
     line-height: 100%;
-    padding: 0 20px;
+    padding: 0 25px;
     width: 100%;
 
     &[type=text]::-ms-clear {
@@ -45,11 +46,11 @@ mf-search-bar {
   }
 
   > .clear-input {
-    right: 1px;
+    right: 5px;
   }
 
   > .search-icon {
-    margin: 0 2px;
+    margin: 0 5px;
     left: 0;
   }
 
@@ -87,7 +88,7 @@ mf-search-bar {
   mf-search-bar {
     > .clear-input {
       right: auto;
-      left: 1px;
+      left: 5px;
     }
 
     > .search-icon {

src/main/webapp/public/resources/style.css

@@ -498,7 +498,7 @@ div.progress-container > div {
 
 #header-menu-wrapper {
     display: inline-block;
-    margin-right: 20px;
+    margin-right: 10px;
 }
 
 .header-button {