From 4cc66133abf1e37873316999b660c93ab92eb4a0 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Thu, 7 Dec 2017 14:48:47 +0100
Subject: [PATCH] Design video update

---
 .../shared/video-edit.component.html          | 130 ++++++++---------
 .../shared/video-edit.component.scss          | 136 +++++++++++++++---
 .../+video-edit/video-update.component.html   |  19 ++-
 .../+video-edit/video-update.component.ts     |  13 +-
 .../+video-watch/video-watch.component.scss   |   1 +
 .../shared/video-description.component.html   |   4 +-
 .../shared/video-description.component.scss   |   6 +-
 client/src/assets/images/global/validate.svg  |  14 ++
 client/src/sass/_mixins.scss                  |  22 ++-
 9 files changed, 236 insertions(+), 109 deletions(-)
 create mode 100644 client/src/assets/images/global/validate.svg

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index e087b71a4..a6b753166 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -1,85 +1,85 @@
-<div [formGroup]="form">
-  <div class="form-group">
-    <label for="name">Name</label>
-    <input
-      type="text" class="form-control" id="name"
-      formControlName="name"
-    >
-    <div *ngIf="formErrors.name" class="alert alert-danger">
-      {{ formErrors.name }}
-    </div>
-  </div>
+<div class="video-edit row" [formGroup]="form">
 
-  <div class="form-group">
-    <label for="privacy">Privacy</label>
-    <select class="form-control" id="privacy" formControlName="privacy">
-      <option></option>
-      <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-    </select>
+  <div class="col-md-8">
+    <div class="form-group">
+      <label for="name">Title</label>
+      <input type="text" id="name" formControlName="name" />
+      <div *ngIf="formErrors.name" class="form-error">
+        {{ formErrors.name }}
+      </div>
+    </div>
 
-    <div *ngIf="formErrors.privacy" class="alert alert-danger">
-      {{ formErrors.privacy }}
+    <div class="form-group">
+      <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
+      <tag-input
+          [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+          formControlName="tags" maxItems="5" modelAsStrings="true"
+      ></tag-input>
     </div>
-  </div>
 
-  <div class="form-group">
-    <input
-      type="checkbox" id="nsfw"
-      formControlName="nsfw"
-    >
-    <label for="nsfw">This video contains mature or explicit content</label>
+    <div class="form-group">
+      <label for="description">Description</label>
+      <my-video-description formControlName="description"></my-video-description>
+
+      <div *ngIf="formErrors.description" class="form-error">
+        {{ formErrors.description }}
+      </div>
+    </div>
   </div>
 
-  <div class="form-group">
-    <label for="category">Category</label>
-    <select class="form-control" id="category" formControlName="category">
-      <option></option>
-      <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-    </select>
+  <div class="col-md-4">
+    <div class="form-group">
+      <label for="category">Category</label>
+      <select id="category" formControlName="category">
+        <option></option>
+        <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+      </select>
 
-    <div *ngIf="formErrors.category" class="alert alert-danger">
-      {{ formErrors.category }}
+      <div *ngIf="formErrors.category" class="form-error">
+        {{ formErrors.category }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="licence">Licence</label>
-    <select class="form-control" id="licence" formControlName="licence">
-      <option></option>
-      <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-    </select>
+    <div class="form-group">
+      <label for="licence">Licence</label>
+      <select id="licence" formControlName="licence">
+        <option></option>
+        <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+      </select>
 
-    <div *ngIf="formErrors.licence" class="alert alert-danger">
-      {{ formErrors.licence }}
+      <div *ngIf="formErrors.licence" class="form-error">
+        {{ formErrors.licence }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="language">Language</label>
-    <select class="form-control" id="language" formControlName="language">
-      <option></option>
-      <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-    </select>
+    <div class="form-group">
+      <label for="language">Language</label>
+      <select id="language" formControlName="language">
+        <option></option>
+        <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+      </select>
 
-    <div *ngIf="formErrors.language" class="alert alert-danger">
-      {{ formErrors.language }}
+      <div *ngIf="formErrors.language" class="form-error">
+        {{ formErrors.language }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
-    <tag-input
-      [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-      formControlName="tags" maxItems="5" modelAsStrings="true"
-    ></tag-input>
-  </div>
+    <div class="form-group">
+      <label for="privacy">Privacy</label>
+      <select id="privacy" formControlName="privacy">
+        <option></option>
+        <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+      </select>
 
-  <div class="form-group">
-    <label for="description">Description</label>
-    <my-video-description formControlName="description"></my-video-description>
+      <div *ngIf="formErrors.privacy" class="form-error">
+        {{ formErrors.privacy }}
+      </div>
+    </div>
 
-    <div *ngIf="formErrors.description" class="alert alert-danger">
-      {{ formErrors.description }}
+    <div class="form-group form-group-checkbox">
+      <input type="checkbox" id="nsfw" formControlName="nsfw" />
+      <label for="nsfw">This video contains mature or explicit content</label>
     </div>
+
   </div>
 </div>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 9ee0c520c..0af48fabe 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -1,3 +1,121 @@
+.video-edit {
+  height: 100%;
+
+  .form-group {
+    margin-bottom: 25px;
+  }
+
+  input {
+    @include peertube-input-text(100%);
+    display: block;
+
+    &[type=checkbox] {
+      outline: 0;
+    }
+  }
+
+  select {
+    @include peertube-select(100%);
+  }
+
+  input, select {
+    font-size: 15px
+  }
+
+  .form-group-checkbox {
+    display: flex;
+    align-items: center;
+
+    label {
+      font-weight: $font-regular;
+      margin: 0;
+    }
+
+    input {
+      width: 10px;
+      margin-right: 10px;
+    }
+  }
+}
+
+.submit-container {
+  text-align: right;
+  position: relative;
+  bottom: $button-height;
+
+  .submit-button {
+    @include peertube-button;
+    @include orange-button;
+
+    display: inline-block;
+
+    input {
+      cursor: inherit;
+      background-color: inherit;
+      border: none;
+      padding: 0;
+    }
+
+    .icon.icon-validate {
+      @include icon(20px);
+
+      cursor: inherit;
+      position: relative;
+      top: -1px;
+      margin-right: 4px;
+      background-image: url('../../../../assets/images/global/validate.svg');
+    }
+  }
+}
+
+/deep/ {
+  .ng2-tag-input {
+    border: none !important;
+  }
+
+  .ng2-tags-container {
+    display: flex;
+    align-items: center;
+    border: 1px solid #C6C6C6;
+    border-radius: 3px;
+    padding: 5px !important;
+  }
+
+  tag {
+    background-color: #E5E5E5 !important;
+    border-radius: 3px !important;
+    font-size: 15px !important;
+    color: #000 !important;
+    height: 30px !important;
+    line-height: 30px !important;
+    margin: 0 5px 0 0 !important;
+    cursor: default !important;
+    padding: 0 8px 0 10px !important;
+
+    div {
+      height: 100% !important;
+    }
+  }
+
+  delete-icon {
+    cursor: pointer !important;
+    height: auto !important;
+    vertical-align: middle !important;
+    padding-left: 6px !important;
+
+    svg {
+      height: auto !important;
+      vertical-align: middle !important;
+      fill: #585858 !important;
+    }
+
+    &:hover {
+      transform: none !important;
+    }
+  }
+}
+
+
 .btn-file {
   position: relative;
   overflow: hidden;
@@ -20,24 +138,6 @@
   display: block;
 }
 
-.form-group {
-  margin-bottom: 10px;
-}
-
-div.tags {
-  height: 40px;
-  font-size: 20px;
-  margin-top: 20px;
-
-  .tag {
-    margin-right: 10px;
-
-    .remove {
-      cursor: pointer;
-    }
-  }
-}
-
 div.file-to-upload {
   height: 40px;
 
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index c57f35da0..3163495bf 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -1,7 +1,7 @@
-<div class="row">
-  <div class="content-padding">
-
-  <h3>Update {{ video?.name }}</h3>
+<div class="margin-content">
+  <div class="title-page title-page-single">
+    Update {{ video?.name }}
+  </div>
 
   <form novalidate [formGroup]="form">
 
@@ -10,12 +10,11 @@
       [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
     ></my-video-edit>
 
-    <div class="form-group">
-      <input
-        type="button" value="Update" class="btn btn-default form-control"
-        (click)="update()"
-      >
+    <div class="submit-container">
+      <div class="submit-button" [ngClass]="{ disabled: !form.valid }">
+        <span class="icon icon-validate"></span>
+        <input type="button" value="Update" (click)="update()" />
+      </div>
     </div>
   </form>
-  </div>
 </div>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index 01ab0a716..d1da8b6d8 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -5,19 +5,10 @@ import { NotificationsService } from 'angular2-notifications'
 import 'rxjs/add/observable/forkJoin'
 import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
 import { ServerService } from '../../core'
-import {
-  FormReactive,
-  VIDEO_CATEGORY,
-  VIDEO_DESCRIPTION,
-  VIDEO_LANGUAGE,
-  VIDEO_LICENCE,
-  VIDEO_NAME,
-  VIDEO_PRIVACY,
-  VIDEO_TAGS
-} from '../../shared'
+import { FormReactive } from '../../shared'
 import { ValidatorMessage } from '../../shared/forms/form-validators'
-import { VideoService } from '../../shared/video/video.service'
 import { VideoEdit } from '../../shared/video/video-edit.model'
+import { VideoService } from '../../shared/video/video.service'
 
 @Component({
   selector: 'my-videos-update',
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 6973619b2..2ccfd2749 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -70,6 +70,7 @@
 
             &.icon-more {
               background-image: url('../../../assets/images/video/more.svg');
+              top: -1px;
             }
           }
 
diff --git a/client/src/app/videos/shared/video-description.component.html b/client/src/app/videos/shared/video-description.component.html
index 7a228857c..da66a9753 100644
--- a/client/src/app/videos/shared/video-description.component.html
+++ b/client/src/app/videos/shared/video-description.component.html
@@ -1,6 +1,6 @@
 <textarea
-    [(ngModel)]="description" (ngModelChange)="onModelChange()"
-    id="description" class="form-control" placeholder="My super video">
+  [(ngModel)]="description" (ngModelChange)="onModelChange()"
+  id="description" placeholder="My super video">
 </textarea>
 
 <tabset #staticTabs class="previews">
diff --git a/client/src/app/videos/shared/video-description.component.scss b/client/src/app/videos/shared/video-description.component.scss
index d8d73e846..6ef81ae58 100644
--- a/client/src/app/videos/shared/video-description.component.scss
+++ b/client/src/app/videos/shared/video-description.component.scss
@@ -1,11 +1,15 @@
 textarea {
+  @include peertube-input-text(100%);
+
+  font-size: 15px;
   height: 150px;
 }
 
 .previews /deep/ {
+  font-size: 15px !important;
+
   .nav {
     margin-top: 10px;
-    font-size: 0.9em;
   }
 
   .tab-content {
diff --git a/client/src/assets/images/global/validate.svg b/client/src/assets/images/global/validate.svg
new file mode 100644
index 000000000..5c7ee9d14
--- /dev/null
+++ b/client/src/assets/images/global/validate.svg
@@ -0,0 +1,14 @@
+<?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">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-400.000000, -1134.000000)" stroke="#ffffff" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="yes" transform="translate(352.000000, 88.000000)">
+                    <circle id="Oval-1" cx="12" cy="12" r="10"></circle>
+                    <polyline id="Path-288" stroke-linecap="round" stroke-linejoin="round" points="8.5 12.5 10.5 14.5 15.5 9.5"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index 14d9b5044..121e16e10 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -23,20 +23,28 @@
   color: #fff;
   background-color: $orange-color;
 
-  &:hover, &:active, &:focus, &[disabled] {
+  &:hover, &:active, &:focus, &[disabled], &.disabled {
     color: #fff;
     background-color: $orange-hoover-color;
   }
+
+  &[disabled], &.disabled {
+    cursor: default;
+  }
 }
 
 @mixin grey-button {
   background-color: $grey-color;
   color: #585858;
 
-  &:hover, &:active, &:focus, &[disabled] {
+  &:hover, &:active, &:focus, &[disabled], &.disabled {
     color: #585858;
     background-color: $grey-hoover-color;
   }
+
+  &[disabled], &.disabled {
+    cursor: default;
+  }
 }
 
 @mixin peertube-button {
@@ -72,3 +80,13 @@
   vertical-align: middle;
   cursor: pointer;
 }
+
+
+@mixin peertube-select ($width) {
+  background-color: #fff;
+  border: 1px solid #C6C6C6;
+  height: $button-height;
+  width: $width;
+  border-radius: 3px;
+  padding-left: 15px;
+}
-- 
2.25.1