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

migration of my-account to its component

This commit is contained in:
Nicolas Constant 2019-03-19 23:13:50 -04:00
parent a41f1051e5
commit d99976f0a7
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
7 changed files with 110 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/components/floating-column/manage-account/manage-account.component.html
View File

@ -31,30 +31,7 @@
<app-direct-messages class="account__body" *ngIf="subPanel === 'dm'"></app-direct-messages>
<app-favorites class="account__body" *ngIf="subPanel === 'favorites'"></app-favorites>
<app-mentions class="account__body" *ngIf="subPanel === 'mentions'"></app-mentions>
<app-my-account class="account__body" *ngIf="subPanel === 'account'"></app-my-account>
<app-my-account class="account__body" *ngIf="subPanel === 'account'" [account]="account">
</app-my-account>
<app-notifications class="account__body" *ngIf="subPanel === 'notifications'"></app-notifications>
<!-- <div class="account__body flexcroll">
<h4 class="account__label">add column:</h4>
<a class="account__link account__blue" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
{{ stream.name }}
</a> -->
<!-- <a class="add-column__link" href>
Global Timeline
</a>
<a class="add-column__link" href>
Personnal Timeline
</a>
<a class="add-column__link" href>
Lists, Favs, Activitires, etc
</a> -->
<!--
<h4 class="account__label account__margin-top">remove account from sengi:</h4>
<a class="account__link account__red" href (click)="removeAccount()">
Delete
</a>
</div> -->
</div>

5
src/app/components/floating-column/manage-account/manage-account.component.scss
View File

@ -58,9 +58,8 @@ $account-header-height: 60px;
&__body {
overflow: auto;
height: calc(100% - #{$account-header-height} - 31px);
padding-left: 10px;
padding-right: 10px; // outline: 1px solid red;
font-size: $default-font-size;
display: block;
// border: 1px red solid;
}
&__label {
// text-decoration: underline;

38
src/app/components/floating-column/manage-account/manage-account.component.ts
View File

@ -1,13 +1,8 @@
import { Component, OnInit, Input } from '@angular/core';
import { Store } from '@ngxs/store';
import { faAt, faUserPlus } from "@fortawesome/free-solid-svg-icons";
import { faBell, faEnvelope, faUser, faStar } from "@fortawesome/free-regular-svg-icons";
import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../states/streams.state';
import { RemoveAccount } from '../../../states/accounts.state';
import { AccountWrapper } from '../../../models/account.models';
import { NavigationService } from '../../../services/navigation.service';
import { NotificationService } from '../../../services/notification.service';
@Component({
selector: 'app-manage-account',
@ -25,39 +20,12 @@ export class ManageAccountComponent implements OnInit {
subPanel = 'account';
hasNotifications = false;
hasMentions = false;
@Input() account: AccountWrapper;
availableStreams: StreamElement[] = [];
constructor() { }
constructor(
private readonly store: Store,
private readonly navigationService: NavigationService,
private notificationService: NotificationService) { }
ngOnInit() {
const instance = this.account.info.instance;
this.availableStreams.length = 0;
this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', this.account.info.id, null, null, instance));
this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.info.id, null, null, instance));
this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Home', this.account.info.id, null, null, instance));
}
addStream(stream: StreamElement): boolean {
if (stream) {
this.store.dispatch([new AddStream(stream)]).toPromise()
.then(() => {
this.notificationService.notify(`stream added`, false);
});
}
return false;
}
removeAccount(): boolean {
const accountId = this.account.info.id;
this.store.dispatch([new RemoveAllStreams(accountId), new RemoveAccount(accountId)]);
this.navigationService.closePanel();
return false;
ngOnInit() {
}
loadSubPanel(subpanel: string): boolean {

13
src/app/components/floating-column/manage-account/my-account/my-account.component.html
View File

@ -1,3 +1,10 @@
<p>
my-account works!
</p>
<div class="my-account__body flexcroll">
<h4 class="my-account__label">add column:</h4>
<a class="my-account__link my-account__blue" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
{{ stream.name }}
</a>
<h4 class="my-account__label my-account__margin-top">remove account from sengi:</h4>
<a class="my-account__link my-account__red" href (click)="removeAccount()">
Delete
</a>
</div>

50
src/app/components/floating-column/manage-account/my-account/my-account.component.scss
View File

@ -0,0 +1,50 @@
@import "variables";
@import "commons";
.my-account {
transition: all .2s;
&__body {
overflow: auto;
height: calc(100%);
// width: calc(100%);
padding-left: 10px;
padding-right: 10px;
font-size: $small-font-size;
padding-bottom: 20px;
outline: 1px dotted greenyellow;
}
&__label {
// text-decoration: underline;
font-size: $small-font-size;
margin-top: 10px;
margin-left: 5px;
color: $font-color-secondary;
}
&__link {
text-decoration: none;
display: block; // width: calc(100% - 20px);
width: 100%; // height: 30px;
padding: 5px 10px; // border: solid 1px black;
&:not(:last-child) {
margin-bottom: 5px;
}
}
&__margin-top {
margin-top: 25px;
}
&__blue {
background-color: $color-primary;
color: #fff;
&:hover {
background-color: lighten($color-primary, 15);
}
}
&__red {
$red-button-color: rgb(65, 3, 3);
background-color: $red-button-color;
color: #fff;
&:hover {
background-color: lighten($red-button-color, 15);
}
}
}

49
src/app/components/floating-column/manage-account/my-account/my-account.component.ts
View File

@ -1,15 +1,50 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { Store } from '@ngxs/store';
import { NotificationService } from '../../../../services/notification.service';
import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../../states/streams.state';
import { AccountWrapper } from '../../../../models/account.models';
import { RemoveAccount } from '../../../../states/accounts.state';
import { NavigationService } from '../../../../services/navigation.service';
@Component({
selector: 'app-my-account',
templateUrl: './my-account.component.html',
styleUrls: ['./my-account.component.scss']
selector: 'app-my-account',
templateUrl: './my-account.component.html',
styleUrls: ['./my-account.component.scss']
})
export class MyAccountComponent implements OnInit {
availableStreams: StreamElement[] = [];
constructor() { }
@Input() account: AccountWrapper;
ngOnInit() {
}
constructor(
private readonly store: Store,
private readonly navigationService: NavigationService,
private notificationService: NotificationService) { }
ngOnInit() {
const instance = this.account.info.instance;
this.availableStreams.length = 0;
this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', this.account.info.id, null, null, instance));
this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.info.id, null, null, instance));
this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Home', this.account.info.id, null, null, instance));
}
addStream(stream: StreamElement): boolean {
if (stream) {
this.store.dispatch([new AddStream(stream)]).toPromise()
.then(() => {
this.notificationService.notify(`stream added`, false);
});
}
return false;
}
removeAccount(): boolean {
const accountId = this.account.info.id;
this.store.dispatch([new RemoveAllStreams(accountId), new RemoveAccount(accountId)]);
this.navigationService.closePanel();
return false;
}
}

3
src/sass/_panel.scss
View File

@ -3,9 +3,8 @@
width: calc(100%);
height: calc(100%);
padding: 10px 10px 0 7px;
font-size: $small-font-size;
font-size: $small-font-size; //FIXME: remove this
white-space: normal;
// overflow: auto;
&__title {
font-size: 13px;
text-transform: uppercase;