Reorganizing Colors and Fixing New Slide Modal

README.md

@@ -35,6 +35,7 @@ This project was designed to provide a means of doing a presentation with code e
 - [x] Edit Slide (Specific to Type).
 - [x] Edit Slide (Code Editor).
 - [ ] Edit Slide (Code Editor): Optional fields for Triggers.
+- [ ] Edit Slide (Code Editor): Simplify Save.
 - [x] Code-Editor (add and remove) triggers.
 - [ ] Add new Slide (before and after Slide).
 - [ ] Reorder Slides (up and down).

server/server.js

@@ -6,7 +6,7 @@ const PORT = process.env.PORT || 3000;
 // Define your application's routes
 const routes = [
   '/',
-  '/talk/a-look-inside-observables/cover-slide-01',
+  '/talk/a-look-inside-observables/cover-01',
   '/talk/a-look-inside-observables/what-is-rxjs--slide',
   '/talk/a-look-inside-observables/history--slide',
   '/talk/a-look-inside-observables/essential-concepts--slide',
@@ -20,7 +20,7 @@ const routes = [
   '/talk/a-look-inside-observables/void-subject--code',
   '/talk/a-look-inside-observables/time-for-questions',
 
-  '/talk/active-career-management/cover-slide-01',
+  '/talk/active-career-management/cover-01',
   '/talk/active-career-management/history--slide',
   '/talk/active-career-management/career-levels--early-career',
   '/talk/active-career-management/career-levels--mid-career',
@@ -40,7 +40,7 @@ const routes = [
   '/talk/active-career-management/quickly-getting-job--slide',
   '/talk/active-career-management/time-for-questions',
 
-  '/talk/asynchronous-javacript-living-on-a-prayer/cover-slide-01',
+  '/talk/asynchronous-javacript-living-on-a-prayer/cover-01',
   '/talk/asynchronous-javacript-living-on-a-prayer/spoiler--slide',
   '/talk/asynchronous-javacript-living-on-a-prayer/definitions--slide',
   '/talk/asynchronous-javacript-living-on-a-prayer/javascript-engine-details--slide',
@@ -60,7 +60,7 @@ const routes = [
   '/talk/asynchronous-javacript-living-on-a-prayer/async-await--slide',
   '/talk/asynchronous-javacript-living-on-a-prayer/time-for-questions',
 
-  '/talk/asynchronous-javascript-we-are-half-way-there/cover-slide-01',
+  '/talk/asynchronous-javascript-we-are-half-way-there/cover-01',
   '/talk/asynchronous-javascript-we-are-half-way-there/asynchronous-patterns--slide',
   '/talk/asynchronous-javascript-we-are-half-way-there/callbacks--slide',
   '/talk/asynchronous-javascript-we-are-half-way-there/callbacks--code',
@@ -71,7 +71,7 @@ const routes = [
   '/talk/asynchronous-javascript-we-are-half-way-there/observable--slide',
   '/talk/asynchronous-javascript-we-are-half-way-there/observable--code',
 
-  '/talk/developer-tools-for-non-developers/cover-slide-01',
+  '/talk/developer-tools-for-non-developers/cover-01',
   '/talk/developer-tools-for-non-developers/docking--slide',
   '/talk/developer-tools-for-non-developers/reading-error-messages--slide',
   '/talk/developer-tools-for-non-developers/xhr-versus-preflight--slide',
@@ -86,7 +86,7 @@ const routes = [
   '/talk/developer-tools-for-non-developers/overrides--slide',
   '/talk/developer-tools-for-non-developers/time-for-questions',
 
-  '/talk/what-to-avoid-when-writing-unit-tests--code/cover-slide-01',
+  '/talk/what-to-avoid-when-writing-unit-tests--code/cover-01',
   '/talk/what-to-avoid-when-writing-unit-tests--code/engineers-in-a-bar',
   '/talk/what-to-avoid-when-writing-unit-tests--code/what-are-unit-tests',
   '/talk/what-to-avoid-when-writing-unit-tests--code/talk-details',
@@ -111,7 +111,7 @@ const routes = [
   '/talk/what-to-avoid-when-writing-unit-tests--code/unit-test-recommendations',
   '/talk/what-to-avoid-when-writing-unit-tests--code/time-for-questions',
 
-  '/talk/writing-testable-code/cover-slide-01',
+  '/talk/writing-testable-code/cover-01',
   '/talk/writing-testable-code/context-slide',
   '/talk/writing-testable-code/constructor-does-real-work--warning-signs',
   '/talk/writing-testable-code/constructor-does-real-work--code-examples-001',

src/app/core/constants/slide-type-icons.json

@@ -3,7 +3,7 @@
     "type": "icon",
     "icon": "code"
   },
-  "cover-slide-01": {
+  "cover-01": {
     "type": "icon",
     "icon": "blinds"
   },
@@ -20,7 +20,7 @@
     "type": "svg",
     "icon": "triple"
   },
-  "text-image": {
+  "image-text": {
     "type": "icon",
     "icon": "compare"
   }

src/app/core/interfaces/slide-types.ts

@@ -1,3 +1,5 @@
+import { Trigger } from "./triggers";
+
 export interface SlideType {
   title: string;
   key: string;
@@ -8,17 +10,31 @@ export interface SlideItemDetail {
   type: string;
 }
 
-export interface SlideStructure {
-  EMPTY: {
-    title: string;
-    type: string;
-    notes: string;
+export interface SlideEmpty {
+  title: string;
+  type: string;
+  notes: string;
 
-    author?: string;
+  author?: string;
+  bio1?: string;
+  bio2?: string;
+  files?: Array<string>;
+  folder?: string;
+  fontsize?: string | undefined;
+  image?: string;
+  imageClass?: string;
+  keys?: Array<string>;
+  orientation?: string;
+  panel?: string | undefined;
+  path?: string;
+  text1?: string;
+  text2?: string;
+  text3?: string;
+  triggers?: Array<Trigger>;
+}
 
-    bio1?: string;
-    bio2?: string;
-  },
+export interface SlideStructure {
+  EMPTY: SlideEmpty,
   ORDER: Array<string>,
 
   title: SlideItemDetail,
@@ -27,4 +43,17 @@ export interface SlideStructure {
   author?: SlideItemDetail,
   bio1?: SlideItemDetail,
   bio2?: SlideItemDetail,
+  files?: SlideItemDetail;
+  folder?: SlideItemDetail;
+  fontsize?: SlideItemDetail;
+  image?: SlideItemDetail;
+  imageClass?: SlideItemDetail;
+  keys?: SlideItemDetail;
+  orientation?: SlideItemDetail;
+  panel?: SlideItemDetail;
+  path?: SlideItemDetail;
+  text1?: SlideItemDetail;
+  text2?: SlideItemDetail;
+  text3?: SlideItemDetail;
+  triggers?: SlideItemDetail;
 }

src/app/core/services/slide-information.service.ts

@@ -22,15 +22,68 @@ export class SlideInformationService {
   };
 
   blankPatterns: { [key: string]: SlideStructure } = {
-    'cover-01': {
+    'code-editor': {
+      EMPTY: { title: '', type: 'code-editor', notes: '' },
+      ORDER: ['title', 'path', 'folder', 'files', 'triggers', 'keys', 'panel', 'notes'],
+      title: { ...this.commonPatterns['title'] },
+      path: { title: 'Path', type: 'input' },
+      folder: { title: 'Folder', type: 'input' },
+      files: { title: 'Files', type: 'files' },
+      triggers: { title: 'Triggers', type: 'triggers' },
+      keys: { title: 'Keys', type: 'keys' },
+      panel: { title: 'Panel', type: 'input' },
+      notes: { ...this.commonPatterns['notes'] },
+    },
+    'cove-slide-01': {
       EMPTY: { title: '', type: 'cover-01', author: '', bio1: '', bio2: '', notes: '' },
       ORDER: ['title', 'author', 'bio1', 'bio2', 'notes'],
       title: { ...this.commonPatterns['title'] },
       author: { title: 'Author', type: 'input' },
-      bio1: { title: 'Biography 1', type: 'input' },
-      bio2: { title: 'Biography 2', type: 'input' },
+      bio1: { title: 'Biography 1', type: 'textarea' },
+      bio2: { title: 'Biography 2', type: 'textarea' },
+      notes: { ...this.commonPatterns['notes'] },
+    },
+    'image-only': {
+      EMPTY: { title: '', type: 'image-only', image: '', imageClass: '', notes: '' },
+      ORDER: ['title', 'image', 'imageClass', 'notes'],
+      title: { ...this.commonPatterns['title'] },
+      image: { title: 'Image', type: 'input' },
+      imageClass: { title: 'Image Class', type: 'input' },
+      notes: { ...this.commonPatterns['notes'] },
+    },
+    'image-text': {
+      EMPTY: { title: '', type: 'image-text', orientation: 'left', text1: '', image: '', notes: '' },
+      ORDER: ['title', 'orientation', 'text1', 'image', 'notes'],
+      title: { ...this.commonPatterns['title'] },
+      orientation: { title: 'Orientation', type: 'input' },
+      text1: { title: 'Text', type: 'textarea' },
+      image: { title: 'Image', type: 'input' },
+      notes: { ...this.commonPatterns['notes'] },
+    },
+    'panel-double': {
+      EMPTY: { title: '', type: 'panel-double', text1: '', text2: '', notes: '' },
+      ORDER: ['title', 'text1', 'text2', 'notes'],
+      title: { ...this.commonPatterns['title'] },
+      text1: { title: 'Text 1', type: 'textarea' },
+      text2: { title: 'Text 2', type: 'textarea' },
+      notes: { ...this.commonPatterns['notes'] },
+    },
+    'panel-single': {
+      EMPTY: { title: '', type: 'panel-single', text1: '', notes: '' },
+      ORDER: ['title', 'text1', 'notes'],
+      title: { ...this.commonPatterns['title'] },
+      text1: { title: 'Text', type: 'textarea' },
+      notes: { ...this.commonPatterns['notes'] },
+    },
+    'panel-triple': {
+      EMPTY: { title: '', type: 'panel-triple', text1: '', text2: '', text3: '', notes: '' },
+      ORDER: ['title', 'text1', 'text2', 'text3', 'notes'],
+      title: { ...this.commonPatterns['title'] },
+      text1: { title: 'Text 1', type: 'textarea' },
+      text2: { title: 'Text 2', type: 'textarea' },
+      text3: { title: 'Text 3', type: 'textarea' },
       notes: { ...this.commonPatterns['notes'] },
-    }
+    },
   };
 
   constructor() { }

src/app/pages/edit/edit.component.html

@@ -94,7 +94,7 @@
 } @else {
   <div class="outer-wrapper">
     <ng-container [ngSwitch]="type">
-      <div class="slide-wrapper" *ngSwitchCase="'cover-slide-01'">
+      <div class="slide-wrapper" *ngSwitchCase="'cover-01'">
         <cover-01
           [title]="page.title"
           [author]="page.author!"
@@ -105,9 +105,6 @@
           [editing]="editing"
           (save)="handleDataSave($event)"></cover-01>
       </div>
-      <div class="slide-wrapper" *ngSwitchCase="'cover-slide-02'">
-        <cover-02 [title]="page.title" [author]="page.author!" [html]="page.html || ''"></cover-02>
-      </div>
 
       <div class="slide-wrapper" *ngSwitchCase="'image-only'">
         <image-only
@@ -119,7 +116,7 @@
           (save)="handleDataSave($event)">
         </image-only>
       </div>
-      <div class="slide-wrapper" *ngSwitchCase="'text-image'">
+      <div class="slide-wrapper" *ngSwitchCase="'image-text'">
         <image-text
           [title]="page.title"
           [orientation]="page.orientation!"

src/app/pages/edit/edit.component.scss

@@ -100,15 +100,22 @@
       margin-right: 0.25em;
     }
 
-    .cover-slide-01,
+    .image-only,
+    .image-text {
+      background-color: rgb(66, 66, 66);
+    }
+
+    .cover-01,
     .cover-slide-02 {
       background-color: rgb(66, 66, 88);
     }
-    .image-only,
+
     .panel-single,
-    .panel-double {
+    .panel-double,
+    .panel-triple {
       background-color: rgb(88, 66, 66);
     }
+
     .code-editor {
       background-color: rgb(66, 88, 66);
     }

src/app/pages/edit/edit.component.ts

@@ -24,7 +24,6 @@ import { PanelDoubleComponent } from '../../slides/panel-double/panel-double.com
 import { PanelSingleComponent } from '../../slides/panel-single/panel-single.component';
 import { ImageOnlyComponent } from '../../slides/image-only/image-only.component';
 import { ImageTextComponent } from '../../slides/image-text/image-text.component';
-import { Cover02Component } from '../../slides/cover-02/cover.component';
 import { Cover01Component } from '../../slides/cover-01/cover.component';
 import { EditService } from './edit.service';
 
@@ -47,7 +46,6 @@ import { saveAs } from 'file-saver';
       AddSlideComponent,
 
       Cover01Component,
-      Cover02Component,
       ImageOnlyComponent,
       ImageTextComponent,
       PanelSingleComponent,

src/app/pages/talk/talk.component.html

@@ -1,16 +1,13 @@
 <div class="outer-wrapper">
   <ng-container [ngSwitch]="type">
-    <div class="slide-wrapper" *ngSwitchCase="'cover-slide-01'">
+    <div class="slide-wrapper" *ngSwitchCase="'cover-01'">
       <cover-01 [title]="page.title" [author]="page.author!" [html]="page.html || ''" [bio1]="page.bio1 || undefined" [bio2]="page.bio2 || undefined"></cover-01>
     </div>
-    <div class="slide-wrapper" *ngSwitchCase="'cover-slide-02'">
-      <cover-02 [title]="page.title" [author]="page.author!" [html]="page.html || ''"></cover-02>
-    </div>
 
     <div class="slide-wrapper" *ngSwitchCase="'image-only'">
       <image-only [title]="page.title" [image]="page.image!" [imageClass]="page.imageClass || ''"></image-only>
     </div>
-    <div class="slide-wrapper" *ngSwitchCase="'text-image'">
+    <div class="slide-wrapper" *ngSwitchCase="'image-text'">
       <image-text [title]="page.title" [orientation]="page.orientation!" [text1]="page.text1!" [fontsize]="fontsizeSelected" [image]="page.image!"></image-text>
     </div>
 

src/app/pages/talk/talk.component.ts

@@ -19,7 +19,6 @@ import { PanelDoubleComponent } from '../../slides/panel-double/panel-double.com
 import { PanelSingleComponent } from '../../slides/panel-single/panel-single.component';
 import { ImageOnlyComponent } from '../../slides/image-only/image-only.component';
 import { ImageTextComponent } from '../../slides/image-text/image-text.component';
-import { Cover02Component } from '../../slides/cover-02/cover.component';
 import { Cover01Component } from '../../slides/cover-01/cover.component';
 import { FontsizeService } from 'src/app/core/services/fontsize.service';
 
@@ -35,7 +34,6 @@ import { FontsizeService } from 'src/app/core/services/fontsize.service';
         RouterLink,
 
         Cover01Component,
-        Cover02Component,
         ImageOnlyComponent,
         ImageTextComponent,
         PanelSingleComponent,

src/app/shared/add-slide-modal/add-slide-modal.component.html

@@ -6,11 +6,34 @@ <h2 mat-dialog-title>New Slide</h2>
       <div>Slide Type</div>
       <mat-list>
         @for (slideType of slideTypes; track slideType.key;) {
-          <button mat-list-item color="accent" (click)="selectSlide(slideType)">{{ slideType.title }}</button>
+          <button [class]="slideType.key" mat-list-item color="accent" (click)="selectSlide(slideType)">{{ slideType.title }}</button>
         }
       </mat-list>  
     } @else {
       <div>{{ selectedType.title }}</div>
+      @if (selectedStructure !== null) {
+        <mat-list>
+          @for (key of selectedStructure.ORDER; track key;) {
+            <mat-form-field mat-list-item class="full-width">
+              <mat-label>{{ getStructureTitle(key) }}</mat-label>
+              @switch (getStructureType(key)) {
+                @case ('input') {
+                  <input matInput [(ngModel)]="data[key]" />
+                }
+                @case ('textarea') {
+                  <textarea
+                    matInput
+                    cdkTextareaAutosize
+                    #autosize="cdkTextareaAutosize"
+                    cdkAutosizeMinRows="3"
+                    cdkAutosizeMaxRows="5"
+                    [(ngModel)]="data[key]"></textarea>
+                }
+              }
+            </mat-form-field>
+          }
+        </mat-list>  
+      }
     }
   </div>
 </mat-dialog-content>