Fix styling in activity footer (#1579)

* Fix footer styling * Move percentage to align with text * Add test to check name truncating * Remove fdescribe
Azure · Sep 5, 2018 · b3172b6 · b3172b6
1 parent 8211deb
commit b3172b6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 49 deletions.
diff --git a/...ivity-monitor/activity-monitor-footer-item/activity-monitor-footer-item.component.spec.ts b/...ivity-monitor/activity-monitor-footer-item/activity-monitor-footer-item.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { MaterialModule } from "@batch-flask/core";
 import { ActivityMonitorFooterItemComponent } from "@batch-flask/ui/activity-monitor";
-import { BehaviorSubject } from "rxjs";
+import { AsyncSubject, BehaviorSubject } from "rxjs";
 
 @Component({
     template: `
@@ -54,36 +54,39 @@ describe("ActivityMonitorFooterItemComponent", () => {
         const nameEl = de.query(By.css(".name"));
 
         expect(nameEl.nativeElement.textContent).toContain("Test activity");
-        expect(nameEl.nativeElement.textContent).not.toContain("...");
     });
 
-    it("should display the activity name trucated to 20 characters", () => {
+    it("should not truncate the activity name if it is short enough to fit", () => {
         const nameEl = de.query(By.css(".name"));
+        expect(nameEl.nativeElement.offsetWidth).toBe(nameEl.nativeElement.scrollWidth);
+    });
 
+    it("should truncate the activity name if it is too long to fit", () => {
         testComponent.activity = new MockActivity(
-            "Test activity but it's longer than 20 characters",
+            "loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong name",
             testComponent.subj,
         );
         fixture.detectChanges();
 
-        expect(nameEl.nativeElement.textContent).toContain("Test activity but it...");
+        const nameEl = de.query(By.css(".name"));
+        expect(nameEl.nativeElement.offsetWidth < nameEl.nativeElement.scrollWidth).toBe(true);
     });
 
     it("should display the percentage if an activity is emitting progress", () => {
-        const nameEl = de.query(By.css(".name"));
+        const progressEl = de.query(By.css(".progress-percent"));
 
         const progressSubj = new BehaviorSubject(0);
 
         testComponent.activity = new MockActivity("Test activity with progress subject", progressSubj);
         fixture.detectChanges();
 
         expect(component.progress).toBe(0);
-        expect(nameEl.nativeElement.textContent).toContain("(0%)");
+        expect(progressEl.nativeElement.textContent).toContain("(0%)");
 
         progressSubj.next(50);
         fixture.detectChanges();
 
         expect(component.progress).toBe(50);
-        expect(nameEl.nativeElement.textContent).toContain("(50%)");
+        expect(progressEl.nativeElement.textContent).toContain("(50%)");
     });
 });
diff --git a/...i/activity-monitor/activity-monitor-footer-item/activity-monitor-footer-item.component.ts b/...i/activity-monitor/activity-monitor-footer-item/activity-monitor-footer-item.component.ts
@@ -2,12 +2,15 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    HostBinding,
     Input,
     OnChanges,
 } from "@angular/core";
 import { Activity } from "@batch-flask/ui/activity-monitor/activity";
 import { Subscription } from "rxjs";
 
+import "./activity-monitor-footer-item.scss";
+
 @Component({
     selector: "bl-activity-monitor-footer-item",
     templateUrl: "activity-monitor-footer-item.html",
@@ -16,8 +19,8 @@ import { Subscription } from "rxjs";
 export class ActivityMonitorFooterItemComponent implements OnChanges {
     @Input() public activity: Activity;
     public progress: number;
+    public progressString: string;
 
-    private _progressString: string;
     private _sub: Subscription;
 
     constructor(private changeDetector: ChangeDetectorRef) {}
@@ -28,6 +31,7 @@ export class ActivityMonitorFooterItemComponent implements OnChanges {
         }
     }
 
+    @HostBinding("attr.title")
     public get name() {
         return this.activity.name;
     }
@@ -36,23 +40,14 @@ export class ActivityMonitorFooterItemComponent implements OnChanges {
         return this.activity.isComplete;
     }
 
-    public prettyPrint() {
-        if (this.name.length < 20) {
-            return `${this.name} ${this._progressString}`;
-        } else {
-            return `${this.name.slice(0, 20)}... ${this._progressString}`;
-        }
-    }
-
     private _subscribeToProgress() {
-        if (this._sub && this._sub.closed) {
+        if (this._sub) {
             this._sub.unsubscribe();
         }
 
         this._sub = this.activity.progress.subscribe((progress) => {
-
             this.progress = progress;
-            this._progressString = `(${Math.floor(progress)}%)`;
+            this.progressString = `(${Math.floor(progress)}%)`;
             this.changeDetector.markForCheck();
         });
     }

diff --git a/...-flask/ui/activity-monitor/activity-monitor-footer-item/activity-monitor-footer-item.html b/...-flask/ui/activity-monitor/activity-monitor-footer-item/activity-monitor-footer-item.html
@@ -5,4 +5,5 @@
     </div>
     <i class="fa fa-check" *ngIf="isComplete"></i>
 </div>
-<span class="name">{{prettyPrint()}}</span>
+<span class="name">{{name}}</span>
+<span class="progress-percent">{{progressString}}</span>
diff --git a/...-flask/ui/activity-monitor/activity-monitor-footer-item/activity-monitor-footer-item.scss b/...-flask/ui/activity-monitor/activity-monitor-footer-item/activity-monitor-footer-item.scss
@@ -0,0 +1,32 @@
+@import "app/styles/variables";
+
+bl-activity-monitor-footer-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    > .status-icon {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+        .mat-progress-spinner {
+            path {
+                stroke: $whiteSmoke;
+            }
+        }
+        .fa {
+            vertical-align: middle;
+            line-height: 24px;
+            font-size: 18px;
+        }
+    }
+
+    > .name {
+        min-width: 0;
+        text-align: left;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        padding-right: 5px;
+    }
+}
diff --git a/src/@batch-flask/ui/activity-monitor/activity-monitor-footer/activity-monitor-footer.scss b/src/@batch-flask/ui/activity-monitor/activity-monitor-footer/activity-monitor-footer.scss
@@ -24,7 +24,10 @@ bl-activity-monitor-footer {
         display: flex;
         align-items: center;
 
-        > bl-activity-monitor-footer-item  {flex: 1;};
+        > bl-activity-monitor-footer-item  {
+            flex: 1;
+            min-width: 0;
+        };
 
         > .other-task-count {
             width: 21px;
@@ -41,31 +44,4 @@ bl-activity-monitor-footer {
     .flash {
         animation: flash 1s infinite;
     }
-
-    bl-activity-monitor-footer-item {
-        display: flex;
-        align-items: center;
-        width: 100%;
-
-        > .status-icon {
-            width: 18px;
-            height: 18px;
-            margin-right: 10px;
-            .mat-progress-spinner {
-                path {
-                    stroke: $whiteSmoke;
-                }
-            }
-            .fa {
-                vertical-align: middle;
-                line-height: 24px;
-                font-size: 18px;
-            }
-        }
-
-        > .name {
-            flex: 1;
-            text-align: left;
-        }
-    }
 }