From 205e4f56f3da1f787f1bc2cdfcc39948a99a16b1 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 15 Apr 2021 15:31:03 +0200
Subject: Refactor feed component

---
 .../video-comment-list.component.scss              | 16 ++++-----------
 .../comment/video-comments.component.scss          |  4 ++++
 .../+video-watch/video-watch.component.scss        |  5 -----
 .../shared/shared-main/feeds/feed.component.scss   | 14 ++++++-------
 .../abstract-video-list.html                       |  1 +
 .../abstract-video-list.scss                       | 24 +++-------------------
 client/src/sass/include/_mixins.scss               |  2 +-
 7 files changed, 19 insertions(+), 47 deletions(-)

(limited to 'client/src')

diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
index d208944fe..c9262da09 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
@@ -1,17 +1,9 @@
 @import 'mixins';
 
-h1 {
-  my-feed {
-    margin-left: 5px;
-    display: inline-block;
-
-    ::ng-deep {
-      my-global-icon {
-        width: 15px !important;
-        top: 0 !important;
-      }
-    }
-  }
+my-feed {
+  margin-left: 5px;
+  display: inline-block;
+  width: 15px;
 }
 
 my-global-icon {
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
index df42fae73..e6778e1a9 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
@@ -27,7 +27,11 @@
     margin-left: 5px;
     opacity: 0;
     transition: ease-in .2s opacity;
+    width: 12px;
+    position: relative;
+    top: -3px;
   }
+
   &:hover my-feed {
     opacity: 1;
   }
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 8f70652ee..e8ad10a11 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -206,11 +206,6 @@ $video-info-margin-left: 44px;
         }
       }
 
-      my-feed {
-        margin-left: 5px;
-        margin-top: 1px;
-      }
-
       .video-actions-rates {
         margin: 0 0 10px 0;
         align-items: start;
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
index 333d59440..b655ee708 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -2,19 +2,17 @@
 @import '_mixins';
 
 .feed {
-  width: min-content;
+  width: 100%;
 
   a {
     color: black;
     display: block;
   }
+}
 
-  my-global-icon {
-    cursor: pointer;
-    width: 12px;
-    position: relative;
-    top: -2px;
+my-global-icon {
+  cursor: pointer;
+  width: 100%;
 
-    @include apply-svg-color(pvar(--mainForegroundColor))
-  }
+  @include apply-svg-color(pvar(--mainForegroundColor))
 }
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index ee5df28be..9ffeac5e8 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -4,6 +4,7 @@
 
     <div class="action-block">
       <my-feed *ngIf="syndicationItems" [syndicationItems]="syndicationItems"></my-feed>
+
       <ng-container *ngFor="let action of actions">
         <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 6570b63d0..467ca1d2c 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -15,18 +15,9 @@ $iconSize: 16px;
   justify-content: space-between;
   align-items: center;
 
-  .action-block {
-    ::ng-deep my-feed {
-      my-global-icon {
-        width: calc(#{$iconSize} - 2px);
-      }
-    }
-
-    a button {
-      @include peertube-button;
-      @include grey-button;
-      @include button-with-icon($iconSize, 3px, -1px);
-    }
+  my-feed {
+    display: inline-block;
+    width: calc(#{$iconSize} - 2px);
   }
 
   .moderation-block {
@@ -34,21 +25,12 @@ $iconSize: 16px;
     my-global-icon {
       position: relative;
       width: $iconSize;
-      top: -2px;
     }
 
     margin-left: .4rem;
     display: flex;
     justify-content: flex-end;
     align-items: center;
-
-    .dropdown-item {
-      padding: 0;
-
-      ::ng-deep my-peertube-checkbox label {
-        padding: 3px 15px;
-      }
-    }
   }
 }
 
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 73606f940..e03201cef 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -914,7 +914,7 @@
     padding-bottom: 15px;
     margin-bottom: $sub-menu-margin-bottom;
 
-    my-global-icon {
+    > my-global-icon {
       margin-right: 10px;
       vertical-align: bottom;
       width: 24px;
-- 
cgit v1.2.3