Design modals

10 files changed, 105 insertions, 76 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
index d6a5190c5..2c731bee3 100644
--- a/client/src/app/videos/+video-edit/shared/video-description.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss
@@ -2,11 +2,8 @@
 @import '_mixins';
 
 textarea {
-  @include peertube-input-text(100%);
+  @include peertube-textarea(100%, 150px);
 
-  padding: 5px 15px;
-  font-size: 15px;
-  height: 150px;
   margin-bottom: 15px;
 }
 
diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html
index 7efc79e93..f8f17a471 100644
--- a/client/src/app/videos/+video-watch/video-download.component.html
+++ b/client/src/app/videos/+video-watch/video-download.component.html
@@ -1,29 +1,40 @@
 <div bsModal #modal="bs-modal" class="modal" tabindex="-1">
   <div class="modal-dialog">
-    <div class="modal-content modal-lg">
+    <div class="modal-content">
 
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="hide()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <h4 class="title-page title-page-single">Download</h4>
+        <span class="close" aria-hidden="true" (click)="hide()"></span>
+        <h4 class="modal-title">Download video</h4>
       </div>
 
       <div class="modal-body">
-        <div *ngFor="let file of video.files" class="resolution-block">
-          <label>{{ file.resolutionLabel }}</label>
+        <div class="peertube-select-container">
+          <select [(ngModel)]="resolution">
+            <option *ngFor="let file of video.files" [value]="file.resolution">{{ file.resolutionLabel }}</option>
+          </select>
+        </div>
+
+        <div class="download-type">
+          <div class="peertube-radio-container">
+            <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+            <label for="download-torrent">Torrent</label>
+          </div>
+
+          <div class="peertube-radio-container">
+            <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+            <label for="download-direct">Direct download</label>
+          </div>
+        </div>
 
-          <a class="orange-button-link " target="_blank" [href]="file.torrentUrl">
-            <span class="icon icon-download"></span>
-            Torrent file
-          </a>
-          <a class="orange-button-link" target="_blank" [href]="file.fileUrl">
-            <span class="icon icon-download"></span>
-            Download
-          </a>
+        <div class="form-group inputs">
+          <span class="action-button action-button-cancel" (click)="hide()">
+            Cancel
+          </span>
 
-          <!-- Don't display magnet URI for now, this is not compatible with most torrent clients -->
-          <!--<input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="file.magnetUri" />-->
+          <input
+            type="submit" value="Download" class="action-button-submit"
+            (click)="download()"
+          >
         </div>
       </div>
     </div>
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss
index 7eac3d1c9..5fca82135 100644
--- a/client/src/app/videos/+video-watch/video-download.component.scss
+++ b/client/src/app/videos/+video-watch/video-download.component.scss
@@ -1,26 +1,17 @@
 @import '_variables';
 @import '_mixins';
 
-.resolution-block:not(:first-child) {
-  margin-top: 30px;
-}
-
-.orange-button-link {
-  margin-right: 10px;
+.peertube-select-container {
+  @include peertube-select-container(130px);
 }
 
-label {
-  display: block;
-}
-
-.icon {
-  @include icon(21px);
+.download-type {
+  margin-top: 30px;
 
-  margin-right: 5px;
-  position: relative;
-  top: -1px;
+  .peertube-radio-container {
+    @include peertube-radio-container;
 
-  &.icon-download {
-    background-image: url('../../../assets/images/video/download-white.svg');
+    display: inline-block;
+    margin-right: 30px;
   }
 }
diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts
index 095df1698..44ece986c 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild } from '@angular/core'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { ModalDirective } from 'ngx-bootstrap/modal'
 import { VideoDetails } from '../../shared/video/video-details.model'
 
@@ -7,15 +7,22 @@ import { VideoDetails } from '../../shared/video/video-details.model'
   templateUrl: './video-download.component.html',
   styleUrls: [ './video-download.component.scss' ]
 })
-export class VideoDownloadComponent {
+export class VideoDownloadComponent implements OnInit {
   @Input() video: VideoDetails = null
 
   @ViewChild('modal') modal: ModalDirective
 
+  downloadType: 'direct' | 'torrent' = 'torrent'
+  resolution = -1
+
   constructor () {
     // empty
   }
 
+  ngOnInit () {
+    this.resolution = this.video.files[0].resolution
+  }
+
   show () {
     this.modal.show()
   }
@@ -23,4 +30,15 @@ export class VideoDownloadComponent {
   hide () {
     this.modal.hide()
   }
+
+  download () {
+    const file = this.video.files.find(f => f.resolution === this.resolution)
+    if (!file) {
+      console.error('Could not find file with resolution %d.', this.resolution)
+      return
+    }
+
+    const link = this.downloadType === 'direct' ? file.fileUrl : file.torrentUrl
+    window.open(link)
+  }
 }
diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html
index 20474bab4..a9a7beb48 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
@@ -1,32 +1,30 @@
 <div bsModal #modal="bs-modal" class="modal" tabindex="-1">
   <div class="modal-dialog">
-    <div class="modal-content modal-lg">
+    <div class="modal-content">
 
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="hide()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <h4 class="title-page title-page-single">Report video</h4>
+        <span class="close" aria-hidden="true" (click)="hide()"></span>
+        <h4 class="modal-title">Report video</h4>
       </div>
 
       <div class="modal-body">
 
         <form novalidate [formGroup]="form" (ngSubmit)="report()">
           <div class="form-group">
-            <label for="reason">Reason</label>
-            <textarea
-              id="reason" class="form-control" placeholder="Reason..."
-              formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
-            >
+            <textarea placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
             </textarea>
             <div *ngIf="formErrors.reason" class="form-error">
               {{ formErrors.reason }}
             </div>
           </div>
 
-          <div class="form-group">
+          <div class="form-group inputs">
+            <span class="action-button action-button-cancel" (click)="hide()">
+              Cancel
+            </span>
+
             <input
-              type="submit" value="Report" class="orange-button"
+              type="submit" value="Submit" class="action-button-submit"
               [disabled]="!form.valid"
             >
           </div>
diff --git a/client/src/app/videos/+video-watch/video-report.component.scss b/client/src/app/videos/+video-watch/video-report.component.scss
new file mode 100644
index 000000000..09d273b35
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-report.component.scss
@@ -0,0 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
+textarea {
+  @include peertube-textarea(100%, 60px);
+}
diff --git a/client/src/app/videos/+video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts
index b94e4144e..ece14754a 100644
--- a/client/src/app/videos/+video-watch/video-report.component.ts
+++ b/client/src/app/videos/+video-watch/video-report.component.ts
@@ -7,7 +7,8 @@ import { VideoDetails } from '../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-report',
-  templateUrl: './video-report.component.html'
+  templateUrl: './video-report.component.html',
+  styleUrls: [ './video-report.component.scss' ]
 })
 export class VideoReportComponent extends FormReactive implements OnInit {
   @Input() video: VideoDetails = null
diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html
index e99eccbfe..85cf10a6c 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -1,12 +1,10 @@
 <div bsModal #modal="bs-modal" class="modal" tabindex="-1">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog">
     <div class="modal-content">
 
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="hide()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-        <h4 class="title-page title-page-single">Share</h4>
+        <span class="close" aria-hidden="true" (click)="hide()"></span>
+        <h4 class="modal-title">Share</h4>
       </div>
 
       <div class="modal-body">
@@ -37,6 +35,12 @@
         <div *ngIf="notSecure()" class="alert alert-warning">
           The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
         </div>
+
+        <div class="form-group inputs">
+          <span class="action-button action-button-cancel" (click)="hide()">
+            Cancel
+          </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/client/src/app/videos/+video-watch/video-share.component.scss b/client/src/app/videos/+video-watch/video-share.component.scss
index e69de29bb..184e09027 100644
--- a/client/src/app/videos/+video-watch/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/video-share.component.scss
@@ -0,0 +1,3 @@
+.action-button-cancel {
+  margin-right: 0 !important;
+}
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index e742e1329..205a4333c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -101,27 +101,27 @@
         .action-more {
           display: inline-block;
 
-          .dropdown-menu .icon {
-            display: inline-block;
-            background-repeat: no-repeat;
-            background-size: contain;
-            width: 21px;
-            height: 21px;
-            vertical-align: middle;
-            margin-right: 5px;
-            position: relative;
-            top: -1px;
+          .dropdown-menu .dropdown-item {
+            padding: 6px 24px;
 
-            &.icon-download {
-              background-image: url('../../../assets/images/video/download-grey.svg');
-            }
+            .icon {
+              @include icon(24px);
 
-            &.icon-alert {
-              background-image: url('../../../assets/images/video/alert.svg');
-            }
+              margin-right: 10px;
+              position: relative;
+              top: -1px;
+
+              &.icon-download {
+                background-image: url('../../../assets/images/video/download-black.svg');
+              }
+
+              &.icon-alert {
+                background-image: url('../../../assets/images/video/alert.svg');
+              }
 
-            &.icon-blacklist {
-              background-image: url('../../../assets/images/video/eye-closed.svg');
+              &.icon-blacklist {
+                background-image: url('../../../assets/images/video/blacklist.svg');
+              }
             }
           }
         }