now displaying a user profile (early stage)

This commit is contained in:
Nicolas Constant 2018-10-23 02:28:09 -04:00
parent b175137149
commit 81ae99cc7f
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
7 changed files with 112 additions and 18 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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() {

View File

@ -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()">

View File

@ -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>

View File

@ -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;
}

View File

@ -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() {
}
}