now displaying a user profile (early stage)

src/app/components/stream/stream-overlay/stream-overlay.component.html

@@ -4,10 +4,10 @@
         <a href class="overlay-previous">PREV</a>
         <a href class="overlay-next">NEXT</a>
     </div>
-    <div class="stream-overlay__title">
+    <!-- <div class="stream-overlay__title">
         Account
-    </div>
+    </div> -->
-    <app-user-profile></app-user-profile>
+    <app-user-profile *ngIf="browseAccount" [currentAccount]="browseAccount"></app-user-profile>
-    <app-hashtag></app-hashtag>
+    <app-hashtag  *ngIf="browseHashtag"></app-hashtag>
-    <app-thread></app-thread>
+    <app-thread  *ngIf="browseThread"></app-thread>
 </div>

src/app/components/stream/stream-overlay/stream-overlay.component.scss

@@ -5,7 +5,7 @@
     // z-index: 50;
     width: $stream-column-width;
     height: calc(100%);
-    background-color: rgba(#ff0000, 0.3);
+    background-color: $column-color;
 
 
     // margin: 0 0 0 $stream-column-separator;

src/app/components/stream/stream-overlay/stream-overlay.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { Account } from "../../../services/models/mastodon.interfaces";
 
 @Component({
     selector: 'app-stream-overlay',
@@ -6,9 +7,36 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
     styleUrls: ['./stream-overlay.component.scss']
 })
 export class StreamOverlayComponent implements OnInit {
+    private account: Account;
+    private thread: string;
+    private hashtag: string;
 
     @Output() closeOverlay = new EventEmitter();
 
+    @Input('browseAccount') 
+    set browseAccount(account: Account) {
+        this.account = account;        
+    }
+    get browseAccount(): Account{
+        return this.account;
+    }
+
+    @Input('browseThread') 
+    set browseThread(thread: string) {
+        this.thread = thread;        
+    }
+    get browseThread(): string{
+        return this.thread;
+    }
+
+    @Input('browseHashtag') 
+    set browseHashtag(hashtag: string) {
+        this.hashtag = hashtag;        
+    }
+    get browseHashtag(): string{
+        return this.hashtag;
+    }
+
     constructor() { }
 
     ngOnInit() {

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

@@ -1,6 +1,7 @@
 <div class="stream-column">
 
-    <app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()"></app-stream-overlay>
+    <app-stream-overlay class="stream-overlay" *ngIf="overlayActive" 
+        (closeOverlay)="closeOverlay()" [browseAccount]="overlayAccountToBrowse"></app-stream-overlay>
 
     <div class="stream-column__stream-header">
         <a href title="return to top" (click)="goToTop()">

src/app/components/stream/user-profile/user-profile.component.html

@@ -1,3 +1,9 @@
-<p>
+<div class="profile-header">
-  user-profile works!
+    <img class="profile-header__header" src="{{account.header}}" alt="header" />
-</p>
+    <img class="profile-header__avatar" src="{{account.avatar}}" alt="header" />
+    <h2 class="profile-header__display-name">{{account.display_name}}</h2>
+    <h2 class="profile-header__fullhandle">@{{account.acct}}</h2>
+</div>
+<div class="profile-description" *ngIf="hasNote">
+    <p innerHTML="{{account.note}}"></p>
+</div>

src/app/components/stream/user-profile/user-profile.component.scss

@@ -0,0 +1,48 @@
+@import "variables";
+.profile-header {
+    position: relative;
+    height: 140px;
+    overflow: hidden; // background-color: black;
+    border-bottom: 1px solid black;
+    & h2 {
+        font-size: $default-font-size;        
+    }
+    &__header {
+        position: absolute;
+        // width: calc(100%);
+
+        width: calc(100%);
+        height: auto;
+
+        float: left;
+        display: block;
+        opacity: 0.3;        
+    }
+    &__avatar {
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        width: 80px;
+        border-radius: 50%; // border: 1px solid black;
+        // background-color: black;
+    }
+    &__display-name {
+        position: absolute;
+        top: 45px;
+        left: 115px;
+        // font-weight: bold;
+        color: white;
+    }
+    &__fullhandle {
+        position: absolute;
+        top: 105px;
+        left: 15px;
+        color: white;
+    }
+}
+
+.profile-description {
+    padding: 5px 10px 0 10px;
+    font-size: 13px;
+    border-bottom: 1px solid black;
+}

src/app/components/stream/user-profile/user-profile.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Account } from "../../../services/models/mastodon.interfaces";
 
 @Component({
     selector: 'app-user-profile',
@@ -6,6 +7,16 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./user-profile.component.scss']
 })
 export class UserProfileComponent implements OnInit {
+    account: Account;
+    hasNote: boolean;
+
+    @Input('currentAccount')
+    set currentAccount(account: Account) {
+        this.account = account;
+        this.hasNote = account && account.note && account.note !== '<p></p>';
+        console.warn('currentAccount');
+        console.warn(account);
+    }
 
     constructor() { }