Design account videos

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>

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;
+    }
+  }
+}

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;
       }

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');
         }
       }
     }

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;

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'
   }
 }

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>