Mastodon/Sengi-Windows-MacOS-Linux
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added remove button UI

Browse Source
This commit is contained in:
Nicolas Constant 2020-05-01 02:45:10 -04:00
parent 8d9895b0c9
commit 51ef48150f
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 51 additions and 12 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,11 +1,16 @@
<div class="my-account__body flexcroll"> <div class="my-account__body flexcroll">
<h4 class="my-account__label">add timeline:</h4> <h4 class="my-account__label">add timeline:</h4>
<a class="my-account__link my-account__link--margin-bottom my-account__blue" href <div class="my-account__link--margin-bottom" *ngFor="let stream of availableStreams">
*ngFor="let stream of availableStreams" (click)="addStream(stream)" <a href *ngIf="stream.isAdded" class="my-account__list--button" title="remove timeline">
title="{{ stream.isAdded ? '' : 'add timeline'}}" [class.my-account__link--disabled]="stream.isAdded"> <fa-icon class="my-account__link--icon my-account__link--remove" [icon]="faTimes"></fa-icon>
{{ stream.name }} <fa-icon class="my-account__link--icon" *ngIf="stream.isAdded" [icon]="faCheckSquare"> </a>
</fa-icon> <a href class="my-account__link my-account__link--margin-bottom my-account__blue" (click)="addStream(stream)"
</a> 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>
</div>
<h4 class="my-account__label my-account__margin-top">manage list:</h4> <h4 class="my-account__label my-account__margin-top">manage list:</h4>
<div class="my-account__link--margin-bottom" *ngFor="let list of availableLists"> <div class="my-account__link--margin-bottom" *ngFor="let list of availableLists">
@ -26,11 +31,12 @@
*ngIf="list.confirmDeletion"> *ngIf="list.confirmDeletion">
<fa-icon class="my-account__link--icon" [icon]="faCheck"></fa-icon> <fa-icon class="my-account__link--icon" [icon]="faCheck"></fa-icon>
</a> </a>
<a href *ngIf="list.isAdded" class="my-account__list--button" title="remove list">
<fa-icon class="my-account__link--icon my-account__list--remove" [icon]="faTimes"></fa-icon>
</a>
<a class="my-account__link my-account__list my-account__blue" href (click)="addStream(list)" <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"> title="{{ list.isAdded ? '' : 'add list'}}" [class.my-account__list--disabled]="list.isAdded">
{{ list.name }} <fa-icon class="my-account__link--icon" *ngIf="list.isAdded" [icon]="faCheckSquare"> {{ list.name }} <!--<fa-icon class="my-account__link--icon" *ngIf="list.isAdded" [icon]="faCheckSquare"> </fa-icon>-->
</fa-icon>
</a> </a>
<app-list-editor *ngIf="list.editList" [list]="list" [account]="account"></app-list-editor> <app-list-editor *ngIf="list.editList" [list]="list" [account]="account"></app-list-editor>
@ -44,7 +50,9 @@
<h4 class="my-account__label my-account__margin-top">advanced settings:</h4> <h4 class="my-account__label my-account__margin-top">advanced settings:</h4>
<div class="advanced-settings"> <div class="advanced-settings">
<input class="advanced-settings__checkbox" [(ngModel)]="avatarNotificationDisabled" <input class="advanced-settings__checkbox" [(ngModel)]="avatarNotificationDisabled"
(change)="onDisableAvatarNotificationChanged()" type="checkbox" name="avatarNotification" value="avatarNotification" id="avatarNotification"> <label class="noselect advanced-settings__label" for="avatarNotification">disable avatar notifications</label><br> (change)="onDisableAvatarNotificationChanged()" type="checkbox" name="avatarNotification"
value="avatarNotification" id="avatarNotification"> <label class="noselect advanced-settings__label"
for="avatarNotification">disable avatar notifications</label><br>
<input class="advanced-settings__checkbox" [(ngModel)]="customStatusLengthEnabled" <input class="advanced-settings__checkbox" [(ngModel)]="customStatusLengthEnabled"
(change)="onCustomLengthEnabledChanged()" type="checkbox" name="customCharLength" value="customCharLength" (change)="onCustomLengthEnabledChanged()" type="checkbox" name="customCharLength" value="customCharLength"
id="customCharLength"> <label class="noselect advanced-settings__label" for="customCharLength">custom char id="customCharLength"> <label class="noselect advanced-settings__label" for="customCharLength">custom char

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

@ -1,6 +1,10 @@
@import "variables"; @import "variables";
@import "commons"; @import "commons";
$list-width: 60px;
$button-width: $list-width/2;
.my-account { .my-account {
transition: all .2s; transition: all .2s;
@ -50,10 +54,19 @@
float: right; float: right;
} }
&--remove {
position: relative;
top: 1px;
right: 1px;
}
&--disabled { &--disabled {
cursor: default; cursor: default;
background-color: darken($color-primary, 4); background-color: darken($color-primary, 4);
width: calc(100% - #{$button-width} - 1px);
//outline: 1px solid greenyellow;
&:hover { &:hover {
background-color: darken($color-primary, 4); background-color: darken($color-primary, 4);
} }
@ -67,9 +80,27 @@
} }
&__list { &__list {
$list-width: 60px;
width: calc(100% - #{$list-width} - 2px); width: calc(100% - #{$list-width} - 2px);
&--remove {
position: relative;
top: 0px;
right: 1px;
}
&--disabled {
cursor: default;
background-color: darken($color-primary, 4);
width: calc(100% - #{$button-width} * 3 - 3px);
//outline: 1px solid greenyellow;
&:hover {
background-color: darken($color-primary, 4);
}
}
&--button { &--button {
margin-left: 1px; margin-left: 1px;
width: calc(#{$list-width}/2); width: calc(#{$list-width}/2);