yetangitu/Peertube
1
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2025-10-05 10:49:28 +02:00
Code Issues Releases Wiki Activity

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

Browse source 
* 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>
This commit is contained in:
Kim 2020-04-28 14:53:43 +02:00 • committed by GitHub
parent 4682468d4d
commit b15fe00f74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 338 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

37
client/src/app/shared/forms/markdown-textarea.component.ts
View file

@ -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 () {