From 81ae99cc7f4c306ff31ce3f341b1c586320b0576 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Tue, 23 Oct 2018 02:28:09 -0400
Subject: [PATCH] now displaying a user profile (early stage)

---
 .../stream-overlay.component.html             | 10 ++--
 .../stream-overlay.component.scss             |  2 +-
 .../stream-overlay.component.ts               | 30 +++++++++++-
 .../components/stream/stream.component.html   |  3 +-
 .../user-profile/user-profile.component.html  | 12 +++--
 .../user-profile/user-profile.component.scss  | 48 +++++++++++++++++++
 .../user-profile/user-profile.component.ts    | 25 +++++++---
 7 files changed, 112 insertions(+), 18 deletions(-)

diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.html b/src/app/components/stream/stream-overlay/stream-overlay.component.html
index 30b38128..3939df1c 100644
--- a/src/app/components/stream/stream-overlay/stream-overlay.component.html
+++ b/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>
-    <app-user-profile></app-user-profile>
-    <app-hashtag></app-hashtag>
-    <app-thread></app-thread>
+    </div> -->
+    <app-user-profile *ngIf="browseAccount" [currentAccount]="browseAccount"></app-user-profile>
+    <app-hashtag  *ngIf="browseHashtag"></app-hashtag>
+    <app-thread  *ngIf="browseThread"></app-thread>
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.scss b/src/app/components/stream/stream-overlay/stream-overlay.component.scss
index de67dac4..2a2b18e7 100644
--- a/src/app/components/stream/stream-overlay/stream-overlay.component.scss
+++ b/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;
diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.ts b/src/app/components/stream/stream-overlay/stream-overlay.component.ts
index 96a60374..2483427f 100644
--- a/src/app/components/stream/stream-overlay/stream-overlay.component.ts
+++ b/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() {
diff --git a/src/app/components/stream/stream.component.html b/src/app/components/stream/stream.component.html
index 8de2e18c..f08439cc 100644
--- a/src/app/components/stream/stream.component.html
+++ b/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()">
diff --git a/src/app/components/stream/user-profile/user-profile.component.html b/src/app/components/stream/user-profile/user-profile.component.html
index be0a6801..20c9f289 100644
--- a/src/app/components/stream/user-profile/user-profile.component.html
+++ b/src/app/components/stream/user-profile/user-profile.component.html
@@ -1,3 +1,9 @@
-<p>
-  user-profile works!
-</p>
+<div class="profile-header">
+    <img class="profile-header__header" src="{{account.header}}" alt="header" />
+    <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>
\ No newline at end of file
diff --git a/src/app/components/stream/user-profile/user-profile.component.scss b/src/app/components/stream/user-profile/user-profile.component.scss
index e69de29b..c3d4b91a 100644
--- a/src/app/components/stream/user-profile/user-profile.component.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/components/stream/user-profile/user-profile.component.ts b/src/app/components/stream/user-profile/user-profile.component.ts
index 2856d870..0c0bf024 100644
--- a/src/app/components/stream/user-profile/user-profile.component.ts
+++ b/src/app/components/stream/user-profile/user-profile.component.ts
@@ -1,15 +1,26 @@
-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',
-  templateUrl: './user-profile.component.html',
-  styleUrls: ['./user-profile.component.scss']
+    selector: 'app-user-profile',
+    templateUrl: './user-profile.component.html',
+    styleUrls: ['./user-profile.component.scss']
 })
 export class UserProfileComponent implements OnInit {
+    account: Account;
+    hasNote: boolean;
 
-  constructor() { }
+    @Input('currentAccount')
+    set currentAccount(account: Account) {
+        this.account = account;
+        this.hasNote = account && account.note && account.note !== '<p></p>';
+        console.warn('currentAccount');
+        console.warn(account);
+    }
 
-  ngOnInit() {
-  }
+    constructor() { }
+
+    ngOnInit() {
+    }
 
 }