Fixed styles and tests for download component

Sage-Bionetworks · May 26, 2022 · d1bc4f4 · d1bc4f4
1 parent 4a4a056
commit d1bc4f4
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 25 deletions.
diff --git a/src/app/shared/components/download/download.component.html b/src/app/shared/components/download/download.component.html
@@ -1,11 +1,11 @@
 <img class="download-img" src="/assets/icon/download.svg" (click)="op.toggle($event)">
 <p-overlayPanel [styleClass]="'download-op'" #op (rotate)="onRotate()" (window:resize)="onResize()">
     <h3>Download this plot as:</h3>
-    <div *ngFor="let type of types" class="col-md-12 col-sm-12 col-12 chkbox-col">
+    <div *ngFor="let type of types" class="col-12 chkbox-col">
         <p-radioButton name="group1"  value="{{type.value}}" label="{{type.label}}" [(ngModel)]="selectedType"></p-radioButton>
     </div>
-    <div class="col-md-12 col-sm-12 col-12 button-col">
-        <img class="download-img" src="/assets/img/download-button.svg" (click)="downloadWidget()">
+    <div class="col-12 button-col">
+        <button pButton type="button" label="Download" class="ui-button-rounded ui-button-warning" (click)="downloadWidget()"></button>
     </div>
 </p-overlayPanel>
 <p-dialog header=""

diff --git a/src/app/shared/components/download/download.component.scss b/src/app/shared/components/download/download.component.scss
@@ -56,28 +56,58 @@
         font-size: $font-size-x-regular;
     }
 
-    p-radioButton {
-        @include lato-font('normal');
+    .ui-radiobutton-label {
+        font-size: 16px;
+    }
+
+    .ui-radiobutton-box {
+        width: 15px;
+        height: 15px;
+        font-size: 12px;
+        border: 1px solid color(border);
+        border-radius: 50%;
+        transition: $transition-duration;
+
+        .ui-radiobutton-icon {
+            display: flex !important;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            transition: $transition-duration;
+            top: 0 !important;
+            left: 0 !important;
+            margin: 0 !important;
+
+            &:before {
+                display: block;
+                font-size: 11px;
+                line-height: 11px;
+            }
+        }
+
+        &.ui-state-focus {
+            // background-color: transparent !important;
+            border-color: color(primary) !important;
+        }
 
-        line-height: normal;
-        font-size: $font-size-regular;
-        color: color(text, secondary);
+        &.ui-state-active {
+            //background-color: color(primary) !important;
+            border-color: color(primary) !important;
+
+            .ui-radiobutton-icon {
+                color: color(primary);
+
+                &, &:before {
+                    margin: 0;
+                }
+            }
+        }
     }
 
-  .ui-radiobutton-box {
-    width: 16px;
-    height: 16px;
-  }
-
-  .ui-radiobutton-icon {
-    border: 2px solid #EEEEEE;
-    color: #5BB0B5;
-    border-radius: 50%;
-    line-height: normal;
-    left: 0;
-    width: 20px;
-    height: 20px;
-  }
+    .ui-button {
+        width: 100%;
+    }
 
     .download-img {
         cursor: pointer;

diff --git a/src/app/shared/components/download/download.component.spec.ts b/src/app/shared/components/download/download.component.spec.ts
@@ -96,16 +96,20 @@ describe('Component: Download', () => {
             {
                 value: 'png',
                 label: 'PNG'
+            },
+            {
+                value: 'jpeg',
+                label: 'JPEG'
             }
         ];
         const img = fixture.debugElement.nativeElement.querySelector('img');
         img.click();
         fixture.detectChanges();
 
-        const el = fixture.debugElement.query(By.css('p-checkbox'));
+        const el = fixture.debugElement.query(By.css('p-radioButton'));
         expect(el).toBeDefined();
 
-        const aEl = fixture.debugElement.queryAll(By.css('p-checkbox'));
-        expect(aEl.length).toEqual(1);
+        const aEl = fixture.debugElement.queryAll(By.css('p-radioButton'));
+        expect(aEl.length).toEqual(2);
     });
 });
diff --git a/src/app/testing/gene-service-stub.ts b/src/app/testing/gene-service-stub.ts
@@ -31,6 +31,7 @@ export class GeneServiceStub {
     currentTissue: string;
     geneTissues: string[] = [];
     currentModel: string;
+    currentProtein: string = '';
     geneModels: string[] = [];
     models: string[] = [];
     tissues: string[] = [];
@@ -114,6 +115,14 @@ export class GeneServiceStub {
         return this.currentModel;
     }
 
+    setCurrentProtein(protein: string) {
+        this.currentProtein = protein;
+    }
+
+    getCurrentProtein(): string {
+        return this.currentProtein;
+    }
+
     setCurrentTissue(tissue: string) {
         this.currentTissue = tissue;
     }

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1986,3 +1986,30 @@ g.textGroup text {
     max-height: 450px;
 }
 
+
+.ui-button {
+    box-shadow: none;
+    user-select: none;
+    transition: $transition-duration;
+
+    .ui-button-text {
+        @include lato-font('bold');
+        padding: 15px 30px;
+        color: #000000;
+        font-size: $font-size-regular;
+    }
+}
+
+.ui-button-warning {
+    background-color: color('actionSecondary');
+    border: 1px solid color('actionSecondary');
+
+    &:hover {
+        background-color: darken(color('actionSecondary'), 4%);
+        border: 1px solid darken(color('actionSecondary'), 4%);
+    }
+}
+
+.ui-button-rounded {
+    border-radius: 40px;
+}