displaying reblogs

src/app/components/stream/status/status.component.html

@@ -1,11 +1,24 @@
+<div class="reblog" *ngIf="reblog">
+    <a class="reblog__profile-link" href>{{ status.account.display_name }} <img *ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
+</div>
 <div class="status">
-    <a href class="status__profile-link" title="{{status.account.acct}}">
-        <img class="status__avatar" src="{{ status.account.avatar }}" />
+
+    <a href class="status__profile-link" title="{{displayedStatus.account.acct}}">
+        <img [class.status__avatar--boosted]="reblog" class="status__avatar" src="{{ displayedStatus.account.avatar }}" />
+        <!-- <img *ngIf="reblog" class="status__avatar--reblog" src="{{ status.account.avatar }}" /> -->
         <span class="status__name">
-            <span class="status__name--displayname" innerHTML="{{status.account.display_name}}"></span><span class="status__name--username">{{status.account.acct}}</span>
+            <span class="status__name--displayname" innerHTML="{{displayedStatus.account.display_name}}"></span><span
+                class="status__name--username">{{status.account.acct}}</span>
         </span>
     </a>
-    <div class="status__created-at" title="{{ status.created_at | date: 'full' }}">{{
+    <div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">{{
         getCompactRelativeTime(status.created_at) }}</div>
-    <div class="status__content" innerHTML="{{status.content}}"></div>
+    <div class="status__content" innerHTML="{{displayedStatus.content}}"></div>
+
+    <!-- <div class="status_galery">
+        <p>
+            status.reblog: {{status.reblog}} <br />
+            status.media_attachments: {{status.media_attachments}}
+        </p>
+    </div> -->
 </div>

src/app/components/stream/status/status.component.scss

@@ -1,4 +1,33 @@
 @import "variables";
+.reblog {
+    position: relative;
+    margin: 5px 0 0 10px;
+    font-size: 12px;
+    color: $status-secondary-color;
+
+    &__profile-link {
+        color: $status-secondary-color;
+        // margin: 7px 0 0 70px;
+        // display: block;
+        text-decoration: none;
+        // overflow: hidden;
+
+        &:hover {
+            color: lighten($status-secondary-color, 20);
+        }
+    }
+
+    &__avatar{
+        position: absolute;
+        top: 50px;
+        left: 20px; 
+        width: 30px;
+        height: 30px;
+        border-radius: 2px;
+        z-index: 10;
+    }
+}
+
 .status {
     margin: 0;
     padding: 0;
@@ -14,35 +43,41 @@
         width: 50px;
         height: 50px; // float: left;
         border-radius: 2px;
+
+        &--boosted{
+            position: absolute;
+            top: 10px;
+            left: 10px; 
+            width: 40px;
+            height: 40px;
+            border-radius: 2px;
+        }       
     }
-    &__name{
+    &__name {
         display: inline-block;
         width: calc(100% - 40px);
         white-space: nowrap;
-        overflow: hidden;
-
-        // border: 1px dotted greenyellow;
-
+        overflow: hidden; // border: 1px dotted greenyellow;
         &--displayname {
             display: inline-block;
             color: $status-primary-color;
         }
-
         &--username {
             display: inline-block;
-            margin-left: 5px;
-            // position: relative;
+            margin-left: 5px; // position: relative;
             // top: 1px;
         }
     }
-
-    
     &__profile-link {
         color: $status-secondary-color;
         margin: 7px 0 0 70px;
         display: block;
         text-decoration: none;
         overflow: hidden;
+
+        &:hover {
+            color: lighten($status-secondary-color, 20);
+        }
     }
     &__content {
         /*width: calc(100% - 50px);*/

src/app/components/stream/status/status.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Inject, LOCALE_ID } from "@angular/core";
 import { Status } from "../../../services/models/mastodon.interfaces";
 import { formatDate } from '@angular/common';
+import { stateNameErrorMessage } from "@ngxs/store/src/decorators/state";
 
 
 @Component({
@@ -9,11 +10,35 @@ import { formatDate } from '@angular/common';
     styleUrls: ["./status.component.scss"]
 })
 export class StatusComponent implements OnInit {
-    @Input() status: Status;
+    displayedStatus: Status;
+    reblog: boolean;
+
+    private _status: Status;
+    @Input('status')
+    set status(value: Status) {
+        this._status = value;
+
+        if(this.status.reblog){
+            this.reblog = true;
+            this.displayedStatus = this._status.reblog;
+        } else {
+            this.displayedStatus = this._status;
+        }
+        
+        if(!this.displayedStatus.account.display_name){
+            this.displayedStatus.account.display_name = this.displayedStatus.account.username;
+        }
+
+        
+    }   
+    get status(): Status{
+        return this._status;
+    }
+   
 
     constructor(@Inject(LOCALE_ID) private locale: string) { }
 
-    ngOnInit() {
+    ngOnInit() {        
     }
 
     getCompactRelativeTime(d: string): string {

src/app/services/models/mastodon.interfaces.ts

@@ -111,7 +111,7 @@ export interface Status {
   account: Account;
   in_reply_to_id: string;
   in_reply_to_account_id: string;
-  reblog: string;
+  reblog: Status;
   content: string;
   created_at: string;
   reblogs_count: string;
@@ -121,7 +121,7 @@ export interface Status {
   sensitive: string;
   spoiler_text: string;
   visibility: string;
-  media_attachments: string;
+  media_attachments: Attachment[];
   mentions: string;
   tags: string;
   application: Application;

src/sass/_variables.scss

@@ -1,23 +1,25 @@
 $font-color-primary: #e8eaf3;
 $font-color-secondary: darken(#fff, 25);
-
 $font-link-primary: #595c67;
 $font-link-primary-hover: #8f93a2;
-
 $color-primary: #141824;
 $color-secondary: #090b10;
-
 $default-font-size: 15px;
 $small-font-size: 12px;
-
+// TEST 1
 $status-primary-color: #fff;
 $status-secondary-color: #353e64;
 $status-secondary-color: #4e5572;
 $status-links-color: #d9e1e8;
 
 
+
+// $status-primary-color : #8f93a2;
+// $status-primary-color :   lighten(#8f93a2, 30);
+// $status-links-color : #b2ccd6;
+
+
 // Block dispositions
 $stream-selector-height: 30px;
-
 $stream-column-separator: 7px;
 $stream-column-width: 320px;