Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added follow related icons and informations

This commit is contained in:
Nicolas Constant 2019-02-22 00:49:32 -05:00
parent 6637489bae
commit 29a42fcb1d
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 87 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/app/components/stream/user-profile/user-profile.component.html
View File

@ -1,20 +1,40 @@
<div class="profile ">
<div class="profile flexcroll">
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
<div class="profile-sub-header flexcroll">
<div *ngIf="account" class="profile-header" [ngStyle]="{'background-image':'url('+account.header+')'}">
<div class="profile-header__inner">
<!-- <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"><a href="{{account.url}}" target="_blank">@{{account.acct}}</a></h2>
</div>
</div>
<div *ngIf="account" class="profile-header" [ngStyle]="{'background-image':'url('+account.header+')'}">
<div class="profile-header__inner">
<!-- <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"><a href="{{account.url}}" target="_blank">@{{account.acct}}</a></h2>
<div class="profile-header__follow">
<button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
(click)="folow()">
<fa-icon [icon]="faUserRegular"></fa-icon>
</button>
<button class="profile-header__follow--button profile-header__follow--followed" title="unfollow"
(click)="unfolow()">
<fa-icon [icon]="faUserCheck"></fa-icon>
</button>
<button class="profile-header__follow--button profile-header__follow--followed" title="pending"
(click)="unfolow()">
<fa-icon [icon]="faHourglassHalf"></fa-icon>
</button>
</div>
<div class="profile-header__state">
<div class="profile-header__state--data">follows you</div>
<div class="profile-header__state--data">blocked</div>
</div>
</div>
</div>
<div class="profile-sub-header ">
<div *ngIf="account && hasNote" class="profile-description">
<app-databinded-text class="status__content" [textIsSelectable]="false" [text]="account.note"
(accountSelected)="browseAccount($event)"
(hashtagSelected)="browseHashtag($event)"></app-databinded-text>
(accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
</app-databinded-text>
<!-- <p innerHTML="{{account.note}}"></p> -->
</div>
<div class="profile-statuses">
@ -25,10 +45,9 @@
</div>
<div *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper"
(browseHashtagEvent)="browseHashtag($event)"
(browseAccountEvent)="browseAccount($event)"
(browseThreadEvent)="browseThread($event)"></app-status>
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
</app-status>
</div>
</div>
</div>

50
src/app/components/stream/user-profile/user-profile.component.scss
View File

@ -1,4 +1,5 @@
@import "variables";
@import "mixins";
@import "commons";
$header-height: 160px;
@ -6,19 +7,21 @@ $header-height: 160px;
.profile {
// overflow: auto;
height: calc(100%);
overflow: auto;
&-header {
background-size: cover;
position: relative; // height: 140px;
overflow: hidden; // background-color: black;
border-bottom: 1px solid black;
& h2 {
font-size: $default-font-size;
}
&__inner {
overflow: auto;
height: $header-height;
background-color: rgba(0, 0, 0, .45);
background-color: rgba(0, 0, 0, .45);
}
&__avatar {
position: absolute;
@ -31,20 +34,59 @@ $header-height: 160px;
position: absolute;
top: 105px;
left: 15px;
width: calc(100% - 30px);
overflow: hidden;
color: white;
}
&__fullhandle a {
position: absolute;
top: 130px;
left: 15px;
width: calc(100% - 30px);
overflow: hidden;
color: white;
}
&__follow{
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
&--button{
@include clearButton;
}
&--unfollowed {
}
&--followed {
color: #38abff;
color: #5fbcff;
color: #85ccff;
}
}
&__state {
position: absolute;
top: 50px;
right: 15px;
font-size: 12px;
&--data{
text-align: right;
}
}
}
&-sub-header {
overflow: auto;
height: calc(100% - #{$header-height});
height: calc(100%);
// overflow: auto;
// height: calc(100% - #{$header-height});
// height: calc(100%);
// height: calc(20% - 190px);
// height: 150px;
// border: 1px solid greenyellow;

6
src/app/components/stream/user-profile/user-profile.component.ts
View File

@ -1,5 +1,7 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { faUser, faHourglassHalf, faUserCheck } from "@fortawesome/free-solid-svg-icons";
import { faUser as faUserRegular } from "@fortawesome/free-regular-svg-icons";
import { Account, Status } from "../../../services/models/mastodon.interfaces";
import { MastodonService } from '../../../services/mastodon.service';
@ -13,6 +15,10 @@ import { NotificationService } from '../../../services/notification.service';
styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {
faUser = faUser;
faUserRegular = faUserRegular;
faHourglassHalf = faHourglassHalf;
faUserCheck = faUserCheck;
account: Account;
hasNote: boolean;