From 0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Thu, 7 Dec 2017 10:27:33 +0100
Subject: [PATCH] Design video watch modals

---
 .../account-videos.component.scss             |  8 ++---
 client/src/app/app.component.scss             |  8 ++---
 client/src/app/header/header.component.scss   | 10 +++----
 client/src/app/menu/menu.component.scss       |  6 ++--
 .../forms/form-validators/video-abuse.ts      |  6 ++--
 .../video-download.component.html             | 11 +++----
 .../video-download.component.scss             | 23 ++++++++++++++
 .../+video-watch/video-download.component.ts  |  2 +-
 .../+video-watch/video-report.component.html  | 12 ++++----
 .../+video-watch/video-share.component.html   |  2 +-
 .../+video-watch/video-watch.component.scss   | 10 ++-----
 .../video/{download.svg => download-grey.svg} |  0
 .../assets/images/video/download-white.svg    | 16 ++++++++++
 client/src/sass/_mixins.scss                  | 16 ++++++++--
 client/src/sass/application.scss              | 30 +++++++++++++++++++
 15 files changed, 113 insertions(+), 47 deletions(-)
 create mode 100644 client/src/app/videos/+video-watch/video-download.component.scss
 rename client/src/assets/images/video/{download.svg => download-grey.svg} (100%)
 create mode 100644 client/src/assets/images/video/download-white.svg

diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index 04aaa8e89..083918e29 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -32,12 +32,8 @@
   }
 
   .icon {
-    display: inline-block;
-    background-repeat: no-repeat;
-    background-size: contain;
-    width: 21px;
-    height: 21px;
-    vertical-align: middle;
+    @include icon(21px);
+
     position: relative;
     top: -2px;
 
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 97c5d461a..10af9debe 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -35,11 +35,7 @@
     align-items: center;
 
     .icon {
-      cursor: pointer;
-      width: 22px;
-      height: 22px;
-      display: inline-block;
-      background-size: contain;
+      @include icon(22px);
 
       &.icon-menu {
         background-image: url('../assets/images/header/menu.svg');
@@ -59,7 +55,7 @@
       .icon.icon-logo {
         display: inline-block;
         background: url('../assets/images/logo.svg') no-repeat;
-        width: 20px;
+        width: 23px;
         height: 24px;
       }
     }
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index e7761a9df..d1c59e8d1 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -9,13 +9,11 @@
 }
 
 .icon.icon-search {
-  display: inline-block;
-  background: url('../../assets/images/header/search.svg') no-repeat;
-  background-size: contain;
-  width: 25px;
+  @include icon(25px);
   height: 21px;
-  vertical-align: middle;
-  cursor: pointer;
+
+  background-image: url('../../assets/images/header/search.svg');
+
   // yolo
   position: absolute;
   margin-left: -50px;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c93c59622..eda3e1a85 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -107,11 +107,9 @@ menu {
       @include disable-default-a-behaviour;
 
       .icon {
-        width: 22px;
-        height: 22px;
-        display: inline-block;
+        @include icon(22px);
+
         margin-right: 18px;
-        background-size: contain;
 
         &.icon-videos-trending {
           position: relative;
diff --git a/client/src/app/shared/forms/form-validators/video-abuse.ts b/client/src/app/shared/forms/form-validators/video-abuse.ts
index 3c7f26205..4b2a2b789 100644
--- a/client/src/app/shared/forms/form-validators/video-abuse.ts
+++ b/client/src/app/shared/forms/form-validators/video-abuse.ts
@@ -3,8 +3,8 @@ import { Validators } from '@angular/forms'
 export const VIDEO_ABUSE_REASON = {
   VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
   MESSAGES: {
-    'required': 'Report reason name is required.',
-    'minlength': 'Report reson must be at least 2 characters long.',
-    'maxlength': 'Report reson cannot be more than 300 characters long.'
+    'required': 'Report reason is required.',
+    'minlength': 'Report reason must be at least 2 characters long.',
+    'maxlength': 'Report reason cannot be more than 300 characters long.'
   }
 }
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 ddc57e999..7efc79e93 100644
--- a/client/src/app/videos/+video-watch/video-download.component.html
+++ b/client/src/app/videos/+video-watch/video-download.component.html
@@ -6,18 +6,19 @@
         <button type="button" class="close" aria-label="Close" (click)="hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Download</h4>
+        <h4 class="title-page title-page-single">Download</h4>
       </div>
 
       <div class="modal-body">
         <div *ngFor="let file of video.files" class="resolution-block">
           <label>{{ file.resolutionLabel }}</label>
-          <a class="btn btn-default " target="_blank" [href]="file.torrentUrl">
-            <span class="glyphicon glyphicon-download"></span>
+
+          <a class="orange-button-link " target="_blank" [href]="file.torrentUrl">
+            <span class="icon icon-download"></span>
             Torrent file
           </a>
-          <a class="btn btn-default" target="_blank" [href]="file.fileUrl">
-            <span class="glyphicon glyphicon-download"></span>
+          <a class="orange-button-link" target="_blank" [href]="file.fileUrl">
+            <span class="icon icon-download"></span>
             Download
           </a>
 
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss
new file mode 100644
index 000000000..c9d5af9c1
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-download.component.scss
@@ -0,0 +1,23 @@
+.resolution-block:not(:first-child) {
+  margin-top: 30px;
+}
+
+.orange-button-link {
+  margin-right: 10px;
+}
+
+label {
+  display: block;
+}
+
+.icon {
+  @include icon(21px);
+
+  margin-right: 5px;
+  position: relative;
+  top: -1px;
+
+  &.icon-download {
+    background-image: url('../../../assets/images/video/download-white.svg');
+  }
+}
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 010a246cd..095df1698 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -5,7 +5,7 @@ import { VideoDetails } from '../../shared/video/video-details.model'
 @Component({
   selector: 'my-video-download',
   templateUrl: './video-download.component.html',
-  styles: [ '.resolution-block { margin-top: 20px; }' ]
+  styleUrls: [ './video-download.component.scss' ]
 })
 export class VideoDownloadComponent {
   @Input() video: VideoDetails = null
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 ceb7cf50a..20474bab4 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
@@ -6,28 +6,28 @@
         <button type="button" class="close" aria-label="Close" (click)="hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Report video</h4>
+        <h4 class="title-page title-page-single">Report video</h4>
       </div>
 
       <div class="modal-body">
 
-        <form novalidate [formGroup]="form">
+        <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"
+              formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
             >
             </textarea>
-            <div *ngIf="formErrors.reason" class="alert alert-danger">
+            <div *ngIf="formErrors.reason" class="form-error">
               {{ formErrors.reason }}
             </div>
           </div>
 
           <div class="form-group">
             <input
-              type="button" value="Report" class="btn btn-default form-control"
-              [disabled]="!form.valid" (click)="report()"
+              type="submit" value="Report" class="orange-button"
+              [disabled]="!form.valid"
             >
           </div>
         </form>
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 88f59c063..36ec38d88 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -6,7 +6,7 @@
         <button type="button" class="close" aria-label="Close" (click)="hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Share</h4>
+        <h4 class="title-page title-page-single">Share</h4>
       </div>
 
       <div class="modal-body">
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 3f36410f4..6973619b2 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -51,12 +51,8 @@
           padding: 0 10px 0 10px;
 
           .icon {
-            display: inline-block;
-            background-repeat: no-repeat;
-            background-size: contain;
-            width: 21px;
-            height: 21px;
-            vertical-align: middle;
+            @include icon(21px);
+
             position: relative;
             top: -2px;
 
@@ -105,7 +101,7 @@
             top: -1px;
 
             &.icon-download {
-              background-image: url('../../../assets/images/video/download.svg');
+              background-image: url('../../../assets/images/video/download-grey.svg');
             }
 
             &.icon-alert {
diff --git a/client/src/assets/images/video/download.svg b/client/src/assets/images/video/download-grey.svg
similarity index 100%
rename from client/src/assets/images/video/download.svg
rename to client/src/assets/images/video/download-grey.svg
diff --git a/client/src/assets/images/video/download-white.svg b/client/src/assets/images/video/download-white.svg
new file mode 100644
index 000000000..0e66e06e8
--- /dev/null
+++ b/client/src/assets/images/video/download-white.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>download</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#ffffff" stroke-width="2">
+            <g id="84" transform="translate(180.000000, 291.000000)">
+                <path d="M12,3 L12,15" id="Path-58"></path>
+                <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
+                <path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index ddc9c6766..14d9b5044 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -23,7 +23,8 @@
   color: #fff;
   background-color: $orange-color;
 
-  &:hover {
+  &:hover, &:active, &:focus, &[disabled] {
+    color: #fff;
     background-color: $orange-hoover-color;
   }
 }
@@ -32,7 +33,8 @@
   background-color: $grey-color;
   color: #585858;
 
-  &:hover {
+  &:hover, &:active, &:focus, &[disabled] {
+    color: #585858;
     background-color: $grey-hoover-color;
   }
 }
@@ -60,3 +62,13 @@
   width: $size;
   height: $size;
 }
+
+@mixin icon ($size) {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: $size;
+  height: $size;
+  vertical-align: middle;
+  cursor: pointer;
+}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c81031021..dc1f4dba0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -152,3 +152,33 @@ p-datatable {
     color: #000 !important;
   }
 }
+
+.modal {
+  .modal-header {
+    border-bottom: none;
+
+    .title-page-single {
+      margin: 0;
+    }
+  }
+}
+
+.orange-button {
+  @include peertube-button;
+  @include orange-button;
+}
+
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
+}
-- 
2.25.1