enable hover indicator for "changeAccountOrder" api call

vladimiry · Jul 31, 2018 · 40903b8 · 40903b8
1 parent ef3cf61
commit 40903b8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/web/src/app/+options/accounts.component.html b/src/web/src/app/+options/accounts.component.html
@@ -12,3 +12,8 @@
         </a>
     </li>
 </ul>
+<div class="progress mt-3" *ngIf="changingAccountOrder$ | async">
+    <div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" style="width: 100%">
+        Reordering ...
+    </div>
+</div>
diff --git a/src/web/src/app/+options/accounts.component.ts b/src/web/src/app/+options/accounts.component.ts
@@ -14,8 +14,9 @@ import {State} from "src/web/src/app/store/reducers/options";
     styleUrls: ["./accounts.component.scss"],
 })
 export class AccountsComponent implements OnDestroy {
-    public accounts$ = this.store.select(OptionsSelectors.SETTINGS.accounts);
-    public reorderingGroup = "accounts";
+    accounts$ = this.store.select(OptionsSelectors.SETTINGS.accounts);
+    changingAccountOrder$ = this.store.select(OptionsSelectors.FEATURED.progress).pipe(map((p) => !!p.changingAccountOrder));
+    reorderingGroup = "accounts";
     @HostBinding("class.reordering-disabled")
     reorderingDisabled: boolean = true;
     private subscription = new Subscription();
@@ -25,11 +26,8 @@ export class AccountsComponent implements OnDestroy {
         private dragulaService: DragulaService,
     ) {
         this.subscription.add(
-            this.store.select(OptionsSelectors.FEATURED.progress)
-                .pipe(
-                    map((progress) => !!progress.changingAccountOrder),
-                    withLatestFrom(this.accounts$),
-                )
+            this.changingAccountOrder$
+                .pipe(withLatestFrom(this.accounts$))
                 .subscribe(([value, accounts]) => this.reorderingDisabled = value || accounts.length < 2),
         );