Fixed the formatting so the advanced search text boxes weren't so far down the page (compared to the simple search text box).

client/src/modules/helpdesk/helpdesk-search-cards.component.html

@@ -20,53 +20,52 @@
   ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   -->
 
-<div class="ias-header">
-    <h2 id="page-content-title" ng-if="!$ctrl.advancedSearch" translate="Title_Helpdesk">Help Desk</h2>
-    <h2 id="page-content-title" ng-if="$ctrl.advancedSearch">Help Desk Advanced Search</h2>
 
-    <ias-search-box ng-model="$ctrl.query" ng-model-options="{debounce: $ctrl.inputDebounce}"
-                    ng-if="!$ctrl.advancedSearch"
-                    placeholder="{{'Placeholder_Search' | translate}}">
-    </ias-search-box>
-    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
-                ng-if="!$ctrl.advancedSearch && $ctrl.advancedSearchEnabled"
-                ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
-        <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
-    </ias-button>
-    <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
-                ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
+<div class="peoplesearch-header">
+    <div class="basic-search-container" ng-if="!$ctrl.advancedSearch">
+        <h2 id="page-content-title" ng-if="!$ctrl.advancedSearch" translate="Title_Helpdesk">Help Desk</h2>
+        <ias-search-box id="input" ng-model="$ctrl.query"
+                        ng-model-options="{debounce: $ctrl.inputDebounce}"
+                        placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
+        </ias-search-box>
 
+        <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
+                    ng-if="$ctrl.advancedSearchEnabled"
+                    ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
+            <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
+        </ias-button>
+    </div>
+    <div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
+        <div class="attribute-row" ng-repeat="query in $ctrl.queries">
+            <select ng-model="query.key">
+                <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
+                <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
+            </select>
+            <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
+            <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
+                        ng-attr-title="{{ 'Button_Remove' | translate }}">
+                <ias-icon icon="close_thin"></ias-icon>
+            </ias-button>
+        </div>
+        <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
+                    ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
+                    ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
+            <ias-icon icon="new_thin"></ias-icon>
+        </ias-button>
+    </div>
     <span class="ias-fill"></span>
-
-    <ias-button id="view-tile-icon" class="ias-icon-button ias-selected"
-                ng-disabled="true"
-                ng-attr-title="{{ 'Title_HelpDeskCard' | translate }}">
-        <ias-icon icon="view_tile_thin"></ias-icon>
-    </ias-button>
-    <ias-button id="view-list-icon" class="ias-icon-button"
-                ng-click="$ctrl.gotoTableView()"
-                ng-attr-title="{{ 'Title_HelpDeskTable' | translate }}">
-        <ias-icon icon="view_list_thin"></ias-icon>
-    </ias-button>
-</div>
-
-<div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
-    <div class="attribute-row" ng-repeat="query in $ctrl.queries">
-        <select ng-model="query.key">
-            <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
-            <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
-        </select>
-        <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
-        <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
-                    ng-attr-title="{{ 'Button_Remove' | translate }}">
-            <ias-icon icon="close_thin"></ias-icon>
+    <div class="ias-header">
+        <ias-button id="view-tile-icon" class="ias-icon-button ias-selected"
+                    ng-disabled="true"
+                    ng-attr-title="{{ 'Title_HelpDeskCard' | translate }}">
+            <ias-icon icon="view_tile_thin"></ias-icon>
+        </ias-button>
+        <ias-button id="view-list-icon" class="ias-icon-button"
+                    ng-click="$ctrl.gotoTableView()"
+                    ng-attr-title="{{ 'Title_HelpDeskTable' | translate }}">
+            <ias-icon icon="view_list_thin"></ias-icon>
         </ias-button>
     </div>
-    <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
-                ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
-                ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
-        <ias-icon icon="new_thin"></ias-icon>
-    </ias-button>
 </div>
 
 <div class="search-info-container">

client/src/modules/helpdesk/helpdesk-search-table.component.html

@@ -20,65 +20,63 @@
   ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   -->
 
-<div class="ias-header">
-    <h2 id="page-content-title" ng-if="!$ctrl.advancedSearch" translate="Title_Helpdesk">Help Desk</h2>
-    <h2 id="page-content-title" ng-if="$ctrl.advancedSearch">Help Desk Advanced Search</h2>
+<div class="peoplesearch-header">
+    <div class="basic-search-container" ng-if="!$ctrl.advancedSearch">
+        <h2 id="page-content-title" ng-if="!$ctrl.advancedSearch" translate="Title_Helpdesk">Help Desk</h2>
+        <ias-search-box id="input" ng-model="$ctrl.query"
+                        ng-model-options="{debounce: $ctrl.inputDebounce}"
+                        placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
+        </ias-search-box>
 
-    <ias-search-box ng-model="$ctrl.query" ng-model-options="{debounce: $ctrl.inputDebounce}"
-                    ng-if="!$ctrl.advancedSearch"
-                    placeholder="{{'Placeholder_Search' | translate}}">
-    </ias-search-box>
-    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
-                ng-if="!$ctrl.advancedSearch && $ctrl.advancedSearchEnabled"
-                ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
-        <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
-    </ias-button>
-    <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
-                ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
-
-    <span class="ias-fill"></span>
-
-    <ias-button id="view-tile-icon" class="ias-icon-button"
-                ng-click="$ctrl.gotoCardsView()"
-                ng-attr-title="{{ 'Title_HelpDeskCard' | translate }}">
-        <ias-icon icon="view_tile_thin"></ias-icon>
-    </ias-button>
-    <ias-button id="view-list-icon" class="ias-icon-button ias-selected"
-                ng-disabled="true"
-                ng-attr-title="{{ 'Title_HelpDeskTable' | translate }}">
-        <ias-icon icon="view_list_thin"></ias-icon>
-    </ias-button>
-    <div class="icon-divider vertical"></div>
-    <ias-button class="ias-icon-button table-configuration-menu-toggle" ias-toggle="menu1">
-        <ias-icon icon="configure_thick"></ias-icon>
-    </ias-button>
-    <ias-menu name="menu1" ias-align="end end">
-        <div class="ias-input-container">
-            <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
-                <input type="checkbox" ng-checked="value.visible" aria-label="Toggle column visibility" disabled/>
-                <ias-button ng-click="$ctrl.toggleColumnVisible($event, key)">{{value.label}}</ias-button>
-            </div>
+        <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
+                    ng-if="$ctrl.advancedSearchEnabled"
+                    ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
+            <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
+        </ias-button>
+    </div>
+    <div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
+        <div class="attribute-row" ng-repeat="query in $ctrl.queries">
+            <select ng-model="query.key">
+                <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
+                <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
+            </select>
+            <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
+            <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
+                        ng-attr-title="{{ 'Button_Remove' | translate }}">
+                <ias-icon icon="close_thin"></ias-icon>
+            </ias-button>
         </div>
-    </ias-menu>
-</div>
-
-<div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
-    <div class="attribute-row" ng-repeat="query in $ctrl.queries">
-        <select ng-model="query.key">
-            <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
-            <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
-        </select>
-        <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
-        <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
-                    ng-attr-title="{{ 'Button_Remove' | translate }}">
-            <ias-icon icon="close_thin"></ias-icon>
+        <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
+                    ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
+                    ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
+            <ias-icon icon="new_thin"></ias-icon>
+        </ias-button>
+    </div>
+    <span class="ias-fill"></span>
+    <div class="ias-header">
+        <ias-button id="view-tile-icon" class="ias-icon-button"
+                    ng-click="$ctrl.gotoCardsView()"
+                    ng-attr-title="{{ 'Title_HelpDeskCard' | translate }}">
+            <ias-icon icon="view_tile_thin"></ias-icon>
         </ias-button>
+        <ias-button id="view-list-icon" class="ias-icon-button ias-selected"
+                    ng-disabled="true"
+                    ng-attr-title="{{ 'Title_HelpDeskTable' | translate }}">
+            <ias-icon icon="view_list_thin"></ias-icon>
+        </ias-button>
+        <div class="icon-divider vertical"></div>
+        <ias-button class="ias-icon-button table-configuration-menu-toggle" ias-toggle="menu1">
+            <ias-icon icon="configure_thick"></ias-icon>
+        </ias-button>
+        <ias-menu name="menu1" ias-align="end end">
+            <div class="ias-input-container">
+                <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
+                    <input type="checkbox" ng-checked="value.visible" aria-label="Toggle column visibility" disabled/>
+                    <ias-button ng-click="$ctrl.toggleColumnVisible($event, key)">{{value.label}}</ias-button>
+                </div>
+            </div>
+        </ias-menu>
     </div>
-    <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
-                ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
-                ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
-        <ias-icon icon="new_thin"></ias-icon>
-    </ias-button>
 </div>
 
 <div class="search-info-container">

client/src/modules/helpdesk/helpdesk-search.component.scss

@@ -31,10 +31,6 @@ help-desk-search-table {
     margin-bottom: 0;
   }
 
-  .ias-search {
-    margin-right: 10px;
-  }
-
   .verifications-button {
     margin: 5px 5px 5px 0;
   }
@@ -44,17 +40,33 @@ help-desk-search-table {
     overflow: auto;
   }
 
-  .advanced-search-container {
+  .helpdesk-search-header {
     display: flex;
-    flex-direction: column;
     align-items: flex-start;
 
-    > * + * {
-      margin-top: 5px;
+    .basic-search-container {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+
+      > * + * {
+        margin-left: 10px;
+      }
     }
 
-    &+ div {
-      margin-top: 15px;
+    .advanced-search-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-bottom: 15px;
+
+      > * + * {
+        margin-top: 5px;
+      }
+
+      &+ div {
+        margin-top: 15px;
+      }
     }
   }
 }

client/src/modules/peoplesearch/peoplesearch-cards.component.html

@@ -20,55 +20,54 @@
   ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   -->
 
-<div class="ias-header">
-    <h2 id="page-content-title" ng-if="!$ctrl.advancedSearch" translate="Title_PeopleSearch">People Search</h2>
-    <h2 id="page-content-title" ng-if="$ctrl.advancedSearch">People Search Advanced Search</h2>
-    <ias-search-box id="input" ng-model="$ctrl.query"
-                    ng-if="!$ctrl.advancedSearch"
-                    ng-model-options="{debounce: $ctrl.inputDebounce}"
-                    placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
-    </ias-search-box>
-
-    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
-                ng-if="!$ctrl.advancedSearch && $ctrl.advancedSearchEnabled"
-                ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
-        <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
-    </ias-button>
+<div class="peoplesearch-header">
+    <div class="basic-search-container" ng-if="!$ctrl.advancedSearch">
+        <h2 id="page-content-title"  translate="Title_PeopleSearch">People Search</h2>
+        <ias-search-box id="input" ng-model="$ctrl.query"
+                        ng-model-options="{debounce: $ctrl.inputDebounce}"
+                        placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
+        </ias-search-box>
 
+        <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
+                    ng-if="$ctrl.advancedSearchEnabled"
+                    ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
+            <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
+        </ias-button>
+    </div>
+    <div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
+        <div class="attribute-row" ng-repeat="query in $ctrl.queries">
+            <select ng-model="query.key">
+                <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
+                <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
+            </select>
+            <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
+            <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
+                        ng-attr-title="{{ 'Button_Remove' | translate }}">
+                <ias-icon icon="close_thin"></ias-icon>
+            </ias-button>
+        </div>
+        <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
+                    ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
+                    ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
+            <ias-icon icon="new_thin"></ias-icon>
+        </ias-button>
+    </div>
     <span class="ias-fill"></span>
-
-    <ias-button id="view-tile-icon" class="ias-icon-button ias-selected" ng-disabled="true"
-                ng-attr-title="{{ 'Title_PeopleSearchCard' | translate }}">
-        <ias-icon icon="view_tile_thin"></ias-icon>
-    </ias-button>
-    <ias-button id="view-list-icon" class="ias-icon-button" ng-click="$ctrl.gotoTableView()"
-                ng-attr-title="{{ 'Title_PeopleSearchTable' | translate }}">
-        <ias-icon icon="view_list_thin"></ias-icon>
-    </ias-button>
-    <div class="icon-divider vertical" ng-if="$ctrl.orgChartEnabled"></div>
-    <ias-button id="orgchart-icon" class="ias-icon-button" ng-click="$ctrl.gotoOrgchart()" ng-if="$ctrl.orgChartEnabled"
-                ng-attr-title="{{ 'Title_OrgChart' | translate }}">
-        <ias-icon icon="orgchart_thin"></ias-icon>
-    </ias-button>
-</div>
-
-<div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
-    <div class="attribute-row" ng-repeat="query in $ctrl.queries">
-        <select ng-model="query.key">
-            <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
-            <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
-        </select>
-        <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
-        <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
-                    ng-attr-title="{{ 'Button_Remove' | translate }}">
-            <ias-icon icon="close_thin"></ias-icon>
+    <div class="ias-header">
+        <ias-button id="view-tile-icon" class="ias-icon-button ias-selected" ng-disabled="true"
+                    ng-attr-title="{{ 'Title_PeopleSearchCard' | translate }}">
+            <ias-icon icon="view_tile_thin"></ias-icon>
+        </ias-button>
+        <ias-button id="view-list-icon" class="ias-icon-button" ng-click="$ctrl.gotoTableView()"
+                    ng-attr-title="{{ 'Title_PeopleSearchTable' | translate }}">
+            <ias-icon icon="view_list_thin"></ias-icon>
+        </ias-button>
+        <div class="icon-divider vertical" ng-if="$ctrl.orgChartEnabled"></div>
+        <ias-button id="orgchart-icon" class="ias-icon-button" ng-click="$ctrl.gotoOrgchart()" ng-if="$ctrl.orgChartEnabled"
+                    ng-attr-title="{{ 'Title_OrgChart' | translate }}">
+            <ias-icon icon="orgchart_thin"></ias-icon>
         </ias-button>
     </div>
-    <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
-                ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
-                ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
-        <ias-icon icon="new_thin"></ias-icon>
-    </ias-button>
 </div>
 
 <div class="search-info-container">

client/src/modules/peoplesearch/peoplesearch-cards.component.scss

@@ -57,10 +57,6 @@ people-search-cards {
     }
   }
 
-  .ias-search {
-    margin-right: 10px;
-  }
-
   > .people-search-component-content {
     flex: 1 1;
     overflow: auto;
@@ -77,20 +73,6 @@ people-search-cards {
       }
     }
   }
-
-  .advanced-search-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    > * + * {
-      margin-top: 5px;
-    }
-
-    &+ div {
-      margin-top: 15px;
-    }
-  }
 }
 
 [dir="rtl"] {

client/src/modules/peoplesearch/peoplesearch-table.component.html

@@ -20,69 +20,67 @@
   ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   -->
 
-<div class="ias-header">
-    <h2 id="page-content-title" ng-if="!$ctrl.advancedSearch" translate="Title_PeopleSearch">People Search</h2>
-    <h2 id="page-content-title" ng-if="$ctrl.advancedSearch">People Search Advanced Search</h2>
+<div class="peoplesearch-header">
+    <div class="basic-search-container" ng-if="!$ctrl.advancedSearch">
+        <h2 id="page-content-title"  translate="Title_PeopleSearch">People Search</h2>
+        <ias-search-box id="input" ng-model="$ctrl.query"
+                        ng-model-options="{debounce: $ctrl.inputDebounce}"
+                        placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
+        </ias-search-box>
 
-    <ias-search-box id="input" ng-model="$ctrl.query"
-                    ng-if="!$ctrl.advancedSearch"
-                    ng-model-options="{debounce: $ctrl.inputDebounce}"
-                    placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
-    </ias-search-box>
-
-    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
-                ng-if="!$ctrl.advancedSearch && $ctrl.advancedSearchEnabled"
-                ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
-        <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
-    </ias-button>
-
-    <span class="ias-fill"></span>
-
-    <ias-button id="view-title-button" class="ias-icon-button"
-                ng-click="$ctrl.gotoCardsView()"
-                ng-attr-title="{{ 'Title_PeopleSearchCard' | translate }}">
-        <ias-icon class="ias-selected" icon="view_tile_thin"></ias-icon>
-    </ias-button>
-    <ias-button id="view-list-button" class="ias-icon-button ias-selected" ng-disabled="true"
-                ng-attr-title="{{ 'Title_PeopleSearchTable' | translate }}">
-        <ias-icon class="ias-selected" icon="view_list_thin"></ias-icon>
-    </ias-button>
-    <div class="icon-divider vertical"></div>
-    <ias-button id="view-orgchart-button" class="ias-icon-button" ng-click="$ctrl.gotoOrgchart()"
-                ng-if="$ctrl.orgChartEnabled"
-                ng-attr-title="{{ 'Title_OrgChart' | translate }}">
-        <ias-icon class="ias-selected" icon="orgchart_thin"></ias-icon>
-    </ias-button>
-    <ias-button class="ias-icon-button table-configuration-menu-toggle" ias-toggle="menu1">
-        <ias-icon icon="configure_thick"></ias-icon>
-    </ias-button>
-    <ias-menu name="menu1" ias-align="end end">
-        <div class="ias-input-container">
-            <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
-                <input type="checkbox" ng-checked="value.visible" aria-label="Toggle column visibility" disabled/>
-                <ias-button ng-click="$ctrl.toggleColumnVisible($event, key)">{{value.label}}</ias-button>
-            </div>
+        <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
+                    ng-if="$ctrl.advancedSearchEnabled"
+                    ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
+            <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
+        </ias-button>
+    </div>
+    <div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
+        <div class="attribute-row" ng-repeat="query in $ctrl.queries">
+            <select ng-model="query.key">
+                <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
+                <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
+            </select>
+            <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
+            <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
+                        ng-attr-title="{{ 'Button_Remove' | translate }}">
+                <ias-icon icon="close_thin"></ias-icon>
+            </ias-button>
         </div>
-    </ias-menu>
-</div>
-
-<div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
-    <div class="attribute-row" ng-repeat="query in $ctrl.queries">
-        <select ng-model="query.key">
-            <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
-            <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
-        </select>
-        <input ng-model="query.value" autocomplete="off" ng-change="$ctrl.onAdvancedSearchValueChanged($event)">
-        <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
-                    ng-attr-title="{{ 'Button_Remove' | translate }}">
-            <ias-icon icon="close_thin"></ias-icon>
+        <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
+                    ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
+                    ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
+            <ias-icon icon="new_thin"></ias-icon>
+        </ias-button>
+    </div>
+    <span class="ias-fill"></span>
+    <div class="ias-header">
+        <ias-button id="view-title-button" class="ias-icon-button"
+                    ng-click="$ctrl.gotoCardsView()"
+                    ng-attr-title="{{ 'Title_PeopleSearchCard' | translate }}">
+            <ias-icon class="ias-selected" icon="view_tile_thin"></ias-icon>
         </ias-button>
+        <ias-button id="view-list-button" class="ias-icon-button ias-selected" ng-disabled="true"
+                    ng-attr-title="{{ 'Title_PeopleSearchTable' | translate }}">
+            <ias-icon class="ias-selected" icon="view_list_thin"></ias-icon>
+        </ias-button>
+        <div class="icon-divider vertical"></div>
+        <ias-button id="view-orgchart-button" class="ias-icon-button" ng-click="$ctrl.gotoOrgchart()"
+                    ng-if="$ctrl.orgChartEnabled"
+                    ng-attr-title="{{ 'Title_OrgChart' | translate }}">
+            <ias-icon class="ias-selected" icon="orgchart_thin"></ias-icon>
+        </ias-button>
+        <ias-button class="ias-icon-button table-configuration-menu-toggle" ias-toggle="menu1">
+            <ias-icon icon="configure_thick"></ias-icon>
+        </ias-button>
+        <ias-menu name="menu1" ias-align="end end">
+            <div class="ias-input-container">
+                <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
+                    <input type="checkbox" ng-checked="value.visible" aria-label="Toggle column visibility" disabled/>
+                    <ias-button ng-click="$ctrl.toggleColumnVisible($event, key)">{{value.label}}</ias-button>
+                </div>
+            </div>
+        </ias-menu>
     </div>
-    <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
-                ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
-                ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
-        <ias-icon icon="new_thin"></ias-icon>
-    </ias-button>
 </div>
 
 <div class="search-info-container">

client/src/modules/peoplesearch/peoplesearch-table.component.scss

@@ -30,10 +30,6 @@ people-search-table {
     flex-flow: column nowrap;
     height: 100%;
 
-    .ias-search {
-        margin-right: 10px;
-    }
-
     > .people-search-component-content {
         flex: 1 1;
         overflow: auto;
@@ -46,18 +42,4 @@ people-search-table {
             right: 0;
         }
     }
-
-    .advanced-search-container {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-
-        > * + * {
-            margin-top: 5px;
-        }
-
-        &+ div {
-            margin-top: 15px;
-        }
-    }
 }

client/src/modules/peoplesearch/peoplesearch.scss

@@ -47,6 +47,36 @@ body {
     overflow: auto;
   }
 
+  .peoplesearch-header {
+    display: flex;
+    align-items: flex-start;
+
+    .basic-search-container {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+
+      > * + * {
+        margin-left: 10px;
+      }
+    }
+
+    .advanced-search-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-bottom: 15px;
+
+      > * + * {
+        margin-top: 5px;
+      }
+
+      &+ div {
+        margin-top: 15px;
+      }
+    }
+  }
+
   .search-info-container {
     text-align: left;