mirror of
https://github.com/NicolasConstant/sengi
synced 2025-02-03 03:47:35 +01:00
migration of my-account to its component
This commit is contained in:
parent
a41f1051e5
commit
d99976f0a7
@ -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>
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
@ -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,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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user