feat(note) - add toggle fullscreen on notes

Author: adirochs

apps/codever-ui/src/app/shared/bookmark-list-element/bookmark-list-element.component.scss

@@ -1,7 +1,3 @@
-.title-content-separator {
-  margin: 0 0 0.5rem 0;
-}
-
 .header-wrapper {
   display: flex;
   justify-content: space-between;

apps/codever-ui/src/app/shared/note-details/note-card-body/note-content.component.html

@@ -1,5 +1,7 @@
+
+
 <div #noteContentDiv appMarkedImageWidth>
-  <div *ngIf="partOfList && viewHeight > maxNoteHeightInList; else wholeText">
+  <div *ngIf="partOfList && viewHeight > maxNoteHeightInList && !isFullScreen; else wholeText">
     <div [ngClass]="{ more_text: showMoreText, less_text_note: !showMoreText }">
       <p [innerHtml]="note.content | md2html"></p>
     </div>

apps/codever-ui/src/app/shared/note-details/note-card-body/note-content.component.scss

@@ -24,6 +24,9 @@ export class NoteContentComponent implements AfterViewInit, AfterViewChecked {
   @Input()
   partOfList = false;
 
+  @Input()
+  isFullScreen = false;
+
   show = false; // add one more property
   public showMoreText = false;
 
@@ -47,10 +50,4 @@ export class NoteContentComponent implements AfterViewInit, AfterViewChecked {
       this.changeDetectorRef.detectChanges();
     }
   }
-
-  toggleFullScreen(codePart: HTMLElement) {
-    if (screenfull.isEnabled) {
-      screenfull.toggle(codePart);
-    }
-  }
 }

apps/codever-ui/src/app/shared/note-details/note-card-body/note-content.component.ts

@@ -1,15 +1,17 @@
-<div *ngIf="note$ | async as note" class="card">
-  <div class="card-body show-hide note-bg">
-    <h5 class="card-title">
-      <i class="fa fa-sticky-note fa-xs mr-2 anthracite-gray"></i>
-      {{ note.title }}
-    </h5>
-    <h6 class="card-subtitle mb-2 text-muted url-under-title">
+<div *ngIf="note$ | async as note" class="card" #noteEntry >
+  <div class="card-body show-hide note-bg note-container">
+    <div class="note-header">
+      <div class="title-and-subtitle">
+        <h5 class="card-title">
+          <i class="fa fa-sticky-note fa-xs mr-2 anthracite-gray"></i>
+          {{ note.title }}
+        </h5>
+        <h6 class="card-subtitle mb-2 text-muted url-under-title">
       <span title="last updated">
         <i class="far fa-calendar-alt"></i>  {{ note.updatedAt | date : 'yyyy-MM-dd' }}
       </span>
-      <span *ngIf="note.reference"
-      ><strong> - ref</strong>:
+          <span *ngIf="note.reference"
+          ><strong> - ref</strong>:
         <span
           *ngIf="
             note.reference.startsWith('http:') ||
@@ -30,9 +32,20 @@ <h6 class="card-subtitle mb-2 text-muted url-under-title">
           <span>{{ note.reference }}</span>
         </ng-template>
       </span>
-    </h6>
+        </h6>
+      </div>
+      <div>
+        <span title="Toggle Fullscreen" (click)="toggleFullScreen(noteEntry)">
+             <i *ngIf="!isFullScreen" class="fas fa-expand fa-lg"></i>
+             <i *ngIf="isFullScreen" class="fas fa-compress fa-lg"></i>
+        </span>
+      </div>
+    </div>
 
-    <app-note-content [note]="note" [queryText]="queryText" [partOfList]="partOfList"></app-note-content>
+    <hr class="title-content-separator"/>
+    <div [ngClass]="{'scrollable-div-fullscreen': isFullScreen}">
+      <app-note-content [note]="note" [queryText]="queryText" [partOfList]="partOfList" [isFullScreen]="isFullScreen"></app-note-content>
+    </div>
   </div>
 
   <div class="card-footer" style="padding-right: 0.3rem">

apps/codever-ui/src/app/shared/note-details/note-details.component.html

@@ -0,0 +1,7 @@
+.note-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+
+

apps/codever-ui/src/app/shared/note-details/note-details.component.scss

@@ -1,14 +1,16 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, HostListener, Input, OnInit } from '@angular/core';
 import { Note } from '../../core/model/note';
 import { Observable, of } from 'rxjs';
 import { UserInfoStore } from '../../core/user/user-info.store';
 import { ActivatedRoute, Router } from '@angular/router';
 import { switchMap } from 'rxjs/operators';
 import { PersonalNotesService } from '../../core/personal-notes.service';
+import * as screenfull from 'screenfull';
 
 @Component({
   selector: 'app-note-details',
   templateUrl: './note-details.component.html',
+  styleUrls: ['./note-details.component.scss'],
 })
 export class NoteDetailsComponent implements OnInit {
   @Input()
@@ -26,6 +28,8 @@ export class NoteDetailsComponent implements OnInit {
   userId$: Observable<string>;
   noteId: string;
 
+  isFullScreen = false;
+
   constructor(
     private personalNotesService: PersonalNotesService,
     private userInfoStore: UserInfoStore,
@@ -61,4 +65,16 @@ export class NoteDetailsComponent implements OnInit {
     const link = [`/my-notes/${note._id}/clone`];
     this.router.navigate(link, { state: { note: note } });
   }
+
+  toggleFullScreen(part: HTMLElement) {
+    if (screenfull.isEnabled) {
+      this.isFullScreen = !this.isFullScreen;
+      screenfull.toggle(part);
+    }
+  }
+
+  @HostListener('document:fullscreenchange', ['$event'])
+  fullscreenChangeHandler(event: Event) {
+    this.isFullScreen = !!document.fullscreenElement;
+  }
 }

apps/codever-ui/src/app/shared/note-details/note-details.component.ts

@@ -282,3 +282,12 @@ label {
 #sidebar-wrapper .list-group {
   width: 18rem;
 }
+
+.title-content-separator {
+  margin: 0 0 0.5rem 0;
+}
+
+.scrollable-div-fullscreen {
+  overflow-y: auto;
+  max-height: calc(100vh - 150px);
+}

apps/codever-ui/src/styles.scss

@@ -1,6 +1,6 @@
 {
   "name": "Codever",
-  "version": "8.10.2",
+  "version": "8.11.0",
   "description": "Codever - bookmarks, snippets and notes manager for developers & co",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",