Polish presentation list component

Author: kirjs

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.html

@@ -20,14 +20,16 @@
     </button>
   </div>
   <div>
-    <mat-checkbox [(ngModel)]="showPreview" (ngModelChange)="update()">
-      Show preview
-    </mat-checkbox>
-  </div>
-  <div>
-    <mat-checkbox [(ngModel)]="allowSwitchingFiles" (ngModelChange)="update()">
-      Allow switching files [{{ allowSwitchingFiles }}]
-    </mat-checkbox>
+    <div>
+      <mat-checkbox [(ngModel)]="showPreview" (ngModelChange)="update()">
+        Show preview
+      </mat-checkbox>
+    </div>
+    <div>
+      <mat-checkbox [(ngModel)]="allowSwitchingFiles" (ngModelChange)="update()">
+        Allow switching files
+      </mat-checkbox>
+    </div>
   </div>
 </div>
 <slides-highlight-button

apps/codelab/src/app/admin/content/presentation-list/presentation-list.component.css

@@ -1,24 +1,44 @@
+
 .header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .presentation {
   background: white;
   border: 1px solid #ddd;
   margin-top: 20px;
   min-height: 200px;
-  padding: 16px;
+  padding: 0 16px 16px;
 }
 
 .wrapper {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 250px);
+  grid-template-columns: repeat(auto-fill, 256px);
   grid-gap: 20px;
 }
 
-.first-slide {
-  border: 1px #ddd solid;
+.mdc-list-item.mdc-list-item--with-one-line.first-slide {
+  display: block;
   border-radius: 4px;
+  position: relative;
+  width: 220px;
+  height: 160px;
+  border: 1px #ddd solid;
+}
+
+.slides-slide-preview-wrapper {
+  transform: scale(0.2);
+  transform-origin: 0;
+  position: absolute;
+  left: 0;
+  top: -320px;
+}
+
+slides-slide-preview {
+  width: 1100px;
+  height: 800px;
+  display: block;
 }

apps/codelab/src/app/admin/content/presentation-list/presentation-list.component.html

@@ -1,25 +1,35 @@
-<div class="wrapper">
+<mat-nav-list class="wrapper">
   <div
     *ngFor="let presentation of presentations$ | async"
-    (click)="navigationService.goToPresentation(presentation.id)"
     class="presentation"
-    role="button"
-    tabindex="0"
   >
     <div class="header">
       <div>{{ presentation.name }}</div>
-      <button mat-icon-button (click)="deletePresentation(presentation.id)">
-        <mat-icon>cancel</mat-icon>
+      <mat-menu #menu>
+        <button mat-menu-item (click)="deletePresentation(presentation.id)">
+          Delete
+        </button>
+      </mat-menu>
+      <button
+        mat-icon-button
+        [matMenuTriggerFor]="menu"
+        aria-label="Example icon-button with a menu"
+      >
+        <mat-icon>more_vert</mat-icon>
       </button>
     </div>
-    <div *ngIf="presentation.slides[0] as slide" class="first-slide">
-      <slides-slide-preview
-        style="display: block; width: 200px"
-        mode="preview"
-        [slide]="slide"
-      ></slides-slide-preview>
-    </div>
+
+    <a *ngIf="presentation.slides[0] as slide" class="first-slide"
+       mat-list-item
+       [routerLink]="'./' + presentation.id + '/0'">
+      <div class="slides-slide-preview-wrapper">
+        <slides-slide-preview
+          mode="preview"
+          [slide]="slide"
+        ></slides-slide-preview>
+      </div>
+    </a>
   </div>
-</div>
+</mat-nav-list>
 
 <button mat-button (click)="addPresentation()">Create presentation</button>

apps/codelab/src/app/admin/content/presentation-list/presentation-list.module.ts

@@ -5,6 +5,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { PreviewModule } from '../presentation-editor/preview/preview.module';
+import { MatListModule } from "@angular/material/list";
+import { MatMenuModule } from "@angular/material/menu";
 
 @NgModule({
   declarations: [PresentationListComponent],
@@ -15,6 +17,8 @@ import { PreviewModule } from '../presentation-editor/preview/preview.module';
     MatIconModule,
     RouterModule,
     PreviewModule,
+    MatListModule,
+    MatMenuModule,
   ],
 })
 export class PresentationListModule {}

apps/codelab/src/app/v2/presentation-list/presentation-list.component.css

@@ -14,11 +14,28 @@
 .wrapper {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 250px);
+  grid-template-columns: repeat(auto-fill, 256px);
   grid-gap: 20px;
 }
 
 .first-slide {
-  border: 1px #ddd solid;
   border-radius: 4px;
+  position: relative;
+  width: 220px;
+  height: 160px;
+  border: 1px #ddd solid;
+}
+
+.slides-slide-preview-wrapper {
+  transform: scale(0.2);
+  transform-origin: 0;
+  position: absolute;
+  left: 0;
+  top: -320px;
+}
+
+slides-slide-preview {
+  width: 1100px;
+  height: 800px;
+  display: block;
 }

apps/codelab/src/app/v2/presentation-list/presentation-list.component.html

@@ -1,20 +1,20 @@
-<div class="wrapper">
-  <div
+<mat-nav-list class="wrapper">
+  <a
     *ngFor="let presentation of presentations$ | async"
-    (click)="navigationService.goToPresentation(presentation.id)"
+    mat-list-item
+    [routerLink]="'./' + presentation.id + '/0'"
     class="presentation"
-    role="button"
-    tabindex="0"
   >
     <div class="header">
       <div>{{ presentation.name }}</div>
     </div>
     <div *ngIf="presentation.slides[0] as slide" class="first-slide">
-      <slides-slide-preview
-        style="display: block; width: 200px"
-        mode="preview"
-        [slide]="slide"
-      ></slides-slide-preview>
+      <div class="slides-slide-preview-wrapper">
+        <slides-slide-preview
+          mode="preview"
+          [slide]="slide"
+        ></slides-slide-preview>
+      </div>
     </div>
-  </div>
-</div>
+  </a>
+</mat-nav-list>

apps/codelab/src/app/v2/presentation-list/presentation-list.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { PreviewModule } from '../../admin/content/presentation-editor/preview/preview.module';
+import { MatListModule } from "@angular/material/list";
 
 @NgModule({
   declarations: [PresentationListComponent],
@@ -15,6 +16,7 @@ import { PreviewModule } from '../../admin/content/presentation-editor/preview/p
     MatIconModule,
     RouterModule,
     PreviewModule,
+    MatListModule,
   ],
 })
 export class PresentationListModule {}