Design account videos

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 6c8ac45081e8a60dbe12d06a9b194f63d7cf4415..94b976869f98f862804ec67c9dc26bc54f571ced 100644 (file)
--- 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..b26933d223b678285dfa60a0a65281ca2a7362dd 100644 (file)
--- 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 1baffa5c8e7653e24b05e7cf71d1e3e37da52dde..97c5d461a65db188e4b38c52cef623e3b938bbce 100644 (file)
--- 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 5d6fd61c640a7cf92a1778b5782cd6cfb8e10c85..c93c59622e18c294d5f035e30381bff97f82aea6 100644 (file)
--- 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 191d3d597167bb7e0b6d3eb63d146f6923fa0fdf..7ba8ef26cf174f2574c124c22d4f072ad7bc401f 100644 (file)
--- 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 83990d8b84d8714df2d97e676433f217b8ae6af3..220362ef0200ad89b622ad5f5ce9b646359a90ca 100644 (file)
--- 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 (file)
index 0000000..23ece68
--- /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