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 --- .../edit-custom-config.component.html | 12 +- .../edit-custom-config.component.scss | 12 - .../plugin-show-installed.component.html | 4 +- .../my-account-video-channel-edit.component.html | 8 +- .../my-account-video-channel-edit.component.scss | 8 - .../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 +- .../+video-edit/shared/video-edit.component.html | 2 +- .../+video-edit/shared/video-edit.component.scss | 14 +- .../src/assets/images/global/exit-fullscreen.svg | 16 ++ client/src/assets/images/global/fullscreen.svg | 17 ++ client/src/sass/application.scss | 18 ++ client/src/sass/include/_variables.scss | 4 + 15 files changed, 338 insertions(+), 78 deletions(-) create mode 100644 client/src/assets/images/global/exit-fullscreen.svg create mode 100644 client/src/assets/images/global/fullscreen.svg (limited to 'client') 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 @@
{{ formErrors.instance.description }}
@@ -120,7 +120,7 @@
{{ formErrors.instance.terms }}
@@ -129,7 +129,7 @@
{{ formErrors.instance.codeOfConduct }}
@@ -140,7 +140,7 @@
Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc
{{ formErrors.instance.moderationInformation }}
@@ -161,7 +161,7 @@
A single person? A non-profit? A company?
@@ -216,7 +216,7 @@
i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.
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 @@ 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'] }}
- +
-
+
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 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 @@
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); } diff --git a/client/src/assets/images/global/exit-fullscreen.svg b/client/src/assets/images/global/exit-fullscreen.svg new file mode 100644 index 000000000..ba01f583c --- /dev/null +++ b/client/src/assets/images/global/exit-fullscreen.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/client/src/assets/images/global/fullscreen.svg b/client/src/assets/images/global/fullscreen.svg new file mode 100644 index 000000000..4a9d67864 --- /dev/null +++ b/client/src/assets/images/global/fullscreen.svg @@ -0,0 +1,17 @@ + + + fullscreen + Created with Sketch. + + + + + + + + + + + + + diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index cc6552705..ff6ce394f 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -38,6 +38,8 @@ body { --inputBackgroundColor: #{$input-background-color}; --inputPlaceholderColor: #{$input-placeholder-color}; + --textareaBackgroundColor: #{$textarea-background-color}; + --actionButtonColor: #{$grey-foreground-color}; --supportButtonBackgroundColor: #{transparent}; --supportButtonColor: #{var(--actionButtonColor)}; @@ -144,6 +146,16 @@ label { padding-right: $expanded-horizontal-margins; } } + + &.lock-scroll .main-row > router-outlet + * { + // Lock and hide body scrollbars + position: fixed; + + // Lock and hide sub-menu scrollbars + .sub-menu { + overflow-x: hidden; + } + } } .title-page { @@ -304,6 +316,12 @@ table { margin-bottom: $sub-menu-margin-bottom-small-view; } + my-markdown-textarea { + .root { + max-width: 100% !important; + } + } + input[type=text], input[type=password], input[type=email], diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index cf7657550..72eb7b61e 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -68,6 +68,8 @@ $theater-bottom-space: 115px; $input-background-color: $bg-color; $input-placeholder-color: #898989; +$textarea-background-color: $grey-background-hover-color; + $sub-menu-margin-bottom: 30px; $sub-menu-margin-bottom-small-view: 10px; @@ -95,6 +97,8 @@ $variables: ( --inputBackgroundColor: var(--inputBackgroundColor), --inputPlaceholderColor: var(--inputPlaceholderColor), + --textareaBackgroundColor: var(--textareaBackgroundColor), + --actionButtonColor: var(--actionButtonColor), --supportButtonColor: var(--supportButtonColor), --supportButtonBackgroundColor: var(--supportButtonBackgroundColor), -- cgit v1.2.3