Limit card titles to two-lines with ellipsis/fade out

src/frontend/app/shared/components/add-service-instance/add-service-instance/add-service-instance.component.spec.ts

@@ -33,6 +33,7 @@ import { SelectPlanStepComponent } from '../select-plan-step/select-plan-step.co
 import { SelectServiceComponent } from '../select-service/select-service.component';
 import { SpecifyDetailsStepComponent } from '../specify-details-step/specify-details-step.component';
 import { AddServiceInstanceComponent } from './add-service-instance.component';
+import { MultilineTitleComponent } from '../../multiline-title/multiline-title.component';
 
 describe('AddServiceInstanceComponent', () => {
   let component: AddServiceInstanceComponent;
@@ -60,7 +61,8 @@ describe('AddServiceInstanceComponent', () => {
         BooleanIndicatorComponent,
         AppChipsComponent,
         ApplicationStateIconComponent,
-        ApplicationStateIconPipe
+        ApplicationStateIconPipe,
+        MultilineTitleComponent
       ],
       imports: [
         PageHeaderModule,

src/frontend/app/shared/components/add-service-instance/select-service/select-service.component.spec.ts

@@ -21,6 +21,7 @@ import { CfServiceCardComponent } from '../../list/list-types/cf-services/cf-ser
 import { ServiceIconComponent } from '../../service-icon/service-icon.component';
 import { CsiGuidsService } from '../csi-guids.service';
 import { SelectServiceComponent } from './select-service.component';
+import { MultilineTitleComponent } from '../../multiline-title/multiline-title.component';
 
 describe('SelectServiceComponent', () => {
   let component: SelectServiceComponent;
@@ -42,7 +43,8 @@ describe('SelectServiceComponent', () => {
         BooleanIndicatorComponent,
         AppChipsComponent,
         ApplicationStateIconComponent,
-        ApplicationStateIconPipe
+        ApplicationStateIconPipe,
+        MultilineTitleComponent
       ],
       imports: [...BaseTestModulesNoShared],
       providers: [

src/frontend/app/shared/components/list/list-cards/meta-card/meta-card-title/meta-card-title.component.scss

@@ -3,6 +3,8 @@
     flex: 1;
     font-weight: 500;
     margin-bottom: 16px;
+    overflow: hidden;
+    width: 100%;
     &.meta-card__title-nomargin {
       margin-bottom: 0;
     }

src/frontend/app/shared/components/list/list-types/app/card/card-app.component.html

@@ -1,5 +1,7 @@
 <app-meta-card class="app-card" [routerLink]="['/applications', row.entity.cfGuid , row.metadata.guid]" [status$]="appStatus$" [entityConfig]="entityConfig">
-  <app-meta-card-title>{{ row.entity.name }}</app-meta-card-title>
+  <app-meta-card-title>
+    <app-multiline-title>{{ row.entity.name }}</app-multiline-title>
+  </app-meta-card-title>
   <app-meta-card-item>
     <app-meta-card-key>State</app-meta-card-key>
     <app-meta-card-value>

src/frontend/app/shared/components/list/list-types/cf-buildpacks/cf-buildpack-card/cf-buildpack-card.component.html

@@ -1,7 +1,7 @@
 <app-meta-card class="buildpack-card">
   <app-meta-card-title class="buildpack-card__title">
     <div class="buildpack-card__title">
-      <div class="buildpack-card__title-name">{{ row.entity.name }}</div>
+      <app-multiline-title class="buildpack-card__title-name">{{ row.entity.name }}</app-multiline-title>
       <app-dot-content class="buildpack-card__title-dot">{{ row.entity.position }}</app-dot-content>
     </div>
   </app-meta-card-title>

src/frontend/app/shared/components/list/list-types/cf-buildpacks/cf-buildpack-card/cf-buildpack-card.component.scss

@@ -4,7 +4,6 @@
     flex-direction: row;
     &-name {
       align-items: baseline;
-      display: flex;
       flex: 1;
       flex-direction: row;
     }

src/frontend/app/shared/components/list/list-types/cf-orgs/cf-org-card/cf-org-card.component.html

@@ -1,6 +1,6 @@
 <app-meta-card class="org-card" [clickAction]="goToSummary" [entityConfig]="entityConfig" [actionMenu]="cardMenu">
   <app-meta-card-title class="org-card__title">
-    <div class="org-card__title-link">{{ row.entity.name }}</div>
+    <app-multiline-title class="org-card__title-link">{{ row.entity.name }}</app-multiline-title>
   </app-meta-card-title>
   <app-meta-card-item>
     <app-meta-card-key>Role</app-meta-card-key>

src/frontend/app/shared/components/list/list-types/cf-orgs/cf-org-card/cf-org-card.component.scss

@@ -1,5 +1,9 @@
 .org-card {
   &__title {
     width: 100%;
+    &-link {
+      // Don't overlap title with 3-dot menu
+      margin-right: 16px;
+    }
   }
 }

src/frontend/app/shared/components/list/list-types/cf-orgs/cf-org-card/cf-org-card.component.spec.ts

@@ -7,6 +7,7 @@ import {
   BaseTestModulesNoShared,
   generateTestCfEndpointServiceProvider,
   generateTestCfUserServiceProvider,
+  MetadataCardTestComponents,
 } from '../../../../../../test-framework/cloud-foundry-endpoint-service.helper';
 import { getInitialTestStoreState } from '../../../../../../test-framework/store-test-helper';
 import { CfOrgSpaceDataService } from '../../../../../data-services/cf-org-space-service.service';
@@ -31,9 +32,7 @@ describe('CfOrgCardComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CfOrgCardComponent, MetaCardComponent, MetaCardItemComponent,
-        MetaCardKeyComponent, ApplicationStateIconPipe, ApplicationStateIconComponent,
-        MetaCardTitleComponent, CardStatusComponent, MetaCardValueComponent],
+      declarations: [CfOrgCardComponent, MetadataCardTestComponents],
       imports: [...BaseTestModulesNoShared],
       providers: [
         PaginationMonitorFactory,

src/frontend/app/shared/components/list/list-types/cf-security-groups/cf-security-groups-card/cf-security-groups-card.component.html

@@ -1,6 +1,6 @@
 <app-meta-card class="sec-group-card">
   <app-meta-card-title class="sec-group-card__title">
-    <div class="sec-group-card__title-link">{{ row.entity.name }}</div>
+    <app-multiline-title class="sec-group-card__title-link">{{ row.entity.name }}</app-multiline-title>
   </app-meta-card-title>
   <app-meta-card-item>
     <app-meta-card-key>Created</app-meta-card-key>

src/frontend/app/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html

@@ -1,7 +1,7 @@
 <app-meta-card class="service-card" [clickAction]="!disableCardClick ? goToServiceInstances:null" *ngIf="!!serviceEntity">
   <app-meta-card-title noMargin="true">
     <div class="service-card__title">
-      <div class="service-card__title__link">{{ getDisplayName() }}</div>
+      <app-multiline-title class="service-card__title__link">{{ getDisplayName() }}</app-multiline-title>
       <app-service-icon [service]="serviceEntity"></app-service-icon>
     </div>
   </app-meta-card-title>

src/frontend/app/shared/components/list/list-types/cf-spaces/cf-space-card/cf-space-card.component.html

@@ -1,6 +1,6 @@
 <app-meta-card class="space-card" [clickAction]="goToSummary" [entityConfig]="entityConfig" [actionMenu]="cardMenu">
   <app-meta-card-title class="space-card__title">
-    <div class="space-card__title-link">{{ row.entity.name }}</div>
+    <app-multiline-title class="space-card__title-link">{{ row.entity.name }}</app-multiline-title>
   </app-meta-card-title>
   <app-meta-card-item>
     <app-meta-card-key>Role</app-meta-card-key>

src/frontend/app/shared/components/list/list-types/cf-spaces/cf-space-card/cf-space-card.component.scss

@@ -2,5 +2,9 @@
   width: 100%;
   &__title {
     width: 100%;
+    &-link {
+      // Don't overlap title with 3-dot menu
+      margin-right: 16px;
+    }
   }
 }

src/frontend/app/shared/components/list/list-types/cf-stacks/cf-stacks-card/cf-stacks-card.component.html

@@ -1,6 +1,6 @@
 <app-meta-card class="stack-card">
   <app-meta-card-title class="stack-card__title">
-    <div class="stack-card__title-link">{{ row.entity.name }}</div>
+    <app-multiline-title class="stack-card__title-link">{{ row.entity.name }}</app-multiline-title>
   </app-meta-card-title>
   <app-meta-card-item>
     <app-meta-card-key>Description</app-meta-card-key>

src/frontend/app/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html

@@ -1,6 +1,6 @@
 <app-meta-card *ngIf="serviceInstanceEntity" class="app-service-card" [actionMenu]="cardMenu" [entityConfig]="entityConfig">
   <app-meta-card-title>
-    <div class="app-service-card__title">{{ serviceInstanceEntity.entity.name }}</div>
+    <app-multiline-title class="service-instance-card__title">{{ serviceInstanceEntity.entity.name }}</app-multiline-title>
   </app-meta-card-title>
   <app-meta-card-item>
     <app-meta-card-key>Space</app-meta-card-key>

src/frontend/app/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.scss

@@ -23,4 +23,8 @@
     display: flex;
     text-decoration: none;
   }
+  &__title {
+    // Title should not overlap with 3-dot menu
+    margin-right: 16px;
+  }
 }

src/frontend/app/shared/components/multiline-title/multiline-title.component.html

@@ -0,0 +1,3 @@
+<div class="app-multiline-title">
+  <ng-content></ng-content>
+</div>

src/frontend/app/shared/components/multiline-title/multiline-title.component.scss

@@ -0,0 +1,35 @@
+:host {
+  display: flex;
+}
+
+.app-multiline-title {
+  // Have to use the * comment format otherwise it does not work
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  max-height: 2.4em;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  width: 100;
+  word-break: break-all;
+}
+
+// Firefox does not support multi-line text ellipsis
+// So fade out the end of the last line in the div
+// Firefox only
+@media screen and (min--moz-device-pixel-ratio:0) {
+  .app-multiline-title {
+    // Fade
+    &::after {
+      bottom: 0;
+      content: '';
+      height: 1.2em;
+      position: absolute;
+      right: 0;
+      text-align: right;
+      width: 48px;
+    }
+  }
+}

src/frontend/app/shared/components/multiline-title/multiline-title.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultilineTitleComponent } from './multiline-title.component';
+
+describe('MultilineTitleComponent', () => {
+  let component: MultilineTitleComponent;
+  let fixture: ComponentFixture<MultilineTitleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MultilineTitleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MultilineTitleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/app/shared/components/multiline-title/multiline-title.component.theme.scss

@@ -0,0 +1,16 @@
+@import '~@angular/material/theming';
+
+@mixin app-multiline-title-theme($theme, $app-theme) {
+  // Firefox only
+  @media screen and (min--moz-device-pixel-ratio:0) {
+    $primary: map-get($theme, primary);
+    $background: mat-color($primary, 500);
+
+    .app-multiline-title {
+      // Fade
+      &::after {
+        background: linear-gradient(to right, rgba(255, 255, 255, 0), $background 70%);
+      }
+    }
+  }
+}

src/frontend/app/shared/components/multiline-title/multiline-title.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-multiline-title',
+  templateUrl: './multiline-title.component.html',
+  styleUrls: ['./multiline-title.component.scss']
+})
+export class MultilineTitleComponent { }

src/frontend/app/shared/shared.module.ts

@@ -140,6 +140,7 @@ import { MomentModule } from 'ngx-moment';
 import { MetricsRangeSelectorComponent } from './components/metrics-range-selector/metrics-range-selector.component';
 import { MetricsParentRangeSelectorComponent } from './components/metrics-parent-range-selector/metrics-parent-range-selector.component';
 import { MetricsRangeSelectorService } from './services/metrics-range-selector.service';
+import { MultilineTitleComponent } from './components/multiline-title/multiline-title.component';
 
 @NgModule({
   imports: [
@@ -248,6 +249,7 @@ import { MetricsRangeSelectorService } from './services/metrics-range-selector.s
     StartEndDateComponent,
     MetricsRangeSelectorComponent,
     MetricsParentRangeSelectorComponent,
+    MultilineTitleComponent,
   ],
   exports: [
     FormsModule,

src/frontend/app/test-framework/cloud-foundry-endpoint-service.helper.ts

@@ -36,6 +36,7 @@ import { AppState } from '../store/app-state';
 import { CloudFoundrySpaceServiceMock } from './cloud-foundry-space.service.mock';
 import { createBasicStoreModule, testSCFGuid } from './store-test-helper';
 import { CfUserServiceTestProvider } from './user-service-helper';
+import { MultilineTitleComponent } from '../shared/components/multiline-title/multiline-title.component';
 
 export const cfEndpointServiceProviderDeps = [
   EntityServiceFactory,
@@ -127,4 +128,4 @@ export const getCfSpaceServiceMock = {
 
 export const MetadataCardTestComponents = [MetaCardComponent, MetaCardItemComponent,
   MetaCardKeyComponent, ApplicationStateIconPipe, ApplicationStateIconComponent,
-  MetaCardTitleComponent, CardStatusComponent, MetaCardValueComponent];
+  MetaCardTitleComponent, CardStatusComponent, MetaCardValueComponent, MultilineTitleComponent];

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/shared/components/multiline-title/multiline-title.component.theme';
 @import './components/mat-tabs.theme';
 @import './components/text-status.theme';
 @import './components/hyperlinks.theme';
@@ -111,6 +112,7 @@ $side-nav-light-active: #484848;
   @include start-end-theme($theme, $app-theme);
   @include metrics-chart-theme($theme, $app-theme);
   @include metrics-range-selector-theme($theme, $app-theme);
+  @include app-multiline-title-theme($theme, $app-theme);
 }
 
 @function app-generate-nav-theme($theme, $nav-theme: null) {