From 51ef48150fb7128e1a43b23c908467917d5ec685 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Fri, 1 May 2020 02:45:10 -0400
Subject: [PATCH] added remove button UI

---
 .../my-account/my-account.component.html      | 30 ++++++++++-------
 .../my-account/my-account.component.scss      | 33 ++++++++++++++++++-
 2 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.html b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
index b18a8fea..fcc99981 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.html
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.html
@@ -1,11 +1,16 @@
 <div class="my-account__body flexcroll">
     <h4 class="my-account__label">add timeline:</h4>
-    <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>
+    <div class="my-account__link--margin-bottom" *ngFor="let stream of availableStreams">
+        <a href *ngIf="stream.isAdded" class="my-account__list--button" title="remove timeline">
+            <fa-icon class="my-account__link--icon my-account__link--remove" [icon]="faTimes"></fa-icon>
+        </a>
+        <a href class="my-account__link my-account__link--margin-bottom my-account__blue" (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>       
+    </div>
+
 
     <h4 class="my-account__label my-account__margin-top">manage list:</h4>
     <div class="my-account__link--margin-bottom" *ngFor="let list of availableLists">
@@ -26,11 +31,12 @@
             *ngIf="list.confirmDeletion">
             <fa-icon class="my-account__link--icon" [icon]="faCheck"></fa-icon>
         </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)"
-            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>
+            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"> </fa-icon>-->
         </a>
 
         <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>
     <div class="advanced-settings">
         <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"
             (change)="onCustomLengthEnabledChanged()" type="checkbox" name="customCharLength" value="customCharLength"
             id="customCharLength"> <label class="noselect advanced-settings__label" for="customCharLength">custom char
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
index 8574e7c2..29eef8d2 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
@@ -1,6 +1,10 @@
 @import "variables";
 @import "commons";
 
+
+$list-width: 60px;
+$button-width: $list-width/2;
+
 .my-account {
     transition: all .2s;
 
@@ -50,10 +54,19 @@
             float: right;
         }
 
+        &--remove {
+            position: relative;
+            top: 1px;
+            right: 1px;
+        }
+
         &--disabled {
             cursor: default;
             background-color: darken($color-primary, 4);
 
+            width: calc(100% - #{$button-width} - 1px);
+            //outline: 1px solid greenyellow;
+
             &:hover {
                 background-color: darken($color-primary, 4);
             }
@@ -67,9 +80,27 @@
     }
 
     &__list {
-        $list-width: 60px;
+       
         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 {
             margin-left: 1px;
             width: calc(#{$list-width}/2);