From b15fe00f7409b27573e162192530bc73e3f918b1 Mon Sep 17 00:00:00 2001
From: Kim <1877318+kimsible@users.noreply.github.com>
Date: Tue, 28 Apr 2020 14:53:43 +0200
Subject: 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>
---
 .../shared/forms/markdown-textarea.component.ts    | 37 +++++++++++++++-------
 1 file changed, 25 insertions(+), 12 deletions(-)

(limited to 'client/src/app/shared/forms/markdown-textarea.component.ts')

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 () {
-- 
cgit v1.2.3