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

added buttons to create/edit/delete lists #46

This commit is contained in:
Nicolas Constant 2019-05-19 00:21:21 -04:00
parent 62baf8474d
commit 655d120cd9
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 64 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,31 @@
<div class="my-account__body flexcroll">
<h4 class="my-account__label">add timeline:</h4>
<a class="my-account__link my-account__blue" href *ngFor="let stream of availableStreams"
(click)="addStream(stream)" title="{{ stream.isAdded ? '' : 'add timeline'}}"
[class.my-account__link--disabled]="stream.isAdded">
<a class="my-account__link my-account__link--margin-bottom my-account__blue" href
*ngFor="let stream of availableStreams" (click)="addStream(stream)"
title="{{ stream.isAdded ? '' : 'add timeline'}}" [class.my-account__link--disabled]="stream.isAdded">
{{ stream.name }} <fa-icon class="my-account__link--icon" *ngIf="stream.isAdded" [icon]="faCheckSquare">
</fa-icon>
</a>
<h4 class="my-account__label">add list:</h4>
<a class="my-account__link my-account__blue" href *ngFor="let list of availableLists"
(click)="addStream(list)" title="{{ list.isAdded ? '' : 'add list'}}"
[class.my-account__link--disabled]="list.isAdded">
{{ list.name }} <fa-icon class="my-account__link--icon" *ngIf="list.isAdded" [icon]="faCheckSquare">
</fa-icon>
<h4 class="my-account__label my-account__margin-top">manage list:</h4>
<div class="my-account__link--margin-bottom" *ngFor="let list of availableLists">
<a href class="my-account__list--button" title="delete list">
<fa-icon class="my-account__link--icon" [icon]="faTrash"></fa-icon>
</a>
<a href class="my-account__list--button" title="edit list">
<fa-icon class="my-account__link--icon" [icon]="faPenAlt"></fa-icon>
</a>
<a class="my-account__link my-account__list my-account__blue" href (click)="addStream(list)"
title="{{ list.isAdded ? '' : 'add list'}}" [class.my-account__link--disabled]="list.isAdded">
{{ list.name }} <fa-icon class="my-account__link--icon" *ngIf="list.isAdded" [icon]="faCheckSquare">
</fa-icon>
</a>
</div>
<a href class="my-account__list--button" title="create list">
<fa-icon class="my-account__link--icon" [icon]="faPlus"></fa-icon>
</a>
<input class="my-account__list--new-list-title" placeholder="new list title" />
<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()">

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

@ -32,15 +32,13 @@
&:hover {
background-color: lighten($red-button-color, 15);
}
}
}
&__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;
}
&--icon {
float: right;
}
@ -51,6 +49,43 @@
background-color: darken($color-primary, 4);
}
}
&--margin-bottom{
&:not(:last-child) {
margin-bottom: 5px;
}
}
}
&__list {
$list-width: 60px;
width: calc(100% - #{$list-width} - 2px);
&--button {
margin-left: 1px;
width: calc(#{$list-width}/2);
float: right;
padding: 5px 10px;
background-color: $color-primary;
color: #fff;
color: $font-color-secondary;
&:hover {
color: #fff;
background-color: lighten($color-primary, 15);
}
}
&--new-list-title {
color: #fff;
background-color: darken($color-primary, 4);
border: 2px solid $color-primary;
width: calc(100% - #{$list-width}/2 - 1px);
padding: 3px 5px;
&:focus {
outline: none !important;
// border:1px solid red;
box-shadow: none;
}
}
}
&__margin-top {
margin-top: 25px;

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

@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Store, Select } from '@ngxs/store';
import { faCheckSquare } from "@fortawesome/free-regular-svg-icons";
import { faPenAlt, faTrash, faPlus } from "@fortawesome/free-solid-svg-icons";
import { NotificationService } from '../../../../services/notification.service';
import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../../states/streams.state';
@ -16,7 +17,9 @@ import { MastodonService } from '../../../../services/mastodon.service';
styleUrls: ['./my-account.component.scss']
})
export class MyAccountComponent implements OnInit, OnDestroy {
faPlus = faPlus;
faTrash = faTrash;
faPenAlt = faPenAlt;
faCheckSquare = faCheckSquare;
availableStreams: StreamWrapper[] = [];