feat(snippet) - add toggle fullscreen on snippets

Author: adirochs

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

@@ -1,18 +1,3 @@
-.header-wrapper {
-  display: flex;
-  justify-content: space-between;
-
-  .clock-wrapper {
-    font-size: 1.4rem;
-    margin-left: 1rem;
-    cursor: pointer;
-  }
-
-  .pinned {
-    color: red;
-  }
-}
-
 .share-action {
   cursor: pointer;
   margin-top: 0.3rem;

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

@@ -1,6 +1,6 @@
 <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="header-wrapper">
       <div class="title-and-subtitle">
         <h5 class="card-title">
           <i class="fa fa-sticky-note fa-xs mr-2 anthracite-gray"></i>
@@ -34,7 +34,7 @@ <h6 class="card-subtitle mb-2 text-muted url-under-title">
       </span>
         </h6>
       </div>
-      <div>
+      <div class="cursor-pointer">
         <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>

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

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

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

@@ -1,5 +1,5 @@
 <div #snippetCardBody>
-  <div *ngIf="inList && viewHeight > 180; else wholeText">
+  <div *ngIf="inList && viewHeight > 180 && !isFullScreen; else wholeText">
     <div [ngClass]="{ more_text: showMoreText, less_text_snippet: !showMoreText }">
       <div *ngFor="let codeSnippet of snippet.codeSnippets; let isLast = last">
         <p
@@ -14,7 +14,7 @@
           <button
             class="btn btn-sm btn-light float-right mr-1"
             (click)="toggleFullScreen(codePart)"
-            placeholder="Click to copy code snippet"
+            placeholder="Toggle fullscreen"
           >
             Fullscreen <i class="fas fa-expand"></i>
           </button>
@@ -52,7 +52,7 @@
         <app-button-copy-snippet
           [codeSnippet]="codeSnippet.code"
         ></app-button-copy-snippet>
-        <button
+        <button *ngIf="!isFullScreen"
           class="btn btn-sm btn-light float-right mr-1"
           (click)="toggleFullScreen(codePart)"
           placeholder="Click to copy code snippet"

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

@@ -26,6 +26,9 @@ export class SnippetCardBodyComponent
   @Input()
   inList = false;
 
+  @Input()
+  isFullScreen = true;
+
   show = false; // add one more property
   public showMoreText = false;
 

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

@@ -1,4 +1,4 @@
-<div *ngIf="snippet" class="card">
+<div *ngIf="snippet" class="card" #snippetEntry>
   <div class="card-body show-hide">
     <div class="header-wrapper">
       <div class="titles">
@@ -78,15 +78,24 @@ <h6 class="card-subtitle mb-2 text-muted url-under-title">
           </span>
         </h6>
       </div>
+      <div class="cursor-pointer">
+        <span title="Toggle Fullscreen" (click)="toggleFullScreen(snippetEntry)">
+             <i *ngIf="!isFullScreen" class="fas fa-expand fa-lg" title="Toggle fullscreen"></i>
+             <i *ngIf="isFullScreen" class="fas fa-compress fa-lg" title="Toggle fullscreen"></i>
+        </span>
+      </div>
     </div>
 
     <hr class="title-content-separator"/>
 
-    <app-snippet-card-body
-      [snippet]="snippet"
-      [queryText]="queryText"
-      [inList]="inlist"
-    ></app-snippet-card-body>
+    <div [ngClass]="{'scrollable-div-fullscreen': isFullScreen}">
+      <app-snippet-card-body
+        [snippet]="snippet"
+        [queryText]="queryText"
+        [inList]="inlist"
+        [isFullScreen]="isFullScreen"
+      ></app-snippet-card-body>
+    </div>
   </div>
 
   <ng-container

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

@@ -1,5 +1,6 @@
 import {
   Component,
+  HostListener,
   Input,
   OnChanges,
   OnInit,
@@ -18,6 +19,7 @@ import { environment } from '../../../environments/environment';
 import { Observable } from 'rxjs';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { SnippetSocialShareDialogComponent } from '../dialog/snippet-social-share-dialog/snippet-social-share-dialog.component';
+import * as screenfull from 'screenfull';
 
 @Component({
   selector: 'app-snippet-details',
@@ -41,6 +43,8 @@ export class SnippetDetailsComponent implements OnInit, OnChanges {
 
   scrollStrategy: ScrollStrategy;
 
+  isFullScreen = false;
+
   constructor(
     public loginDialog: MatDialog,
     private snippetShareDialog: MatDialog,
@@ -148,4 +152,16 @@ export class SnippetDetailsComponent implements OnInit, OnChanges {
       dialogConfig
     );
   }
+
+  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/styles.scss

@@ -291,3 +291,23 @@ label {
   overflow-y: auto;
   max-height: calc(100vh - 150px);
 }
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+//used to wrap titles and buttons in bookmarks, snippets and notes
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+
+  .clock-wrapper {
+    font-size: 1.4rem;
+    margin-left: 1rem;
+    cursor: pointer;
+  }
+
+  .pinned {
+    color: red;
+  }
+}

package.json

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