Use form-control to display box-shadow on form inputs/selects upon focus

8 files changed, 37 insertions, 21 deletions

diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
index 65df1cd4d..dbc8c23e3 100644
--- a/client/src/app/shared/confirm/confirm.component.html
+++ b/client/src/app/shared/confirm/confirm.component.html
@@ -16,11 +16,15 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="dismiss()" (key.enter)="dismiss()"
+    >
 
     <input
+      ngbAutofocus
       type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
-      (click)="close()"
+      (click)="close()" (key.enter)="confirm()"
     >
   </div>
 </ng-template>
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
index d67d4f3c8..c6e40fe72 100644
--- a/client/src/app/shared/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -45,7 +45,6 @@ export class ConfirmComponent implements OnInit {
     )
   }
 
-  @HostListener('document:keydown.enter')
   confirm () {
     if (this.openedModal) this.openedModal.close()
   }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index fb6e1343d..3cadb3619 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -1,7 +1,8 @@
 <div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
   <textarea
     [(ngModel)]="content" (ngModelChange)="onModelChange()"
-    [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+    class="form-control" [ngClass]="classes"
+    [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
     [id]="name" [name]="name">
   </textarea>
 
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index f38ea543d..365eb1938 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -8,8 +8,10 @@
   <div class="modal-body">
     <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
-        </textarea>
+        <textarea
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          class="form-control" [ngClass]="{ 'input-error': formErrors['reason'] }"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
@@ -20,7 +22,10 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Ban this user" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.html b/client/src/app/shared/video/modals/video-blacklist.component.html
index 857a4dcec..8f06a6b02 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.html
+++ b/client/src/app/shared/video/modals/video-blacklist.component.html
@@ -8,8 +8,10 @@
 
     <form novalidate [formGroup]="form" (ngSubmit)="blacklist()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
-        </textarea>
+        <textarea
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
@@ -27,9 +29,10 @@
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
-          Cancel
-        </span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index ab6f4449d..c65e371ee 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -95,9 +95,10 @@
   </div>
 
   <div class="modal-footer inputs">
-    <span i18n class="action-button action-button-cancel" (click)="hide()">
-      Cancel
-    </span>
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="hide()" (key.enter)="hide()"
+    >
 
     <input
       type="submit" i18n-value value="Download" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html
index cc1d361b3..e336b6660 100644
--- a/client/src/app/shared/video/modals/video-report.component.html
+++ b/client/src/app/shared/video/modals/video-report.component.html
@@ -12,17 +12,20 @@
 
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
       <div class="form-group">
-        <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
-        </textarea>
+        <textarea 
+          i18n-placeholder placeholder="Reason..." formControlName="reason"
+          [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+        ></textarea>
         <div *ngIf="formErrors.reason" class="form-error">
           {{ formErrors.reason }}
         </div>
       </div>
 
       <div class="form-group inputs">
-        <span i18n class="action-button action-button-cancel" (click)="hide()">
-          Cancel
-        </span>
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
 
         <input
           type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 819be6d48..6a8558de3 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -52,7 +52,7 @@
     <div class="video-actions">
       <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
       <my-video-actions-dropdown
-        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
+        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left auto"
         (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
       ></my-video-actions-dropdown>
     </div>