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

added fields support in profile

This commit is contained in:
Nicolas Constant 2019-02-23 19:47:39 -05:00
parent 9be0c430be
commit 25316f6546
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 196 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,10 +33,21 @@
</div> </div>
<div class="profile-sub-header "> <div class="profile-sub-header ">
<div *ngIf="account && hasNote" class="profile-description"> <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" <app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="account.note"
(accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)"> (accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
</app-databinded-text> </app-databinded-text>
</div> </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"> <div class="profile-statuses">
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation> <app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>

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

@ -1,27 +1,25 @@
@import "variables"; @import "variables";
@import "mixins"; @import "mixins";
@import "commons"; @import "commons";
$validated-font-color: #4fde23;
$validated-background: #164109;
$header-height: 160px; $header-height: 160px;
.profile { .profile {
// overflow: auto; // overflow: auto;
height: calc(100%); height: calc(100%);
overflow: auto; overflow: auto;
&-header { &-header {
background-size: cover; background-size: cover;
position: relative; // height: 140px; position: relative; // height: 140px;
overflow: hidden; // background-color: black; overflow: hidden; // background-color: black;
border-bottom: 1px solid black; border-bottom: 1px solid black;
& h2 { & h2 {
font-size: $default-font-size; font-size: $default-font-size;
} }
&__inner { &__inner {
overflow: auto; overflow: auto;
height: $header-height; height: $header-height;
background-color: rgba(0, 0, 0, .45); background-color: rgba(0, 0, 0, .45);
} }
&__avatar { &__avatar {
position: absolute; position: absolute;
@ -34,19 +32,19 @@ $header-height: 160px;
position: absolute; position: absolute;
top: 105px; top: 105px;
left: 15px; left: 15px;
width: calc(100% - 30px); width: calc(100% - 30px);
overflow: hidden; overflow: hidden;
color: white; color: white;
} }
&__fullhandle a { &__fullhandle a {
position: absolute; position: absolute;
top: 130px; top: 130px;
left: 15px; left: 15px;
width: calc(100% - 30px); width: calc(100% - 30px);
overflow: hidden; overflow: hidden;
color: white; color: white;
} }
&__follow{ &__follow {
// transition: all .4s; // transition: all .4s;
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -55,15 +53,10 @@ $header-height: 160px;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
&--button {
&--button{
@include clearButton; @include clearButton;
} }
&--unfollowed {}
&--unfollowed {
}
&--followed { &--followed {
color: #38abff; color: #38abff;
color: #5fbcff; color: #5fbcff;
@ -75,38 +68,95 @@ $header-height: 160px;
top: 50px; top: 50px;
right: 15px; right: 15px;
font-size: 12px; font-size: 12px;
&--data {
&--data{ text-align: right;
text-align: right;
} }
} }
} }
&-sub-header { &-sub-header {
// overflow: auto; // overflow: auto;
// height: calc(100% - #{$header-height}); // height: calc(100% - #{$header-height});
// height: calc(100%); // height: calc(100%);
// height: calc(20% - 190px); // height: calc(20% - 190px);
// height: 150px; // height: 150px;
// border: 1px solid greenyellow; // border: 1px solid greenyellow;
} }
&-description { &-description {
padding: 10px 10px 15px 10px; padding: 10px 10px 15px 10px;
font-size: 13px; font-size: 13px;
border-bottom: 1px solid black; border-bottom: 1px solid black;
&__content { &__content {
width: calc(100%); width: calc(100%);
word-break: break-word; 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 { &-no-toots {
text-align: center; text-align: center;
margin: 15px; margin: 15px;
border: 2px solid whitesmoke; 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;
}
} }

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

@ -62,7 +62,6 @@ export class UserProfileComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => { this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
if (this.account) { if (this.account) {
//this.relationship = null;
this.currentlyUsedAccount = accounts.filter(x => x.isSelected)[0]; this.currentlyUsedAccount = accounts.filter(x => x.isSelected)[0];
this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName) this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
@ -91,6 +90,9 @@ export class UserProfileComponent implements OnInit {
return this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName) return this.toolsService.findAccount(this.currentlyUsedAccount, this.lastAccountName)
.then((account: Account) => { .then((account: Account) => {
console.warn(account);
this.isLoading = false; this.isLoading = false;
this.statusLoading = true; this.statusLoading = true;

195
src/app/services/models/mastodon.interfaces.ts
View File

@ -1,136 +1,153 @@
export interface AppData { export interface AppData {
client_id: string; client_id: string;
client_secret: string; client_secret: string;
id: string; id: string;
name: string; name: string;
redirect_uri: string; redirect_uri: string;
website: string; website: string;
} }
export interface TokenData { export interface TokenData {
access_token: string; access_token: string;
token_type: string; token_type: string;
scope: string; scope: string;
created_at: string; created_at: string;
} }
export interface Account { export interface Account {
id: number; id: number;
username: string; username: string;
acct: string; acct: string;
display_name: string; display_name: string;
locked: string; locked: string;
created_at: string; created_at: string;
followers_count: number; followers_count: number;
following_count: number; following_count: number;
statuses_count: number; statuses_count: number;
note: string; note: string;
url: string; url: string;
avatar: string; avatar: string;
avatar_static: string; avatar_static: string;
header: string; header: string;
header_static: 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 { export interface Application {
name: string; name: string;
website: string; website: string;
} }
export interface Attachment { export interface Attachment {
id: string; id: string;
type: 'image' | 'video' | 'gifv'; type: 'image' | 'video' | 'gifv';
url: string; url: string;
remote_url: string; remote_url: string;
preview_url: string; preview_url: string;
text_url: string; text_url: string;
} }
export interface Card { export interface Card {
url: string; url: string;
title: string; title: string;
description: string; description: string;
image: string; image: string;
} }
export interface Context { export interface Context {
ancestors: Status[]; ancestors: Status[];
descendants: Status[]; descendants: Status[];
} }
export interface Error { export interface Error {
error: string; error: string;
} }
export interface Instance { export interface Instance {
uri: string; uri: string;
title: string; title: string;
description: string; description: string;
email: string; email: string;
} }
export interface Mention { export interface Mention {
url: string; url: string;
username: string; username: string;
acct: string; acct: string;
id: string; id: string;
} }
export interface Notification { export interface Notification {
id: string; id: string;
type: 'mention' | 'reblog' | 'favourite' | 'follow'; type: 'mention' | 'reblog' | 'favourite' | 'follow';
created_at: string; created_at: string;
account: Account; account: Account;
status?: Status; status?: Status;
} }
export interface Relationship { export interface Relationship {
id: number; id: number;
following: boolean; following: boolean;
followed_by: boolean; followed_by: boolean;
blocking: boolean; blocking: boolean;
muting: boolean; muting: boolean;
requested: boolean; requested: boolean;
} }
export interface Report { export interface Report {
id: string; id: string;
action_taken: boolean; action_taken: boolean;
} }
export interface Results { export interface Results {
accounts: Account[]; accounts: Account[];
statuses: Status[]; statuses: Status[];
hashtags: string[]; hashtags: string[];
} }
export interface Status { export interface Status {
id: string; id: string;
uri: string; uri: string;
url: string; url: string;
account: Account; account: Account;
in_reply_to_id: string; in_reply_to_id: string;
in_reply_to_account_id: string; in_reply_to_account_id: string;
reblog: Status; reblog: Status;
content: string; content: string;
created_at: string; created_at: string;
reblogs_count: string; reblogs_count: string;
favourites_count: string; favourites_count: string;
reblogged: boolean; reblogged: boolean;
favourited: boolean; favourited: boolean;
sensitive: boolean; sensitive: boolean;
spoiler_text: string; spoiler_text: string;
visibility: string; visibility: string;
media_attachments: Attachment[]; media_attachments: Attachment[];
mentions: Mention[]; mentions: Mention[];
tags: Tag[]; tags: Tag[];
application: Application; application: Application;
emojis: any[]; emojis: any[];
language: string; language: string;
pinned: boolean; pinned: boolean;
} }
export interface Tag { export interface Tag {
name: string; name: string;
url: string; url: string;
} }