Merge pull request #3243 from cloudfoundry-incubator/apps-filter-box-…

…tweak

App Wall filter and sort controls size tweaks

src/frontend/app/features/applications/application-wall/application-wall.component.html

@@ -25,5 +25,5 @@ <h1>Applications</h1>
   text: ''
 }"></app-no-content-message>
 </ng-template>
-<app-list [noEntries]="noEntries" [noEntriesForCurrentFilter]="noEntriesForCurrentFilter" *ngIf="!!(cloudFoundryService.hasRegisteredCFEndpoints$ | async) && !!(cloudFoundryService.hasConnectedCFEndpoints$ | async)">
+<app-list class="app-wall" [noEntries]="noEntries" [noEntriesForCurrentFilter]="noEntriesForCurrentFilter" *ngIf="!!(cloudFoundryService.hasRegisteredCFEndpoints$ | async) && !!(cloudFoundryService.hasConnectedCFEndpoints$ | async)">
 </app-list>

src/frontend/app/features/applications/application-wall/application-wall.component.theme.scss

@@ -0,0 +1,9 @@
+// For the App Wall, reduce the size of the filter and sort
+.app-wall {
+  .list-component__header__right-filter {
+    width: 140px;
+  }
+  .list-component__header__right-sort {
+    width: 120px;
+  }
+}

src/frontend/app/shared/components/list/list-types/app/cf-app-config.service.ts

@@ -45,7 +45,7 @@ export class CfAppConfigService extends ListConfig<APIResource> implements IList
   appsDataSource: CfAppsDataSource;
   columns: Array<ITableColumn<APIResource>> = [
     {
-      columnId: 'name', headerCell: () => 'Application Name', cellComponent: TableCellAppNameComponent, cellFlex: '2', sort: {
+      columnId: 'name', headerCell: () => 'Name', cellComponent: TableCellAppNameComponent, cellFlex: '2', sort: {
         type: 'sort',
         orderKey: 'name',
         field: 'entity.name'

src/frontend/app/shared/components/list/list.component.html

@@ -29,13 +29,13 @@
         <div class="list-component__header__right">
           <!-- Filter by text input -->
           <div class="filter" [hidden]="!config.enableTextFilter || (!(hasRows$ | async) && !filter) || (dataSource.isAdding$ | async)">
-            <mat-form-field floatLabel="never">
+            <mat-form-field floatLabel="never" class="list-component__header__right-filter">
               <input matInput [ngModel]="filterString" #filter="ngModel" [disabled]="(dataSource.isLoadingPage$ | async)" name="filter" placeholder="{{config.text?.filter || 'Filter'}}">
             </mat-form-field>
           </div>
           <!-- Sort Button & Drop down -->
           <div class="sort" [hidden]="(view$ | async) === 'table' || sortColumns.length < 1 || (isAddingOrSelecting$ | async) || (!(dataSource.isLoadingPage$ | async) && !(hasRowsOrIsFiltering$ | async))">
-            <mat-form-field>
+            <mat-form-field class="list-component__header__right-sort">
               <mat-select name="sort-field" matInput [(ngModel)]="headerSort.value" shouldPlaceholderFloat="false" [disabled]="(disableActions$ | async)" (selectionChange)="updateListSort($event.value, headerSort.direction)">
                 <mat-option *ngFor="let column of sortColumns" [value]="column.columnId">
                   {{column.headerCell()}}

src/frontend/sass/_all-theme.scss

@@ -36,6 +36,7 @@
 @import '../app/shared/components/start-end-date/start-end-date.component.theme';
 @import '../app/shared/components/metrics-chart/metrics-chart.component.theme';
 @import '../app/shared/components/metrics-range-selector/metrics-range-selector.component.theme';
+@import '../app/features/applications/application-wall/application-wall.component.theme';
 @import '../app/shared/components/multiline-title/multiline-title.component.theme';
 @import './components/mat-tabs.theme';
 @import './components/text-status.theme';
@@ -48,6 +49,7 @@ $side-nav-light-text: #fff;
 $side-nav-light-bg: #333;
 $side-nav-light-hover: #555;
 $side-nav-light-active: #484848;
+
 // Creates the app theme and applies it to the application
 // $theme = Angular Material Theme
 // $nav-theme - Colors for the Side Nav (optional)
@@ -62,18 +64,23 @@ $side-nav-light-active: #484848;
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
   $subdued: mat-contrast($primary, 50);
+
   @if $is-dark==true {
     $app-background-color: lighten(mat-color($background-colors, background), 10%);
     $subdued: darken($subdued, 50);
   }
+
   @else {
     $app-background-color: darken(mat-color($background-colors, background), 2%);
     $subdued: lighten($subdued, 50);
   }
+
   html {
     background-color: $app-background-color;
-  } // App Theme defines a set of colors used by stratos components
-  $app-theme: ( app-background-color: $app-background-color, app-background-text-color: rgba(mat-color($foreground-colors, base), .65), side-nav: app-generate-nav-theme($theme, $nav-theme), status: app-generate-status-theme($theme, $status-theme), subdued-color: $subdued, ansi-colors: $ansi-color-palette); // Pass the Material theme and the App Theme to components that need to be themed
+  }
+
+  // App Theme defines a set of colors used by stratos components
+  $app-theme: (app-background-color: $app-background-color, app-background-text-color: rgba(mat-color($foreground-colors, base), .65), side-nav: app-generate-nav-theme($theme, $nav-theme), status: app-generate-status-theme($theme, $status-theme), subdued-color: $subdued, ansi-colors: $ansi-color-palette); // Pass the Material theme and the App Theme to components that need to be themed
   @include dialog-error-theme($theme, $app-theme);
   @include login-page-theme($theme, $app-theme);
   @include side-nav-theme($theme, $app-theme);
@@ -119,20 +126,22 @@ $side-nav-light-active: #484848;
   @if ($nav-theme) {
     @return $nav-theme;
   }
+
   @else {
     // Use default palette for side navigation
-    @return ( background: $side-nav-light-bg, background-top: $side-nav-light-bg, text: darken($side-nav-light-text, 10%), active: $side-nav-light-active, active-text: $side-nav-light-text, hover: $side-nav-light-hover, hover-text: $side-nav-light-text);
+    @return (background: $side-nav-light-bg, background-top: $side-nav-light-bg, text: darken($side-nav-light-text, 10%), active: $side-nav-light-active, active-text: $side-nav-light-text, hover: $side-nav-light-hover, hover-text: $side-nav-light-text);
   }
 }
 
 @function app-generate-status-theme($theme, $status-theme: null) {
   @if ($status-theme) {
     @return $status-theme;
   }
+
   @else {
     $warn: map-get($theme, warn);
     $primary: map-get($theme, primary);
     $white: #fff; // Use default palette for status
-    @return ( success: map-get($mat-green, 500), warning: map-get($mat-orange, 500), danger: mat-color($warn), tentative: map-get($mat-grey, 500), busy: mat-color($primary), text: $white, );
+    @return (success: map-get($mat-green, 500), warning: map-get($mat-orange, 500), danger: mat-color($warn), tentative: map-get($mat-grey, 500), busy: mat-color($primary), text: $white, );
   }
 }

src/test-e2e/applications/application-wall-e2e.spec.ts

@@ -193,7 +193,7 @@ describe('Application Wall Tests -', () => {
       });
 
       it('sort by name', () => {
-        testSortBy('Application Name');
+        testSortBy('Name');
       });
 
       it('sort by creation', () => {