Less complicated markdown textarea CSS

4 files changed, 131 insertions, 216 deletions

diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index f71f73fec..420881f5a 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -66,13 +66,11 @@
             helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support the channel (membership platform...).<br /><br />
       When a video is uploaded in this channel, the video support field will be automatically filled by this text."
           ></my-help>
+
           <my-markdown-textarea
-              id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
-              [classes]="{ 'input-error': formErrors['support'] }"
+            id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
+            [formError]="formErrors['support']"
           ></my-markdown-textarea>
-          <div *ngIf="formErrors.support" class="form-error">
-            {{ formErrors.support }}
-          </div>
         </div>
 
         <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index 7c2a42791..afb046c7f 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -1,7 +1,8 @@
 <div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }">
+
   <textarea #textarea
     [(ngModel)]="content" (ngModelChange)="onModelChange()"
-    class="form-control" [ngClass]="classes"
+    class="form-control" [ngClass]="{ 'input-error': formError }"
     [attr.disabled]="disabled || null"
     [ngStyle]="{ height: textareaHeight }"
     [id]="name" [name]="name">
@@ -25,14 +26,18 @@
       </ng-template>
     </ng-container>
 
-    <my-button
-      *ngIf="!isMaximized" [title]="maximizeInText" className="maximize-button" icon="fullscreen" (click)="onMaximizeClick()" [disabled]="disabled"
-    ></my-button>
+    <my-global-icon
+      *ngIf="!isMaximized" role="button" [ngbTooltip]="maximizeInText"
+      class="maximize-button" iconName="fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
+    ></my-global-icon>
 
-    <my-button
-      *ngIf="isMaximized" [title]="maximizeOutText" className="maximize-button" icon="exit-fullscreen" (click)="onMaximizeClick()" [disabled]="disabled"
-    ></my-button>
+    <my-global-icon
+      *ngIf="isMaximized" role="button" [ngbTooltip]="maximizeOutText"
+      class="maximize-button" iconName="exit-fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
+    ></my-global-icon>
   </div>
 
   <div [ngbNavOutlet]="nav"></div>
+
+  <div *ngIf="!isMaximized && formError" class="form-error">{{ formError }}</div>
 </div>
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 116630d8a..c68c2c241 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -6,260 +6,169 @@ $nav-preview-tab-height: 30px;
 $base-padding: 15px;
 $input-border-radius: 3px;
 
-@mixin in-small-view {
-  .root {
-    display: flex;
-    flex-direction: column;
+.root {
+  display: flex;
+  flex-direction: column;
 
-    textarea {
-      @include peertube-textarea(100%, 150px);
+  textarea {
+    @include peertube-textarea(100%, 150px);
 
-      background-color: pvar(--markdownTextareaBackgroundColor);
+    background-color: pvar(--markdownTextareaBackgroundColor);
 
-      font-family: monospace;
-      font-size: 13px;
-      border-bottom: 0;
-      border-bottom-left-radius: unset;
-      border-bottom-right-radius: unset;
-    }
+    font-family: monospace;
+    font-size: 13px;
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 
-    .nav-preview {
-      @include padding-left(10px);
-      @include padding-right(10px);
+  .nav-preview {
+    padding: 10px;
 
-      display: block;
-      text-align: end;
-      padding-top: 10px;
-      padding-bottom: 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;
-
-      border-bottom-left-radius: $input-border-radius;
-      ::ng-deep {
-        .nav-link {
-          display: none !important;
-        }
+    border: 1px solid $input-border-color;
+    border-top: 1px dashed $input-border-color;
 
-        .maximize-button {
-          padding: 0 7px;
-          cursor: pointer;
-
-          svg {
-            stroke: var(--mainForegroundColor);
-            opacity: 0.7;
-          }
-
-          &:hover,
-          &:active {
-            svg {
-              opacity: 1;
-            }
-          }
-        }
-      }
-    }
+    border-bottom-right-radius: $input-border-radius;
+    border-bottom-left-radius: $input-border-radius;
 
-    ::ng-deep {
-      .tab-content {
-        display: none;
-      }
-    }
-  }
-}
+    display: flex;
+    flex-grow: 1;
+    border-bottom-left-radius: unset;
+    border-bottom-right-radius: unset;
+    border-bottom: 2px solid pvar(--mainColor);
 
-@mixin nav-preview-medium {
-  display: flex;
-  flex-grow: 1;
-  border-bottom-left-radius: unset;
-  border-bottom-right-radius: unset;
-  border-bottom: 2px solid pvar(--mainColor);
+    .maximize-button {
+      @include margin-left(15px);
 
-  :first-child {
-    @include margin-left(auto);
-  }
+      opacity: 0.6;
+      cursor: default;
 
-  ::ng-deep {
-    .nav-link {
-      display: flex !important;
-      align-items: center;
-      height: $nav-preview-tab-height !important;
-      padding: 0 15px !important;
-      font-size: 85% !important;
-      opacity: .7;
-    }
+      &:not(.disabled) {
+        cursor: pointer;
 
-    .maximize-button {
-      @include margin-left(5px);
+        &:hover,
+        &:active {
+          opacity: 1;
+        }
+      }
     }
   }
-}
 
-@mixin content-preview-base {
-  display: block;
-  min-height: 75px;
-  padding: $base-padding;
-  overflow-y: auto;
-  word-wrap: break-word;
-}
+  .nav-pills {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 
-@mixin maximized-base {
-  $nav-preview-vertical-padding: 40px;
+    > * {
+      font-size: 0.9em !important;
+    }
+  }
 
-  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;
+  .tab-content {
+    min-height: 75px;
+    max-height: 210px;
+    padding: $base-padding;
 
-  .nav-preview {
-    @include nav-preview-medium();
-    @include padding-right(0);
-    @include padding-left(0);
+    overflow-y: auto;
+    word-wrap: break-word;
 
-    padding-top: math.div($nav-preview-vertical-padding, 2);
-    padding-bottom: math.div($nav-preview-vertical-padding, 2);
-    position: absolute;
-    background-color: pvar(--mainBackgroundColor);
-    width: 100% !important;
+    border: 1px solid $input-border-color;
     border-top: 0;
-    border-left: 0;
-    border-right: 0;
 
-    :last-child {
-      @include margin-right(pvar(--horizontalMarginContent));
-    }
+    border-bottom-left-radius: $input-border-radius;
+    border-bottom-right-radius: $input-border-radius;
   }
 
-  ::ng-deep .tab-content {
-    @include content-preview-base();
-    background-color: pvar(--mainBackgroundColor);
-    scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
-  }
+  &.maximized {
+    z-index: #{z(header) - 1};
+    position: fixed;
+    top: $header-height;
+    left: $menu-width;
 
-  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: 0 !important;
-    border-radius: unset !important;
-  }
-
-  :host-context(.expanded) {
-    .root.maximized {
-      left: 0;
-      width: 100%;
-    }
-  }
-}
+    width: calc(100% - #{$menu-width});
+    height: calc(100vh - #{$header-height});
 
-@mixin maximized-in-small-view {
-  .root.maximized {
-    @include maximized-base();
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr 1fr;
 
-    textarea {
-      display: none;
-    }
-
-    ::ng-deep .tab-content {
-      width: 100% !important;
-    }
-  }
-}
+    background-color: pvar(--mainBackgroundColor);
 
-@mixin maximized-tabs-in-mobile-view {
-  // Ellipsis on tabs for mobile view
-  .root.maximized {
     .nav-preview {
-      ::ng-deep .nav-link {
-        @include ellipsis();
-        @include margin-right(10px !important);
+      grid-row: 1;
+      grid-column: 1 / 3;
 
-        display: block !important;
-        max-width: 45% !important;
-        padding: 5px 0 !important;
-        text-align: center;
+      border: 0;
+      border-bottom: 2px solid pvar(--mainColor);
 
-        &:not(.active) {
-          max-width: 15% !important;
-        }
+      padding: 20px 0;
+      width: 100% !important;
 
-        &.active {
-          padding: 5px 15px !important;
-        }
+      .maximize-button {
+        @include margin-right(15px);
       }
     }
-  }
-}
 
-@mixin in-medium-view {
-  .root {
-    .nav-preview {
-      @include nav-preview-medium();
+    textarea {
+      grid-column: 1;
+
+      border: 0;
+      border-right: 1px dashed $input-border-color;
+
+      resize: none;
     }
 
     ::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;
-    }
-  }
-}
+      grid-column: 2;
 
-@mixin maximized-in-medium-view {
-  .root.maximized {
-    @include maximized-base();
+      border: 0;
 
-    textarea {
       display: block;
-      padding: $base-padding;
-      border-right: 1px dashed $input-border-color !important;
-      resize: none;
-      scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
+      overflow-y: auto;
+      word-wrap: break-word;
 
-      &:focus {
-        box-shadow: none;
-      }
+      scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
     }
-  }
-}
 
-@include in-small-view();
-@include maximized-in-small-view();
+    textarea,
+    ::ng-deep .tab-content {
+      grid-row: 2;
 
-@media only screen and (max-width: $mobile-view) {
-  @include maximized-tabs-in-mobile-view();
-}
+      height: 100% !important;
+      max-height: none !important;
+      border-radius: 0;
 
-@media only screen and (max-width: #{$mobile-view + $menu-width}) {
-  :host-context(.main-col:not(.expanded)) {
-    @include maximized-tabs-in-mobile-view();
-  }
-}
+      padding: 15px;
+    }
+
+    @media screen and (max-width: $mobile-view) {
+      grid-template-rows: auto 45% 1fr;
+      grid-template-columns: 1fr;
+
+      .nav-preview {
+        grid-column: 1;
+      }
 
-@media only screen and (min-width: $small-view) {
-  @include maximized-in-medium-view();
+      textarea {
+        grid-row: 2;
+        grid-column: 1;
+        border: 0;
+        border-bottom: 1px dashed $input-border-color;;
+      }
 
-  :host-context(.expanded) {
-    @include in-medium-view();
+      ::ng-deep .tab-content {
+        grid-column: 1;
+        grid-row: 3;
+      }
+    }
   }
 }
 
-@media only screen and (min-width: #{$small-view + $menu-width}) {
-  :host-context(.main-col:not(.expanded)) {
-    @include in-medium-view();
+:host-context(.main-col.expanded) {
+  .root.maximized {
+    left: 0;
+    width: 100%;
   }
 }
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index dcb5d20da..5a603c157 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -24,6 +24,7 @@ import { Video } from '@shared/models'
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() content = ''
 
+  @Input() formError: string
   @Input() classes: string[] | { [klass: string]: any[] | any } = []
 
   @Input() textareaMaxWidth = '100%'
@@ -93,6 +94,8 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   }
 
   onMaximizeClick () {
+    if (this.disabled) return
+
     this.isMaximized = !this.isMaximized
 
     // Make sure textarea have the focus