Work on stage and chord views

angular.json

@@ -27,7 +27,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },

src/app/components/chord-view/chord-view.component.html

@@ -1,16 +1,28 @@
 <div class="overlay">
-  <button mat-raised-button class="closeButton" routerLink="/">Close</button>
-  <div class="tags">
-    <span class="mat-display-3" *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
-  </div>
-  <div class="container">
-    <div class="slide currentSlide mat-display-3">
-      {{ currentSlides[activeSlide]?.text }}
+  <div>
+    <div class="tags">
+      <span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
     </div>
-    <div class="nextSlides">
-      <div class="slide mat-display-1" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides">
-        {{ slide.text }}
+    <div class="container">
+      <div class="slide currentSlide" [innerHTML]="currentSlides[activeSlide]?.chords_text">
+      </div>
+      <div class="nextSlides">
+        <div class="slide" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides" [innerHTML]="slide.chords_text">
+        </div>
       </div>
     </div>
   </div>
+  <div class="sidebar">
+    <div class="time">{{ time|date:'HH:mm' }}</div>
+    <div class="transpose">
+      <button mat-icon-button (click)="transposeUp()">
+        <mat-icon>keyboard_arrow_up</mat-icon>
+      </button>
+      <span>{{ transpose }}</span>
+      <button mat-icon-button (click)="transposeDown()">
+        <mat-icon>keyboard_arrow_down</mat-icon>
+      </button>
+    </div>
+    <button mat-raised-button routerLink="/">Close</button>
+  </div>
 </div>

src/app/components/chord-view/chord-view.component.scss

@@ -1,17 +1,12 @@
-.tags {
-    margin-top: 1rem;
+.transpose {
+    margin-left: 25px;
     display: flex;
-    flex-direction: row;
-    justify-content: start;
+    flex-direction: column;
+    font-size: 3rem;
+    mat-icon {
+        font-size: 3rem;
+    }
     span {
-        margin-left: 1rem;
+        margin-left: 17px;
     }
 }
-
-.container {
-    margin-left: 1rem;
-}
-
-.nextSlide {
-    color: gray;
-}

src/app/components/chord-view/chord-view.component.ts

@@ -10,5 +10,13 @@ import { StageViewComponent } from '../stage-view/stage-view.component';
   styleUrls: ['./chord-view.component.scss', '../overlay.scss']
 })
 export class ChordViewComponent extends StageViewComponent {
+  transpose: number = 0;
 
+  transposeUp(): void {
+    this.transpose++;
+  }
+
+  transposeDown(): void {
+    this.transpose--;
+  }
 }

src/app/components/overlay.scss

@@ -8,21 +8,31 @@
     z-index: 1;
     overflow: hidden;
     color: white;
-    
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
-.closeButton {
-    position: fixed;
-    top: 20px;
-    right: 20px;
+.sidebar {
+    margin: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.time {
+    font-size: 2rem;
+    color: gray;
 }
 
 .tags {
     margin-top: 1rem;
+    margin-bottom: 1rem;
     display: flex;
     flex-direction: row;
     justify-content: start;
     color: gray;
+    font-size: 4rem;
     span {
         margin-left: 1rem;
         &.active {
@@ -32,6 +42,7 @@
 }
 
 .slide {
+    font-size: 3rem;
     white-space: pre-line;
     margin: 0;
     &.first {
@@ -44,6 +55,10 @@
 }
 
 .nextSlides {
+    font-size: 2rem;
     margin-top: 1rem;
     color: gray;
+    .slide {
+        font-size: 2rem;
+    }
 }

src/app/components/stage-view/stage-view.component.html

@@ -1,7 +1,7 @@
 <div class="overlay">
-    <button mat-raised-button class="closeButton" routerLink="/">Close</button>
+  <div>
     <div class="tags">
-      <span class="mat-display-3" *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
+      <span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
     </div>
     <div class="container">
       <div class="slide currentSlide mat-display-3">
@@ -13,4 +13,12 @@
         </div>
       </div>
     </div>
-  </div>
+  </div>
+  <div class="sidebar">
+    <div class="time">{{ time|date:'HH:mm' }}</div>
+    <button mat-icon-button class="iconButton" style="position: absolute;bottom: 80px; right:20px;">
+      <mat-icon>close</mat-icon>
+    </button>
+    <button mat-raised-button class="closeButton" routerLink="/">Close</button>
+  </div>
+</div>

src/app/components/stage-view/stage-view.component.ts

@@ -16,7 +16,10 @@ export class StageViewComponent implements OnInit {
   currentSlides: Slide[] = [];
   activeSlide: number = 0;
   tags: Tag[] = [];
-  constructor(private openlpService: OpenLPService) { }
+  time: Date = new Date();
+  constructor(private openlpService: OpenLPService) {
+    setInterval(() => this.time = new Date(), 1000);
+  }
 
   ngOnInit() {
     this.updateCurrentSlides();

src/app/responses.ts

@@ -21,6 +21,7 @@ export interface Slide {
 	html: string;
 	tag: string;
 	text: string;
+	chords_text: string;
 	lines: string[];
 	first_slide_of_tag: boolean;
 }

src/styles.css

@@ -1,24 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
-
-
-* {
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-mat-sidenav-layout {
-	background: rgba(0,0,0,0.03);
-}
-mat-sidenav {
-	width: 200px;
-}
-
-.displayButton .active {
-	background: 'teal';
-}
-
-.content {
-	margin: 20px;
-}
-

src/styles.scss

@@ -0,0 +1,45 @@
+/* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+
+* {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+mat-sidenav-layout {
+	background: rgba(0,0,0,0.03);
+}
+mat-sidenav {
+	width: 200px;
+}
+
+.displayButton .active {
+	background: 'teal';
+}
+
+.content {
+	margin: 20px;
+}
+
+.chordline {                                                                                                 
+    line-height: 1.8;
+  }
+  
+  .chordline1 {
+    line-height: 1.0 
+  }
+  
+  .chordline span.chord span {
+    position: relative;
+  }
+  
+  .chordline span.chord span strong {
+    position: absolute;
+    top: -2.1rem;
+    left: 0;
+    font-size: 30pt;
+    font-weight: normal;
+    line-height: normal;
+    color: yellow;
+  }