From: Chocobozzz <florian.bigard@gmail.com>
Date: Thu, 7 Dec 2017 09:27:33 +0000 (+0100)
Subject: Design video watch modals
X-Git-Tag: v0.0.1-alpha~149^2~23
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12;p=oweals%2Fpeertube.git

Design video watch modals
---

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-grey.svg b/client/src/assets/images/video/download-grey.svg
new file mode 100644
index 000000000..5b0cca5ef
--- /dev/null
+++ b/client/src/assets/images/video/download-grey.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="#585858" 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/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/assets/images/video/download.svg b/client/src/assets/images/video/download.svg
deleted file mode 100644
index 5b0cca5ef..000000000
--- a/client/src/assets/images/video/download.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?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="#585858" 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;
+}