Optionally reduce size of tile selector cards, apply to create endpoints and deploy app

src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-steps.types.ts

@@ -34,7 +34,8 @@ export class ApplicationDeploySourceTypes {
       helpText: 'Please select the public GitHub project and branch you would like to deploy from.',
       graphic: {
         // TODO: Move cf assets to CF package (#3769)
-        location: '/core/assets/endpoint-icons/github-logo.png'
+        location: '/core/assets/endpoint-icons/github-logo.png',
+        transform: 'scale(0.7)'
       }
     },
     {
@@ -51,20 +52,22 @@ export class ApplicationDeploySourceTypes {
       id: DEPLOY_TYPES_IDS.GIT_URL,
       helpText: 'Please enter the public git url and branch or tag you would like to deploy from.',
       graphic: {
-        location: '/core/assets/endpoint-icons/Git-logo.png'
+        location: '/core/assets/endpoint-icons/Git-logo.png',
+        transform: 'scale(0.7)'
       }
     },
     {
       name: 'Docker Image',
       id: DEPLOY_TYPES_IDS.DOCKER_IMG,
       helpText: 'Please specify an application name and the Docker image to be used (registry/org/image-name).',
       graphic: {
-        location: '/core/assets/endpoint-icons/docker.png'
+        location: '/core/assets/endpoint-icons/docker.png',
+        transform: 'scale(0.8)'
       },
       disabledText: 'The selected Cloud Foundry cannot deploy Docker images. Please check that the Diego Docker feature flag is enabled'
     },
     {
-      name: 'Application Archive File',
+      name: 'Application Archive',
       id: DEPLOY_TYPES_IDS.FILE,
       helpText: 'Please select the archive file that contains the application you would like to deploy.',
       graphic: { matIcon: 'unarchive' }

src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html

@@ -7,7 +7,8 @@ <h1>New Application</h1>
       <h3>Select application source</h3>
       <p>To create an application you can either deploy from a specific source or create an application shell. An
         application shell is an empty application with no package associated with it.</p>
-      <app-tile-selector [options]="tileSelectorConfig" (selection)="selectedTile = $event"></app-tile-selector>
+      <app-tile-selector [options]="tileSelectorConfig" [smallerTiles]="true" (selection)="selectedTile = $event">
+      </app-tile-selector>
     </div>
   </app-step>
 </app-steppers>

src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.html

@@ -1,13 +1,16 @@
-<div *ngIf="tile" class="tile-selector" [ngClass]="{'tile-selector__active': active, 'tile-selector__taller': !!tile.description}" (click)="onClick(tile)">
-  <div class="tile-selector__header">
-    <mat-icon *ngIf="tile.graphic.matIcon; else imgIcon" class="tile-selector__icon"
-      [fontSet]="tile.graphic.matIconFont"> {{ tile.graphic.matIcon }}</mat-icon>
-    <ng-template #imgIcon>
-      <img src="{{tile.graphic.location}}" />
-    </ng-template>
+<div *ngIf="tile" class="tile-selector-parent" [ngClass]="{'smaller': smaller}">
+  <div class="tile-selector" [ngClass]="{'tile-selector__active': active, 'tile-selector__taller': !!tile.description}"
+    (click)="onClick(tile)">
+    <div class="tile-selector__header">
+      <mat-icon *ngIf="tile.graphic.matIcon; else imgIcon" class="tile-selector__icon"
+        [fontSet]="tile.graphic.matIconFont"> {{ tile.graphic.matIcon }}</mat-icon>
+      <ng-template #imgIcon>
+        <img src="{{tile.graphic.location}}" [style.transform]="tile.graphic.transform" />
+      </ng-template>
+    </div>
+    <div class="tile-selector__content">
+      <h3>{{ tile.label }}</h3>
+    </div>
+    <div class="tile-selector__description" *ngIf="tile && tile.description">{{ tile.description }}</div>
   </div>
-  <div class="tile-selector__content">
-    <h3>{{ tile.label }}</h3>
-  </div>
-  <div class="tile-selector__description" *ngIf="tile && tile.description">{{ tile.description }}</div>
-</div>
+</div>

src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.scss

@@ -1,74 +1,82 @@
-.tile-selector {
-  $tile-height: 200px;
-  border-radius: 3px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: $tile-height;
-  opacity: .5;
-  transition: transform .2s ease;
-  user-select: none;
-  width: 100%;
 
-  &__taller {
-    height: 260px;
-  }
-  &:hover {
-    opacity: 1;
-    transform: scale(1.02);
-  }
-  &__more {
-    align-items: center;
+@mixin create($tile-height: 200px, $icon-size: 80px) {
+  $img-size: $tile-height / 2;
+
+  .tile-selector {
+    border-radius: 3px;
     cursor: pointer;
     display: flex;
-    font-size: 16px;
+    flex-direction: column;
     height: $tile-height;
-    justify-content: center;
-  }
+    opacity: .5;
+    transition: transform .2s ease;
+    user-select: none;
+    width: 100%;
 
-  &:active {
-    transform: scale(.98);
-  }
+    &:hover {
+      opacity: 1;
+      transform: scale(1.02);
+    }
+    &__more {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      font-size: 16px;
+      height: $tile-height;
+      justify-content: center;
+    }
 
-  &__active {
-    opacity: 1;
-  }
+    &:active {
+      transform: scale(.98);
+    }
 
-  &__header {
-    align-items: center;
-    display: flex;
-    flex: 2;
-    justify-content: center;
-    width: 100%;
+    &__active {
+      opacity: 1;
+    }
+
+    &__header {
+      align-items: center;
+      display: flex;
+      flex: 2;
+      justify-content: center;
+      width: 100%;
 
-    img {
-      height: 100px;
+      img {
+        height: $img-size;
+      }
     }
-  }
 
-  &__description {
-    flex: 0;
-    padding: 10px;
-    text-align: center;
-  }
+    &__description {
+      flex: 0;
+      padding: 10px;
+      text-align: center;
+    }
 
-  &__content {
-    display: flex;
-    flex: 0;
-    flex-direction: column;
-    justify-content: center;
-    opacity: .8;
-    padding: 0 1em;
-    position: relative;
-    text-align: center;
-    word-wrap: break-word;
+    &__content {
+      display: flex;
+      flex: 0;
+      flex-direction: column;
+      justify-content: center;
+      opacity: .8;
+      padding: 0 1em;
+      position: relative;
+      text-align: center;
+      word-wrap: break-word;
+    }
+
+    &__icon {
+      font-size: $icon-size;
+      height: $icon-size;
+      opacity: .6;
+      width: $icon-size;
+    }
   }
+}
+
+.tile-selector-parent {
+  @include create;
 
-  $icon-size: 80px;
-  &__icon {
-    font-size: $icon-size;
-    height: $icon-size;
-    opacity: .6;
-    width: $icon-size;
+  &.smaller {
+    @include create(160px, 60px);
   }
 }

src/frontend/packages/core/src/shared/components/tile-selector-tile/tile-selector-tile.component.ts

@@ -1,17 +1,20 @@
-import { Component, Input, EventEmitter, Output } from '@angular/core';
-import { ITileConfig, ITileIconConfig, ITileImgConfig, ITileData } from '../tile/tile-selector.types';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { ITileConfig, ITileData, ITileGraphic } from '../tile/tile-selector.types';
 
 @Component({
   selector: 'app-tile-selector-tile',
   templateUrl: './tile-selector-tile.component.html',
   styleUrls: ['./tile-selector-tile.component.scss']
 })
-export class TileSelectorTileComponent<Y = ITileIconConfig | ITileImgConfig> {
+export class TileSelectorTileComponent<Y = ITileGraphic> {
 
   @Input() tile: ITileConfig<ITileData, Y>;
 
   @Input() active: boolean;
 
+  @Input() smaller = false;
+
   @Output() tileSelect = new EventEmitter<ITileConfig>();
 
   public onClick(tile: ITileConfig) {

src/frontend/packages/core/src/shared/components/tile-selector/tile-selector.component.html

@@ -11,7 +11,7 @@
 </div>
 
 <ng-template #tile let-options="options" let-selected="selected">
-  <app-tile-selector-tile *ngFor="let tile of options"
-    (tileSelect)="selectionChange(tile)" [tile]="tile" [active]="selected === tile || !selected">
+  <app-tile-selector-tile *ngFor="let tile of options" (tileSelect)="selectionChange(tile)" [tile]="tile"
+    [active]="selected === tile || !selected" [smaller]="smallerTiles">
   </app-tile-selector-tile>
 </ng-template>

src/frontend/packages/core/src/shared/components/tile-selector/tile-selector.component.scss

@@ -9,17 +9,31 @@
   min-height: 0;
   min-width: 0;
 
-  @include breakpoint(tablet) {
+
+  @include breakpoint(mobileonly) {
+    // < 600
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  @include breakpoint(phablet) {
+    // > 600
     grid-column-gap: $bottom-space;
     grid-row-gap: $bottom-space;
     grid-template-columns: repeat(2, 1fr);
   }
 
+  @include breakpoint(tablet) {
+    // > 900
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   @include breakpoint(laptop) {
+    // > 1200
     grid-template-columns: repeat(4, 1fr);
   }
 
   @include breakpoint(desktop) {
+    // > 1800
     grid-template-columns: repeat(5, 1fr);
   }
 }

src/frontend/packages/core/src/shared/components/tile-selector/tile-selector.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+
 import { ITileConfig } from '../tile/tile-selector.types';
 
 
@@ -11,6 +12,7 @@ export class TileSelectorComponent {
   public pOptions: ITileConfig[] = [];
   public hiddenOptions: ITileConfig[] = [];
   public showingMore = false;
+  @Input() smallerTiles = false;
   @Input() set options(options: ITileConfig[]) {
     const groupedOptions = options.reduce((grouped, option) => {
       if (option.hidden) {
@@ -20,9 +22,9 @@ export class TileSelectorComponent {
       }
       return grouped;
     }, {
-        show: [],
-        hidden: []
-      });
+      show: [],
+      hidden: []
+    });
     this.pOptions = groupedOptions.show;
     this.hiddenOptions = groupedOptions.hidden;
   }

src/frontend/packages/core/src/shared/components/tile/tile-selector.types.ts

@@ -5,6 +5,7 @@ export interface ITileIconConfig {
 
 export interface ITileImgConfig {
   location: string;
+  transform?: string;
 }
 
 export type ITileGraphic = ITileIconConfig | ITileImgConfig;