Add maximized mode to markdown-textarea + CSS improvements (#2660)

* Add arrows-angle-contract/expand bootstrap icons

* Add grey textarea-background-color

* Add maximized support to markdown-textarea + improve column display

* Refactor CSS + add ResizeObservable

* Replace bootstrap icons with softies

* Add ResizeObserver typing definition

* Add focus on textarea + Fix Observables

* Propage component changes on markdown plugins

* Ignore ResizeObserver not implemented in typescript yet

* Move observers from constructor to click event

* Add scss and css variables

* Replace textareaWidth with textareaMaxWidth to fix others textareas

* Clean unused css rules

* Fix ResizeObserver unknown by TypeScript compiler

* Set max-width: 100% for small and mobile views

* Fix textarea/preview height on maximized mode

* Add common padding textarea/preview side-by-side

* Hide scrollbar sub-menu on small-views

* Add maximized mode for mobile views

* Fix sass calculate syntax

* Revert custom CSS variable for inputBorderRadius and inputBorderColor

* Remove unsued methods

* Fix missing implement method

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

11 files changed, 283 insertions, 78 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index b925d3d02..5703d5a2e 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -37,7 +37,7 @@
               <div class="form-group">
                 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
                 <my-markdown-textarea
-                  name="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true"
+                  name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
                   [classes]="{ 'input-error': formErrors['instance.description'] }"
                 ></my-markdown-textarea>
                 <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
@@ -120,7 +120,7 @@
               <div class="form-group">
                 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
                 <my-markdown-textarea
-                  name="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
+                  name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
                   [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
                 ></my-markdown-textarea>
                 <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
@@ -129,7 +129,7 @@
               <div class="form-group">
                 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
                 <my-markdown-textarea
-                  name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true"
+                  name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
                   [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
                 ></my-markdown-textarea>
                 <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
@@ -140,7 +140,7 @@
                 <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
 
                 <my-markdown-textarea
-                  name="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true"
+                  name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
                   [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
                 ></my-markdown-textarea>
                 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
@@ -161,7 +161,7 @@
                 <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
 
                 <my-markdown-textarea
-                  name="instanceAdministrator" formControlName="administrator" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
+                  name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" textareaHeight="75px"
                   [classes]="{ 'input-error': formErrors['instance.administrator'] }"
                 ></my-markdown-textarea>
 
@@ -216,7 +216,7 @@
                 <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
 
                 <my-markdown-textarea
-                  name="instanceHardwareInformation" formControlName="hardwareInformation" textareaWidth="500px" textareaHeight="75px" [previewColumn]="true"
+                  name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px" textareaHeight="75px"
                   [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
                 ></my-markdown-textarea>
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index d8bc30d55..9ee960ad6 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -68,18 +68,6 @@ textarea {
   pointer-events: none;
 }
 
-my-markdown-textarea ::ng-deep {
-  .root {
-    @media screen and (max-width: 1400px) {
-      flex-direction: column !important;
-    }
-
-    textarea {
-      max-width: 100%;
-    }
-  }
-}
-
 .form-group-right {
   padding-top: 2px;
 }
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
index bf135ecbd..f3fc429ff 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@@ -19,13 +19,13 @@
 
       <my-markdown-textarea
         *ngIf="setting.type === 'markdown-text'"
-        markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" [previewColumn]="false"
+        markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
         [classes]="{ 'input-error': formErrors['settings.name'] }"
       ></my-markdown-textarea>
 
       <my-markdown-textarea
         *ngIf="setting.type === 'markdown-enhanced'"
-        markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" [previewColumn]="false"
+        markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
         [classes]="{ 'input-error': formErrors['settings.name'] }"
       ></my-markdown-textarea>
 
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index 59ac5097b..048d143cd 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -59,7 +59,7 @@
           {{ formErrors['display-name'] }}
         </div>
       </div>
-    
+
       <div class="form-group">
         <label i18n for="description">Description</label>
         <textarea
@@ -70,7 +70,7 @@
           {{ formErrors.description }}
         </div>
       </div>
-    
+
       <div class="form-group">
         <label for="support">Support</label>
         <my-help
@@ -78,14 +78,14 @@
     When you will upload a video in this channel, the video support field will be automatically filled by this text."
         ></my-help>
         <my-markdown-textarea
-            id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
+            id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
             [classes]="{ 'input-error': formErrors['support'] }"
         ></my-markdown-textarea>
         <div *ngIf="formErrors.support" class="form-error">
           {{ formErrors.support }}
         </div>
       </div>
-    
+
       <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
         <my-peertube-checkbox
           inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
index 43a49a01a..8f8af655c 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@@ -48,14 +48,6 @@ textarea {
   display: block;
 }
 
-my-markdown-textarea ::ng-deep {
-  .root {
-    @media screen and (max-width: 1400px) {
-      flex-direction: column !important;
-    }
-  }
-}
-
 .peertube-select-container {
   @include peertube-select-container(340px);
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index 3cadb3619..a519f3e0a 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -1,12 +1,12 @@
-<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
-  <textarea
+<div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }">
+  <textarea #textarea
     [(ngModel)]="content" (ngModelChange)="onModelChange()"
     class="form-control" [ngClass]="classes"
-    [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+    [ngStyle]="{ height: textareaHeight }"
     [id]="name" [name]="name">
   </textarea>
 
-  <div ngbNav #nav="ngbNav" class="nav-pills previews">
+  <div ngbNav #nav="ngbNav" class="nav-pills nav-preview">
     <ng-container ngbNavItem *ngIf="truncate !== undefined">
       <a ngbNavLink i18n>Truncated preview</a>
 
@@ -22,6 +22,14 @@
         <div [innerHTML]="previewHTML"></div>
       </ng-template>
     </ng-container>
+
+    <my-button
+      *ngIf="!isMaximized" icon="fullscreen" (click)="onMaximizeClick()"
+    ></my-button>
+
+    <my-button
+      *ngIf="isMaximized" icon="exit-fullscreen" (click)="onMaximizeClick()"
+    ></my-button>
   </div>
 
   <div [ngbNavOutlet]="nav"></div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index bd02343de..065cd2dec 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -1,36 +1,250 @@
 @import '_variables';
 @import '_mixins';
 
-.root {
-  display: flex;
+$nav-preview-tab-height: 30px;
+$base-padding: 15px;
+$input-border-color: #C6C6C6;
+$input-border-radius: 3px;
+
+@mixin in-small-view {
+  .root {
+    display: flex;
+    flex-direction: column;
+
+    textarea {
+      @include peertube-textarea(100%, 150px);
+
+      background-color: var(--textareaBackgroundColor);
+      font-family: courier, monospace;
+      font-size: 13px;
+      border-bottom: none;
+      border-bottom-left-radius: unset;
+      border-bottom-right-radius: unset;
+    }
 
-  textarea {
-    @include peertube-textarea(100%, 150px);
+    .nav-preview {
+      display: block;
+      text-align: right;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      border-top: 1px dashed $input-border-color;
+      border-left: 1px solid $input-border-color;
+      border-right: 1px solid $input-border-color;
+      border-bottom: 1px solid $input-border-color;
+      border-bottom-right-radius: $input-border-radius;
 
-    margin-bottom: 15px;
+      border-bottom-left-radius: $input-border-radius;
+      ::ng-deep {
+        .nav-link {
+          display: none !important;
+        }
+
+        .grey-button {
+          padding: 0 12px 0 12px;
+        }
+      }
+    }
+
+    ::ng-deep {
+      .tab-content {
+        display: none;
+      }
+    }
   }
+}
+
+@mixin nav-preview-medium {
+  display: flex;
+  flex-grow: 1;
+  border-bottom-left-radius: unset;
+  border-bottom-right-radius: unset;
+  border-bottom: 2px solid var(--mainColor);
 
-  .previews {
-    max-height: 150px;
-    overflow-y: auto;
-    flex-grow: 1;
+  :first-child {
+    margin-left: auto;
   }
 
   ::ng-deep {
     .nav-link {
       display: flex !important;
       align-items: center;
-      height: 30px !important;
+      height: $nav-preview-tab-height !important;
       padding: 0 15px !important;
       font-size: 85% !important;
       opacity: .7;
     }
 
-    .tab-content {
-      min-height: 75px;
-      padding: 15px;
-      font-size: 15px;
-      word-wrap: break-word;
+    .grey-button {
+      margin-left: 5px;
+    }
+  }
+}
+
+@mixin content-preview-base {
+  display: block;
+  min-height: 75px;
+  padding: $base-padding;
+  overflow-y: auto;
+  font-size: 15px;
+  word-wrap: break-word;
+}
+
+@mixin maximized-base {
+  flex-direction: row;
+  z-index: #{z(header) - 1};
+  position: fixed;
+  top: $header-height;
+  left: $menu-width;
+  max-height: none !important;
+  max-width: none !important;
+  width: calc(100% - #{$menu-width});
+  height: calc(100vh - #{$header-height}) !important;
+
+  $nav-preview-vertical-padding: 40px;
+
+  .nav-preview {
+    @include nav-preview-medium();
+    padding-top: #{$nav-preview-vertical-padding / 2};
+    padding-bottom: #{$nav-preview-vertical-padding / 2};
+    padding-left: 0px;
+    padding-right: 0px;
+    position: absolute;
+    background-color: var(--mainBackgroundColor);
+    width: 100% !important;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+
+    :last-child {
+      margin-right: $not-expanded-horizontal-margins;
+    }
+  }
+
+  ::ng-deep .tab-content {
+    @include content-preview-base();
+    background-color: var(--mainBackgroundColor);
+    scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
+  }
+
+  textarea,
+  ::ng-deep .tab-content {
+    max-height: none !important;
+    max-width: none !important;
+    margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
+    height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
+    width: 50% !important;
+    border: none !important;
+    border-radius: unset !important;
+  }
+
+  :host-context(.expanded) {
+    .root.maximized {
+      left: 0;
+      width: 100%;
+    }
+  }
+}
+
+@mixin maximized-in-small-view {
+  .root.maximized {
+    @include maximized-base();
+
+    textarea {
+      display: none;
     }
+
+    ::ng-deep .tab-content {
+      width: 100% !important;
+    }
+  }
+}
+
+@mixin maximized-tabs-in-mobile-view {
+  // Ellipsis on tabs for mobile view
+  .root.maximized {
+    .nav-preview {
+      ::ng-deep .nav-link {
+        @include ellipsis();
+
+        display: block !important;
+        max-width: 45% !important;
+        padding: 5px 0 !important;
+        margin-right: 10px !important;
+        text-align: center;
+
+        &:not(.active) {
+          max-width: 15% !important;
+        }
+
+        &.active {
+          padding: 5px 15px !important;
+        }
+      }
+    }
+  }
+}
+
+@mixin in-medium-view {
+  .root {
+    .nav-preview {
+      @include nav-preview-medium();
+    }
+
+    ::ng-deep .tab-content {
+      @include content-preview-base();
+      max-height: 210px;
+      border-bottom: 1px solid $input-border-color;
+      border-left: 1px solid $input-border-color;
+      border-right: 1px solid $input-border-color;
+      border-bottom-left-radius: $input-border-radius;
+      border-bottom-right-radius: $input-border-radius;
+    }
+  }
+}
+
+@mixin maximized-in-medium-view {
+  .root.maximized {
+    @include maximized-base();
+
+    textarea {
+      display: block;
+      padding: $base-padding;
+      border-right: 1px dashed $input-border-color !important;
+      resize: none;
+      scrollbar-color: var(--actionButtonColor) var(--textareaBackgroundColor);
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+@include in-small-view();
+@include maximized-in-small-view();
+
+@media only screen and (max-width: $mobile-view) {
+  @include maximized-tabs-in-mobile-view();
+}
+
+@media only screen and (max-width: #{$mobile-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include maximized-tabs-in-mobile-view();
+  }
+}
+
+@media only screen and (min-width: $small-view) {
+  :host-context(.expanded) {
+    @include in-medium-view();
+  }
+
+  @include maximized-in-medium-view();
+}
+
+@media only screen and (min-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include in-medium-view();
   }
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index cbcfdfe78..dde7b4d98 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -1,5 +1,5 @@
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
-import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import { Component, forwardRef, Input, OnInit, ViewChild, ElementRef } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Subject } from 'rxjs'
 import truncate from 'lodash-es/truncate'
@@ -22,18 +22,18 @@ import { MarkdownService } from '@app/shared/renderer'
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() content = ''
   @Input() classes: string[] | { [klass: string]: any[] | any } = []
-  @Input() textareaWidth = '100%'
+  @Input() textareaMaxWidth = '100%'
   @Input() textareaHeight = '150px'
-  @Input() previewColumn = false
   @Input() truncate: number
   @Input() markdownType: 'text' | 'enhanced' = 'text'
   @Input() markdownVideo = false
   @Input() name = 'description'
 
-  textareaMarginRight = '0'
-  flexDirection = 'column'
+  @ViewChild('textarea') textareaElement: ElementRef
+
   truncatedPreviewHTML = ''
   previewHTML = ''
+  isMaximized = false
 
   private contentChanged = new Subject<string>()
 
@@ -51,11 +51,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
         .subscribe(() => this.updatePreviews())
 
     this.contentChanged.next(this.content)
-
-    if (this.previewColumn) {
-      this.flexDirection = 'row'
-      this.textareaMarginRight = '15px'
-    }
   }
 
   propagateChange = (_: any) => { /* empty */ }
@@ -80,8 +75,26 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
     this.contentChanged.next(this.content)
   }
 
-  arePreviewsDisplayed () {
-    return this.screenService.isInSmallView() === false
+  onMaximizeClick () {
+    this.isMaximized = !this.isMaximized
+
+    // Make sure textarea have the focus
+    this.textareaElement.nativeElement.focus()
+
+    // Make sure the window has no scrollbars
+    if (!this.isMaximized) {
+      this.unlockBodyScroll()
+    } else {
+      this.lockBodyScroll()
+    }
+  }
+
+  private lockBodyScroll () {
+    document.getElementById('content').classList.add('lock-scroll')
+  }
+
+  private unlockBodyScroll () {
+    document.getElementById('content').classList.remove('lock-scroll')
   }
 
   private async updatePreviews () {
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index a8e5a7020..d2700f6c3 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -54,7 +54,9 @@ const icons = {
   'users': require('!!raw-loader?!../../../assets/images/global/users.svg').default,
   'search': require('!!raw-loader?!../../../assets/images/global/search.svg').default,
   'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg').default,
-  'npm': require('!!raw-loader?!../../../assets/images/global/npm.svg').default
+  'npm': require('!!raw-loader?!../../../assets/images/global/npm.svg').default,
+  'fullscreen': require('!!raw-loader?!../../../assets/images/global/fullscreen.svg').default,
+  'exit-fullscreen': require('!!raw-loader?!../../../assets/images/global/exit-fullscreen.svg').default
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index d59394538..9a0e4f848 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -232,7 +232,7 @@
               <label i18n for="support">Support</label>
               <my-help helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support you (membership platform...)."></my-help>
               <my-markdown-textarea
-                id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
+                id="support" formControlName="support" markdownType="enhanced"
                 [classes]="{ 'input-error': formErrors['support'] }"
               ></my-markdown-textarea>
               <div *ngIf="formErrors.support" class="form-error">
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index de800b03f..2f9067132 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -161,18 +161,6 @@ p-calendar {
   }
 }
 
-::ng-deep my-markdown-textarea {
-  .root {
-    @include media-breakpoint-down(xl) {
-      flex-direction: column !important;
-    }
-
-    textarea {
-      max-width: 100%;
-    }
-  }
-}
-
 @include ng2-tags;
 
 // columns for the video
@@ -200,7 +188,7 @@ p-calendar {
   .col-video-edit {
     @include media-breakpoint-up(md) {
       @include make-col(8);
-  
+
       & + .col-video-edit {
         @include make-col(4);
       }