From d2cc03aaad62fa6cf1c64622229bcc83f24fccb6 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Mon, 4 Dec 2017 11:04:08 +0100
Subject: [PATCH] Design account videos

---
 .../account-videos.component.html             |  12 ++++-
 .../account-videos.component.scss             |  44 ++++++++++++++++++
 client/src/app/app.component.scss             |   4 +-
 client/src/app/menu/menu.component.scss       |   6 +--
 .../app/shared/search/search.component.scss   |   4 +-
 client/src/app/shared/users/user.model.ts     |   2 +-
 client/src/assets/images/account/edit.svg     |  15 ++++++
 .../assets/{ => images}/default-avatar.png    | Bin
 client/src/assets/{ => images}/favicon.png    | Bin
 .../src/assets/{ => images}/header/menu.svg   |   0
 .../src/assets/{ => images}/header/search.svg |   0
 .../src/assets/{ => images}/header/upload.svg |   0
 client/src/assets/{ => images}/logo.svg       |   0
 .../{ => images}/menu/administration.svg      |   0
 .../{ => images}/menu/recently-added.svg      |   0
 .../src/assets/{ => images}/menu/trending.svg |   0
 16 files changed, 78 insertions(+), 9 deletions(-)
 create mode 100644 client/src/assets/images/account/edit.svg
 rename client/src/assets/{ => images}/default-avatar.png (100%)
 rename client/src/assets/{ => images}/favicon.png (100%)
 rename client/src/assets/{ => images}/header/menu.svg (100%)
 rename client/src/assets/{ => images}/header/search.svg (100%)
 rename client/src/assets/{ => images}/header/upload.svg (100%)
 rename client/src/assets/{ => images}/logo.svg (100%)
 rename client/src/assets/{ => images}/menu/administration.svg (100%)
 rename client/src/assets/{ => images}/menu/recently-added.svg (100%)
 rename client/src/assets/{ => images}/menu/trending.svg (100%)

diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
index 6c8ac4508..94b976869 100644
--- a/client/src/app/account/account-videos/account-videos.component.html
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -3,7 +3,17 @@
   [infiniteScrollDistance]="0.5"
   (scrolled)="onNearOfBottom()"
 >
-  <div *ngFor="let video of videos">
+  <div class="video" *ngFor="let video of videos">
     <my-video-thumbnail [video]="video"></my-video-thumbnail>
+
+    <div class="video-info">
+      <div class="video-info-name">{{ video.name }}</div>
+      <span class="video-info-date-views">{{ video.createdAt | fromNow }} - {{ video.views | numberFormatter }} views</span>
+    </div>
+
+    <a class="edit-button" [routerLink]="[ '/videos', video.id, '/edit' ]">
+      <span class="icon icon-edit"></span>
+      Edit
+    </a>
   </div>
 </div>
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 e69de29bb..b26933d22 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -0,0 +1,44 @@
+.video {
+  display: flex;
+  height: 130px;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #C6C6C6;
+
+  my-video-thumbnail {
+    margin-right: 10px;
+  }
+
+  .video-info {
+    flex-grow: 1;
+
+    .video-info-name {
+      font-size: 16px;
+      font-weight: $font-semibold;
+    }
+
+    .video-info-date-views {
+      font-size: 13px;
+    }
+  }
+
+  .edit-button {
+    @include peertube-button-link;
+
+    font-size: 15px;
+    font-weight: $font-semibold;
+    color: #585858;
+    background-color: #E5E5E5;
+
+    .icon.icon-edit {
+      display: inline-block;
+      background: url('../../../assets/images/account/edit.svg') no-repeat;
+      background-size: contain;
+      width: 21px;
+      height: 21px;
+      vertical-align: middle;
+      position: relative;
+      top: -2px;
+    }
+  }
+}
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 1baffa5c8..97c5d461a 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -42,7 +42,7 @@
       background-size: contain;
 
       &.icon-menu {
-        background-image: url('../assets/header/menu.svg');
+        background-image: url('../assets/images/header/menu.svg');
         margin: 0 18px 0 24px;
       }
     }
@@ -58,7 +58,7 @@
 
       .icon.icon-logo {
         display: inline-block;
-        background: url('../assets/logo.svg') no-repeat;
+        background: url('../assets/images/logo.svg') no-repeat;
         width: 20px;
         height: 24px;
       }
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 5d6fd61c6..c93c59622 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -116,7 +116,7 @@ menu {
         &.icon-videos-trending {
           position: relative;
           top: -2px;
-          background-image: url('../../assets/menu/trending.svg');
+          background-image: url('../../assets/images/menu/trending.svg');
         }
 
         &.icon-videos-recently-added {
@@ -124,14 +124,14 @@ menu {
           height: 23px;
           position: relative;
           top: -1px;
-          background-image: url('../../assets/menu/recently-added.svg');
+          background-image: url('../../assets/images/menu/recently-added.svg');
         }
 
         &.icon-administration {
           width: 23px;
           height: 23px;
 
-          background-image: url('../../assets/menu/administration.svg');
+          background-image: url('../../assets/images/menu/administration.svg');
         }
       }
     }
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
index 191d3d597..7ba8ef26c 100644
--- a/client/src/app/shared/search/search.component.scss
+++ b/client/src/app/shared/search/search.component.scss
@@ -10,7 +10,7 @@
 
 .icon.icon-search {
   display: inline-block;
-  background: url('../../../assets/header/search.svg') no-repeat;
+  background: url('../../../assets/images/header/search.svg') no-repeat;
   background-size: contain;
   width: 25px;
   height: 21px;
@@ -29,7 +29,7 @@
 
   .icon.icon-upload {
     display: inline-block;
-    background: url('../../../assets/header/upload.svg') no-repeat;
+    background: url('../../../assets/images/header/upload.svg') no-repeat;
     background-size: contain;
     width: 22px;
     height: 24px;
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 83990d8b8..220362ef0 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -54,6 +54,6 @@ export class User implements UserServerModel {
   getAvatarPath () {
     if (this.account && this.account.avatar) return this.account.avatar.path
 
-    return '/assets/default-avatar.png'
+    return '/assets/images/default-avatar.png'
   }
 }
diff --git a/client/src/assets/images/account/edit.svg b/client/src/assets/images/account/edit.svg
new file mode 100644
index 000000000..23ece68f1
--- /dev/null
+++ b/client/src/assets/images/account/edit.svg
@@ -0,0 +1,15 @@
+<?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>edit</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-48.000000, -203.000000)" stroke="#585858" stroke-width="2">
+            <g id="41" transform="translate(48.000000, 203.000000)">
+                <path d="M3,21.0000003 L3,17 L15.8898356,4.11016442 C17.0598483,2.9401517 18.9638992,2.94723715 20.1306896,4.11402752 L19.9181432,3.90148112 C21.0902894,5.07362738 21.0882407,6.97202708 19.9174652,8.1377941 L7,21.0000003 L3,21.0000003 Z" id="Path-74" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M14.5,5.5 L18.5,9.5" id="Path-75"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/default-avatar.png b/client/src/assets/images/default-avatar.png
similarity index 100%
rename from client/src/assets/default-avatar.png
rename to client/src/assets/images/default-avatar.png
diff --git a/client/src/assets/favicon.png b/client/src/assets/images/favicon.png
similarity index 100%
rename from client/src/assets/favicon.png
rename to client/src/assets/images/favicon.png
diff --git a/client/src/assets/header/menu.svg b/client/src/assets/images/header/menu.svg
similarity index 100%
rename from client/src/assets/header/menu.svg
rename to client/src/assets/images/header/menu.svg
diff --git a/client/src/assets/header/search.svg b/client/src/assets/images/header/search.svg
similarity index 100%
rename from client/src/assets/header/search.svg
rename to client/src/assets/images/header/search.svg
diff --git a/client/src/assets/header/upload.svg b/client/src/assets/images/header/upload.svg
similarity index 100%
rename from client/src/assets/header/upload.svg
rename to client/src/assets/images/header/upload.svg
diff --git a/client/src/assets/logo.svg b/client/src/assets/images/logo.svg
similarity index 100%
rename from client/src/assets/logo.svg
rename to client/src/assets/images/logo.svg
diff --git a/client/src/assets/menu/administration.svg b/client/src/assets/images/menu/administration.svg
similarity index 100%
rename from client/src/assets/menu/administration.svg
rename to client/src/assets/images/menu/administration.svg
diff --git a/client/src/assets/menu/recently-added.svg b/client/src/assets/images/menu/recently-added.svg
similarity index 100%
rename from client/src/assets/menu/recently-added.svg
rename to client/src/assets/images/menu/recently-added.svg
diff --git a/client/src/assets/menu/trending.svg b/client/src/assets/images/menu/trending.svg
similarity index 100%
rename from client/src/assets/menu/trending.svg
rename to client/src/assets/images/menu/trending.svg
-- 
2.41.0