diff options
author | Kim <1877318+kimsible@users.noreply.github.com> | 2020-04-28 14:53:43 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-04-28 14:53:43 +0200 |
commit | b15fe00f7409b27573e162192530bc73e3f918b1 (patch) | |
tree | a71df67cee37a60f4de573ca9347aa3262cd8463 /client/src/app/shared/forms/markdown-textarea.component.ts | |
parent | 4682468d4d07e0864155dd2b403d93754786ea13 (diff) | |
download | PeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.tar.gz PeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.tar.zst PeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.zip |
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>
Diffstat (limited to 'client/src/app/shared/forms/markdown-textarea.component.ts')
-rw-r--r-- | client/src/app/shared/forms/markdown-textarea.component.ts | 37 |
1 files changed, 25 insertions, 12 deletions
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 @@ | |||
1 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | 1 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' |
2 | import { Component, forwardRef, Input, OnInit } from '@angular/core' | 2 | import { Component, forwardRef, Input, OnInit, ViewChild, ElementRef } from '@angular/core' |
3 | import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' | 3 | import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' |
4 | import { Subject } from 'rxjs' | 4 | import { Subject } from 'rxjs' |
5 | import truncate from 'lodash-es/truncate' | 5 | import truncate from 'lodash-es/truncate' |
@@ -22,18 +22,18 @@ import { MarkdownService } from '@app/shared/renderer' | |||
22 | export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { | 22 | export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { |
23 | @Input() content = '' | 23 | @Input() content = '' |
24 | @Input() classes: string[] | { [klass: string]: any[] | any } = [] | 24 | @Input() classes: string[] | { [klass: string]: any[] | any } = [] |
25 | @Input() textareaWidth = '100%' | 25 | @Input() textareaMaxWidth = '100%' |
26 | @Input() textareaHeight = '150px' | 26 | @Input() textareaHeight = '150px' |
27 | @Input() previewColumn = false | ||
28 | @Input() truncate: number | 27 | @Input() truncate: number |
29 | @Input() markdownType: 'text' | 'enhanced' = 'text' | 28 | @Input() markdownType: 'text' | 'enhanced' = 'text' |
30 | @Input() markdownVideo = false | 29 | @Input() markdownVideo = false |
31 | @Input() name = 'description' | 30 | @Input() name = 'description' |
32 | 31 | ||
33 | textareaMarginRight = '0' | 32 | @ViewChild('textarea') textareaElement: ElementRef |
34 | flexDirection = 'column' | 33 | |
35 | truncatedPreviewHTML = '' | 34 | truncatedPreviewHTML = '' |
36 | previewHTML = '' | 35 | previewHTML = '' |
36 | isMaximized = false | ||
37 | 37 | ||
38 | private contentChanged = new Subject<string>() | 38 | private contentChanged = new Subject<string>() |
39 | 39 | ||
@@ -51,11 +51,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { | |||
51 | .subscribe(() => this.updatePreviews()) | 51 | .subscribe(() => this.updatePreviews()) |
52 | 52 | ||
53 | this.contentChanged.next(this.content) | 53 | this.contentChanged.next(this.content) |
54 | |||
55 | if (this.previewColumn) { | ||
56 | this.flexDirection = 'row' | ||
57 | this.textareaMarginRight = '15px' | ||
58 | } | ||
59 | } | 54 | } |
60 | 55 | ||
61 | propagateChange = (_: any) => { /* empty */ } | 56 | propagateChange = (_: any) => { /* empty */ } |
@@ -80,8 +75,26 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { | |||
80 | this.contentChanged.next(this.content) | 75 | this.contentChanged.next(this.content) |
81 | } | 76 | } |
82 | 77 | ||
83 | arePreviewsDisplayed () { | 78 | onMaximizeClick () { |
84 | return this.screenService.isInSmallView() === false | 79 | this.isMaximized = !this.isMaximized |
80 | |||
81 | // Make sure textarea have the focus | ||
82 | this.textareaElement.nativeElement.focus() | ||
83 | |||
84 | // Make sure the window has no scrollbars | ||
85 | if (!this.isMaximized) { | ||
86 | this.unlockBodyScroll() | ||
87 | } else { | ||
88 | this.lockBodyScroll() | ||
89 | } | ||
90 | } | ||
91 | |||
92 | private lockBodyScroll () { | ||
93 | document.getElementById('content').classList.add('lock-scroll') | ||
94 | } | ||
95 | |||
96 | private unlockBodyScroll () { | ||
97 | document.getElementById('content').classList.remove('lock-scroll') | ||
85 | } | 98 | } |
86 | 99 | ||
87 | private async updatePreviews () { | 100 | private async updatePreviews () { |