Merge branch 'feature/side-panel-selection' into wysiwyg

Author: NothingEverHappens

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

@@ -9,7 +9,7 @@
 <div class="wrapper" *ngIf="presentation$ | async as presentation">
   <slides-side-panel
     [presentationId]="presentation.id"
-    [selectedSlide]="selectedSlide$ | async"
+    [currentSlideIndex]="currentSlideIndex$ | async"
     [slides]="presentation.slides"
   ></slides-side-panel>
   <div class="editor" *ngIf="currentSlide$ | async as slide; else noSlide">

apps/codelab/src/app/admin/content/presentation-editor/content.component.ts

@@ -6,8 +6,6 @@ import { combineLatest } from 'rxjs';
 import { ContentPresentation } from './types';
 import { NavigationService } from './services/navigation.service';
 
-declare const require;
-
 @Component({
   selector: 'slides-content',
   templateUrl: './content.component.html',
@@ -25,7 +23,7 @@ export class ContentComponent {
     })
   );
 
-  selectedSlide$ = this.contentService.selectedSlide$;
+  currentSlideIndex$ = this.contentService.currentSlideIndex$;
 
   currentSlide$ = combineLatest([
     this.navigationService.selectedSlide$,

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

@@ -1,7 +1,7 @@
 <div class="wrapper" *ngIf="contentService.state$ | async as presentations">
   <div
     class="editor"
-    *ngIf="presentations[contentService.selectedSlide$ | async] as slide"
+    *ngIf="presentations[contentService.currentSlideIndex$ | async] as slide"
   >
     <slides-slide-preview [slide]="slide"></slides-slide-preview>
   </div>

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -20,9 +20,9 @@ const DOC_KEY = 'presentations';
 
 @Injectable()
 export class ContentService implements OnDestroy {
-  private readonly selectedSlideSubject = new BehaviorSubject(0);
+  private readonly currentSlideSubject = new BehaviorSubject(0);
 
-  public readonly selectedSlide$ = this.selectedSlideSubject;
+  public readonly currentSlideIndex$ = this.currentSlideSubject;
 
   readonly presentations = this.firestore.collection('presentations');
   private readonly presentations$ = this.presentations
@@ -94,7 +94,7 @@ export class ContentService implements OnDestroy {
   }
 
   addSlide(presentationId: string) {
-    const index = this.selectedSlide$.value;
+    const index = this.currentSlideIndex$.value;
     const action = {
       type: 'addSlide',
       payload: {

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.html

@@ -1,23 +1,19 @@
 <div class="slides-wrapper">
   <button (click)="addSlide()">Add</button>
 
-  <div cdkDropList (cdkDropListDropped)="reorder.emit($event)">
+  <div (cdkDropListDropped)="reorder.emit($event)" cdkDropList>
     <button
-      class="slide-wrapper"
-      *ngFor="let slide of slides; let i = index"
-      [class.selected]="i === selectedSlide"
-      inert="true"
+      inert
       (click)="this.navigationService.goToSlide(presentationId, i)"
+      *ngFor="let slide of slides; let i = index"
+      [class.selected]="i === currentSlideIndex"
+      class="slide-wrapper"
     >
-      <div
-        cdkDrag
-        class="slide"
-        style="pointer-events: none;text-decoration: none; color: inherit"
-      >
+      <div cdkDrag class="slide">
         <slides-slide-preview
-          mode="preview"
+          [class.selected]="i === currentSlideIndex"
           [slide]="slide"
-          [class.selected]="i === selectedSlide"
+          mode="preview"
         ></slides-slide-preview>
       </div>
     </button>

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.scss

@@ -8,24 +8,34 @@
   overflow: scroll;
   display: flex;
   flex-direction: column;
+  width: 114px;
   height: 100%;
+  padding: 0 4px;
   box-shadow: 1px 0 2px 0 #ddd;
-  width: 114px;
   background: #f8f8f8;
 }
 
 .slide-wrapper.selected {
   background: #dde;
 }
+
 .slide-wrapper {
   display: flex;
   justify-content: space-around;
+  width: 100%;
+  min-height: 40px;
   padding: 4px 20px;
   box-sizing: border-box;
-  border: 0 solid;
+  border: 1px solid #ddd;
+  border-radius: 4px;
   background: #f8f8f8;
   margin: 0;
 }
+
+.slide-wrapper + .slide-wrapper {
+  margin-top: 4px;
+}
+
 .slide {
   padding: 0;
   background: #fff;
@@ -35,6 +45,9 @@
   display: flex;
   margin: 0;
   text-align: left;
+  pointer-events: none;
+  text-decoration: none;
+  color: inherit;
 
   slides-slide-preview {
     zoom: 0.2;

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.ts

@@ -19,7 +19,7 @@ import { NavigationService } from '../services/navigation.service';
 export class SidePanelComponent {
   @Input() slides;
   @Output() reorder = new EventEmitter();
-  @Input() selectedSlide = 0;
+  @Input() currentSlideIndex = 0;
   @Input() presentationId!: string;
 
   constructor(