added fields support in profile
This commit is contained in:
Nicolas Constant
parent
9be0c430be
commit
25316f6546
|
|
@ -33,10 +33,21 @@
|
|||
</div>
|
||||
<div class="profile-sub-header ">
|
||||
<div *ngIf="account && hasNote" class="profile-description">
|
||||
<!-- <div *ngIf="account && account.note" class="profile-description"> -->
|
||||
<app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="account.note"
|
||||
(accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
|
||||
</app-databinded-text>
|
||||
</div>
|
||||
<div class="profile-fields" *ngIf="account && account.fields.length > 0">
|
||||
<div class="profile-fields__field" *ngFor="let field of account.fields">
|
||||
<div class="profile-fields__field--value" innerHTML="{{field.value}}" [ngClass]="{'profile-fields__field--validated': field.verified_at }">
|
||||
</div>
|
||||
<div class="profile-fields__field--name">
|
||||
{{ field.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-statuses">
|
||||
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "commons";
|
||||
|
||||
$validated-font-color: #4fde23;
|
||||
$validated-background: #164109;
|
||||
$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;
|
||||
}
|
||||
|
|
@ -46,7 +44,7 @@ $header-height: 160px;
|
|||
overflow: hidden;
|
||||
color: white;
|
||||
}
|
||||
&__follow{
|
||||
&__follow {
|
||||
// transition: all .4s;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
|
@ -55,15 +53,10 @@ $header-height: 160px;
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
&--button{
|
||||
&--button {
|
||||
@include clearButton;
|
||||
}
|
||||
|
||||
&--unfollowed {
|
||||
|
||||
}
|
||||
|
||||
&--unfollowed {}
|
||||
&--followed {
|
||||
color: #38abff;
|
||||
color: #5fbcff;
|
||||
|
|
@ -75,38 +68,95 @@ $header-height: 160px;
|
|||
top: 50px;
|
||||
right: 15px;
|
||||
font-size: 12px;
|
||||
|
||||
&--data{
|
||||
&--data {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-sub-header {
|
||||
// overflow: auto;
|
||||
// height: calc(100% - #{$header-height});
|
||||
|
||||
// height: calc(100%);
|
||||
// height: calc(20% - 190px);
|
||||
// height: 150px;
|
||||
// border: 1px solid greenyellow;
|
||||
}
|
||||
|
||||
&-description {
|
||||
padding: 10px 10px 15px 10px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid black;
|
||||
|
||||
&__content {
|
||||
width: calc(100%);
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&-fields {
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid black;
|
||||
&__field {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
&--name {
|
||||
padding: 10px;
|
||||
border-right: 1px solid black;
|
||||
text-align: center;
|
||||
width: calc(33%);
|
||||
background-color: #0b0d13;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
&--value {
|
||||
padding: 10px;
|
||||
width: calc(66%);
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&--validated {
|
||||
background-color: $validated-background;
|
||||
// border: 1px solid $validated-font-color;
|
||||
}
|
||||
}
|
||||
@include clearfix;
|
||||
}
|
||||
&-no-toots {
|
||||
text-align: center;
|
||||
margin: 15px;
|
||||
border: 2px solid whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
//Mastodon styling
|
||||
:host ::ng-deep .profile-fields__field--value {
|
||||
// font-size: 14px;
|
||||
color: $status-primary-color;
|
||||
& a,
|
||||
.mention,
|
||||
.ellipsis {
|
||||
color: $status-links-color;
|
||||
}
|
||||
& .invisible {
|
||||
display: none;
|
||||
}
|
||||
& p {
|
||||
margin: 0px; //font-size: .9em;
|
||||
// font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .profile-fields__field--validated {
|
||||
// font-size: 14px;
|
||||
color: $validated-font-color;
|
||||
& a,
|
||||
.mention,
|
||||
.ellipsis {
|
||||
color: $validated-font-color;
|
||||
}
|
||||
& .invisible {
|
||||
display: none;
|
||||
}
|
||||
& p {
|
||||
margin: 0px; //font-size: .9em;
|
||||
// font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -62,7 +62,6 @@ export class UserProfileComponent implements OnInit {
|
|||
ngOnInit() {
|
||||
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
|
||||
if (this.account) {
|
||||
//this.relationship = null;
|
||||
this.currentlyUsedAccount = accounts.filter(x => x.isSelected)[0];
|
||||
|
||||
this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
|
||||
|
|
@ -91,6 +90,9 @@ export class UserProfileComponent implements OnInit {
|
|||
|
||||
return this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
|
||||
.then((account: Account) => {
|
||||
|
||||
console.warn(account);
|
||||
|
||||
this.isLoading = false;
|
||||
this.statusLoading = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,23 @@ export interface Account {
|
|||
avatar_static: string;
|
||||
header: string;
|
||||
header_static: string;
|
||||
emojis: Emoji[];
|
||||
moved: boolean;
|
||||
fields: Field[];
|
||||
bot: boolean;
|
||||
}
|
||||
|
||||
export interface Emoji {
|
||||
shortcode: string;
|
||||
static_url: string;
|
||||
url: string;
|
||||
visible_in_picker: boolean;
|
||||
}
|
||||
|
||||
export interface Field {
|
||||
name: string;
|
||||
value: string;
|
||||
verified_at: string;
|
||||
}
|
||||
|
||||
export interface Application {
|
||||
|
|
|
|||
Loading…
Reference in New Issue