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 --- .../shared/forms/markdown-textarea.component.html | 16 +- .../shared/forms/markdown-textarea.component.scss | 244 +++++++++++++++++++-- .../shared/forms/markdown-textarea.component.ts | 37 +++- .../src/app/shared/images/global-icon.component.ts | 4 +- 4 files changed, 269 insertions(+), 32 deletions(-) (limited to 'client/src/app/shared') 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 @@ -
- -
+
Truncated preview @@ -22,6 +22,14 @@
+ + + +
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() @@ -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 -- cgit v1.2.3