Fix card expand animation (#5161)

src/app/frontend/common/animations/animations.ts

@@ -18,36 +18,30 @@ const DEFAULT_TRANSITION_TIME = '500ms ease-in-out';
 
 export class Animations {
   static easeOut = trigger('easeOut', [
-    transition('* => void', [
+    transition(`${AUTO_STYLE} => void`, [
       style({opacity: 1}),
       animate(DEFAULT_TRANSITION_TIME, style({opacity: 0})),
     ]),
   ]);
 
   static easeInOut = trigger('easeInOut', [
-    transition('void => *', [
+    transition(`void => ${AUTO_STYLE}`, [
       style({opacity: 0}),
       animate(DEFAULT_TRANSITION_TIME, style({opacity: 1})),
     ]),
-    transition('* => void', [animate(DEFAULT_TRANSITION_TIME, style({opacity: 0}))]),
+    transition(`${AUTO_STYLE} => void`, [animate(DEFAULT_TRANSITION_TIME, style({opacity: 0}))]),
   ]);
 
   static expandInOut = trigger('expandInOut', [
-    state('true', style({height: '0', display: 'none'})),
-    state(
-      'false',
-      style({
-        height: AUTO_STYLE,
-        display: AUTO_STYLE,
-      }),
-    ),
+    state('true', style({height: '0', opacity: '0'})),
+    state('false', style({height: AUTO_STYLE, opacity: '1'})),
     transition('false => true', [
       style({overflow: 'hidden'}),
       animate('500ms ease-in', style({height: '0'})),
     ]),
     transition('true => false', [
-      style({overflow: 'hidden'}),
-      animate('500ms ease-out', style({height: AUTO_STYLE})),
+      style({overflow: 'hidden', opacity: '1'}),
+      animate('500ms ease-out', style({height: AUTO_STYLE, display: AUTO_STYLE})),
     ]),
   ]);
 }

src/app/frontend/common/components/card/component.ts

@@ -42,6 +42,12 @@ export class CardComponent {
     }
   }
 
+  onCardHeaderClick(): void {
+    if (this.expandable && !this.expanded) {
+      this.expanded = true;
+    }
+  }
+
   getTitleClasses(): {[clsName: string]: boolean} {
     const ngCls = {} as {[clsName: string]: boolean};
     if (!this.expanded) {

src/app/frontend/common/components/card/style.scss

@@ -37,7 +37,7 @@
 
 .kd-card-actions {
   display: block;
-  padding: $baseline-grid (2 * $baseline-grid);
+  padding: 0 (2 * $baseline-grid);
 }
 
 .kd-card-toggle {
@@ -57,7 +57,7 @@
   font-size: $title-font-size-base;
   font-weight: $regular-font-weight;
   margin-right: $baseline-grid;
-  padding: $baseline-grid 0 $baseline-grid (2 * $baseline-grid);
+  padding: (2 * $baseline-grid) 0 (2 * $baseline-grid) (2 * $baseline-grid);
 }
 
 .kd-card-description {

src/app/frontend/common/components/card/template.html

@@ -17,6 +17,7 @@ limitations under the License.
 <mat-card [ngClass]="{'kd-minimized-card': !expanded && !graphMode, 'kd-graph': graphMode}">
   <mat-card-title *ngIf="withTitle"
                   [ngClass]="getTitleClasses()"
+                  (click)="onCardHeaderClick(); $event.stopPropagation()"
                   fxLayoutAlign=" center">
     <div class="kd-card-title"
          fxFlex="100%">
@@ -36,7 +37,7 @@ limitations under the License.
     </div>
     <button class="kd-card-toggle"
             mat-icon-button
-            (click)="expand()"
+            (click)="expand(); $event.stopPropagation()"
             *ngIf="expandable">
       <mat-icon class="kd-muted"
                 [matTooltip]="expanded ? 'Minimize card' : 'Expand card'">