Merge pull request #24 from scottstraughan/misc-improvements

Dark Mode, Styling Reuse Improvements, Performance Tweaks
scottstraughan · Jan 14, 2025 · bb466a2 · bb466a2
2 parents 848a8bd + 5a12494
commit bb466a2
Show file tree

Hide file tree

Showing 56 changed files with 1,034 additions and 406 deletions.
diff --git a/src/openssf-dashboard/account-view/account-view.component.html b/src/openssf-dashboard/account-view/account-view.component.html
@@ -64,18 +64,17 @@ <h1>Followers</h1>
           </div>
 
           <div class="actions">
-            <osd-button
+            <osd-link-button
                 icon="alt_route"
-                label="Visit Repository"></osd-button>
-            <osd-button
-                icon="delete"
-                label="Remove"
-                (clicked)="onDeleteServiceAccount(account)"></osd-button>
-
-            <osd-button
+                label="Visit Repository"></osd-link-button>
+            <osd-link-button
                 icon="sync"
                 label="Fetch Repos"
-                (clicked)="onFetchRepositories(account)"></osd-button>
+                (click)="onFetchRepositories(account)"></osd-link-button>
+            <osd-link-button
+                icon="delete"
+                label="Remove"
+                (click)="onDeleteServiceAccount(account)"></osd-link-button>
           </div>
         }
       } @else {

diff --git a/src/openssf-dashboard/account-view/account-view.component.scss b/src/openssf-dashboard/account-view/account-view.component.scss
@@ -49,6 +49,7 @@
 
         .score {
           display: flex;
+          position: relative;
 
           osd-score-ring,
           osd-loading {
@@ -122,10 +123,10 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            border: #ccc 1px solid;
             border-radius: 4px;
             padding: .5rem;
             font-size: .9rem;
+            border: var(--default-border);
             box-shadow: var(--default-box-shadow);
 
             osd-loading {

diff --git a/src/openssf-dashboard/account-view/account-view.component.ts b/src/openssf-dashboard/account-view/account-view.component.ts
@@ -17,13 +17,13 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal, WritableSignal } from '@angular/core';
-import { ButtonComponent } from '../shared/components/button/button.component';
+import { LinkButtonComponent } from '../shared/components/link-button/link-button.component';
 import { ScoreRingComponent } from '../shared/components/score-ring/score-ring.component';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { AccountModel } from '../shared/models/account.model';
 import { LoadingComponent } from '../shared/components/loading/loading.component';
-import { LoadingState } from '../shared/LoadingState';
-import { catchError, of, Subject, Subscription, take, takeUntil, tap } from 'rxjs';
+import { LoadingState } from '../shared/loading-state';
+import { catchError, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
 import { Title } from '@angular/platform-browser';
 import { PopupService } from '../shared/components/popup/popup.service';
 import { SelectedAccountStateService } from '../shared/services/selected-account-state.service';
@@ -34,10 +34,10 @@ import { ErrorPopupError, ErrorPopupService } from '../shared/services/error-pop
   selector: 'osd-account-view',
   standalone: true,
   imports: [
-    ButtonComponent,
+    LinkButtonComponent,
     ScoreRingComponent,
     LoadingComponent,
-    RouterOutlet
+    RouterOutlet,
   ],
   templateUrl: './account-view.component.html',
   styleUrl: './account-view.component.scss',
@@ -58,7 +58,6 @@ export class AccountViewComponent implements OnInit, OnDestroy {
   readonly averageScorecardScore: WritableSignal<number> = signal(0);
 
   private cleanup = new Subject<void>();
-  private accountSubscription: Subscription | undefined;
 
   /**
    * Constructor.
@@ -107,10 +106,9 @@ export class AccountViewComponent implements OnInit, OnDestroy {
 
     this.activatedRoute.params
       .pipe(
-        tap((params) => {
-          this.reset();
-
-          this.accountSubscription = this.selectedAccountService.setAccount(params['serviceTag'], params['accountTag'])
+        tap(() => this.reset()),
+        switchMap(params => {
+          return this.selectedAccountService.setAccount(params['serviceTag'], params['accountTag'])
             .pipe(
               tap(account => {
                 this.title.setTitle(`${account.name} - OpenSSF Dashboard`);
@@ -122,11 +120,10 @@ export class AccountViewComponent implements OnInit, OnDestroy {
                 this.errorPopupService.handleError(error);
                 this.fatalError.set(this.errorPopupService.convertError(error));
                 return of(error);
-              }),
-              take(1)
+              })
             )
-            .subscribe();
         }),
+        takeUntil(this.cleanup)
       )
       .subscribe();
   }
@@ -181,7 +178,7 @@ export class AccountViewComponent implements OnInit, OnDestroy {
    * Reset the UI.
    */
   private reset() {
-    this.accountSubscription?.unsubscribe();
+    this.cleanup.complete();
 
     this.fatalError.set(undefined);
     this.selectedAccount.set(undefined);

diff --git a/...nssf-dashboard/account-view/components/repository-widget/repository-widget.component.html b/...nssf-dashboard/account-view/components/repository-widget/repository-widget.component.html
@@ -1,5 +1,11 @@
 @if (repository(); as repository) {
   <div class="overview" (click)="onClick()">
+    @if (repository.archived) {
+      <div class="notice">
+        <span class="material-symbols-outlined">lock</span> Archived
+      </div>
+    }
+
     <div class="details">
       <h1 [innerHTML]="repository.name"></h1>
       <p [innerHTML]="repository.description"></p>

diff --git a/...nssf-dashboard/account-view/components/repository-widget/repository-widget.component.scss b/...nssf-dashboard/account-view/components/repository-widget/repository-widget.component.scss
@@ -1,20 +1,46 @@
 :host {
+  --osd-repository-widget-bg-color-unfocused: var(--ui-primary-color);
+  --osd-repository-widget-bg-color-focused: rgba(0, 0, 0, .03);
+  --osd-repository-widget-border: var(--default-border);
+  --osd-repository-widget-box-shadow: var(--default-box-shadow);
+  --osd-repository-widget-border-radius: var(--default-border-radius);
+  --osd-repository-widget-notice-bg-color: #666;
+  --osd-repository-widget-notice-color: var(--inverted-text-color);
+  --osd-repository-widget-transition: var(--default-transition);
+
   display: flex;
-  background-color: var(--ui-primary-color);
-  border: rgba(0, 0, 0, .2) 1px solid;
-  border-radius: var(--default-border-radius);
-  box-shadow: var(--default-box-shadow);
+  background-color: var(--osd-repository-widget-bg-color-unfocused);
+  border: var(--osd-repository-widget-border);
+  border-radius: var(--osd-repository-widget-border-radius);
+  box-shadow: var(--osd-repository-widget-box-shadow);
   overflow: hidden;
+  position: relative;
+
+  .notice {
+    position: absolute;
+    background-color: var(--osd-repository-widget-notice-bg-color);
+    color: var(--osd-repository-widget-notice-color);
+    right: 0;
+    top: 1rem;
+    padding: .4rem;
+    font-size: .8rem;
+    border-radius: 6px 0 0 6px;
+
+    span {
+      font-size: .8rem;
+      vertical-align: middle;
+    }
+  }
 
   .overview {
     flex: 1;
     display: flex;
     flex-direction: column;
     cursor: pointer;
-    transition: var(--default-transition);
+    transition: var(--osd-repository-widget-transition);
 
     &:hover {
-      background-color: rgba(0, 0, 0, .03);
+      background-color: var(--osd-repository-widget-bg-color-focused);
     }
 
     .details {
@@ -35,7 +61,7 @@
     .stats {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      border-top: #ccc 1px solid;
+      border-top: var(--osd-repository-widget-border);
       padding: 0 1rem;
       font-size: .9rem;
       opacity: .6;
@@ -61,7 +87,7 @@
       }
 
       > div:nth-of-type(1) {
-        border-right: #ccc 1px solid;
+        border-right: var(--osd-repository-widget-border);
       }
     }
   }
@@ -74,7 +100,7 @@
     box-shadow: inset 3px 0 4px -1px rgba(0, 0, 0, .1);
     min-width: 92px;
     cursor: pointer;
-    transition: var(--default-transition);
+    transition: var(--osd-repository-widget-transition);
 
     &:hover {
       background-color: rgba(0, 0, 0, .1);

diff --git a/...penssf-dashboard/account-view/components/repository-widget/repository-widget.component.ts b/...penssf-dashboard/account-view/components/repository-widget/repository-widget.component.ts
@@ -25,7 +25,7 @@ import { AccountModel } from '../../../shared/models/account.model';
 import { ScorecardModel } from '../../../shared/models/scorecard.model';
 import { PopupService } from '../../../shared/components/popup/popup.service';
 import { ErrorPopupComponent } from '../../../shared/popups/error-popup/error-popup.component';
-import { LoadingState } from '../../../shared/LoadingState';
+import { LoadingState } from '../../../shared/loading-state';
 import { catchError, of, tap } from 'rxjs';
 import { SelectedAccountStateService } from '../../../shared/services/selected-account-state.service';
 import { Router } from '@angular/router';

diff --git a/...ssf-dashboard/account-view/views/repository-list-view/repository-list-view.component.html b/...ssf-dashboard/account-view/views/repository-list-view/repository-list-view.component.html
@@ -9,10 +9,10 @@
               placeholder="type to filter repositories"></osd-input>
         </div>
         <div>
-          <osd-button
+          <osd-link-button
               [icon]="getIcon('sort')"
               [label]="getSortLabel()"
-              (clicked)="onToggleSortMode()"></osd-button>
+              (click)="onToggleSortMode()"></osd-link-button>
           <osd-multi-toggle-button
               [items]="[{
                 id: LayoutVisibility.HIDE_NO_SCORECARD_REPOS,
@@ -28,27 +28,29 @@
               }]"
             (itemChange)="onVisibleItemsChanged($event)"
           ></osd-multi-toggle-button>
-          <osd-button
+          <osd-link-button
               [icon]="getIcon('layout')"
-              (clicked)="onToggleLayout()"></osd-button>
+              (click)="onToggleLayout()"></osd-link-button>
         </div>
       </div>
 
       @if (getVisibleRepositories().length > 0) {
         <div class="container">
-          <div [ngClass]="{'list': layoutView() == LayoutView.LIST, 'grid': layoutView() == LayoutView.GRID}">
+          <div
+              [class.list]="layoutView() == LayoutView.LIST"
+              [class.grid]="layoutView() == LayoutView.GRID">
             @for (repository of getVisibleRepositories(); track repository.url) {
               <osd-repository-widget
                   [account]="account"
                   [repository]="repository"></osd-repository-widget>
             }
           </div>
           @if (getVisibleRepositories().length < filteredRepositoriesCount) {
-            <osd-button
+            <osd-link-button
                 class="view-more"
                 label="View More Repositories"
                 icon="next_plan"
-                (clicked)="onViewMore()"></osd-button>
+                (click)="onViewMore()"></osd-link-button>
           }
         </div>
       } @else {

diff --git a/...ssf-dashboard/account-view/views/repository-list-view/repository-list-view.component.scss b/...ssf-dashboard/account-view/views/repository-list-view/repository-list-view.component.scss
@@ -1,14 +1,18 @@
 .repositories {
+  --osd-repository-list-view-container-bg-color: var(--ui-secondary-color);
+  --osd-repository-list-view-header-bg-color: var(--ui-tertiary-color);
+  --osd-repository-list-view-spacing: 1rem;
+
   display: flex;
   flex-direction: column;
   padding: 0;
   height: 100%;
 
   .header {
     display: flex;
-    background-color: rgba(0, 0, 0, .05);
-    padding: 1rem;
-    gap: .5rem;
+    background-color: var(--osd-repository-list-view-header-bg-color);
+    padding: var(--osd-repository-list-view-spacing);
+    gap: calc(var(--osd-repository-list-view-spacing) / 2);
 
     > div {
       display: flex;
@@ -25,23 +29,23 @@
   }
 
   .container {
-    --seperation: 1rem;
+    background-color: var(--osd-repository-list-view-container-bg-color);
 
     flex: 1;
     container: repo-container / inline-size;
-    padding: var(--seperation);
+    padding: var(--osd-repository-list-view-spacing);
     overflow: scroll;
 
     .list {
       display: flex;
-      gap: var(--seperation);
+      gap: var(--osd-repository-list-view-spacing);
       flex-direction: column;
     }
 
     .grid {
       display: grid;
       grid-template-columns: 1fr;
-      grid-gap: var(--seperation);
+      grid-gap: var(--osd-repository-list-view-spacing);
 
       @container repo-container (min-width: 800px) {
         grid-template-columns: 1fr 1fr;
@@ -62,7 +66,7 @@
     }
 
     .view-more {
-      margin-top: var(--seperation);
+      margin-top: var(--osd-repository-list-view-spacing);
     }
   }
 }
diff --git a/...enssf-dashboard/account-view/views/repository-list-view/repository-list-view.component.ts b/...enssf-dashboard/account-view/views/repository-list-view/repository-list-view.component.ts
@@ -26,14 +26,13 @@ import {
   signal,
   WritableSignal
 } from '@angular/core';
-import { ButtonComponent } from '../../../shared/components/button/button.component';
+import { LinkButtonComponent } from '../../../shared/components/link-button/link-button.component';
 import { InputComponent } from '../../../shared/components/input/input.component';
 import { RepositoryWidgetComponent } from '../../components/repository-widget/repository-widget.component';
 import { LoadingComponent } from '../../../shared/components/loading/loading.component';
-import { NgClass } from '@angular/common';
 import { AccountModel } from '../../../shared/models/account.model';
 import { RepositoryModel } from '../../../shared/models/repository.model';
-import { LoadingState } from '../../../shared/LoadingState';
+import { LoadingState } from '../../../shared/loading-state';
 import { Subject, takeUntil, tap } from 'rxjs';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { SelectedAccountStateService } from '../../../shared/services/selected-account-state.service';
@@ -47,11 +46,10 @@ import {
   selector: 'osd-repository-list-view',
   standalone: true,
   imports: [
-    ButtonComponent,
+    LinkButtonComponent,
     RepositoryWidgetComponent,
     InputComponent,
     LoadingComponent,
-    NgClass,
     MultiToggleButtonComponent
   ],
   templateUrl: './repository-list-view.component.html',
@@ -102,7 +100,6 @@ export class RepositoryListViewComponent implements OnInit, OnDestroy {
   ) {
     effect(() => {
       // Save changes to the ui settings to the storage
-      console.log('Saving changes to storage...');
       this.setStorageValue('layout', this.layoutView());
       this.setStorageValue('sort', this.layoutSortMode());
       this.setStorageValue('hide-nsr', this.hideNoScorecardRepos());

diff --git a/...openssf-dashboard/account-view/views/scorecard-view/components/check/check.component.html b/...openssf-dashboard/account-view/views/scorecard-view/components/check/check.component.html
@@ -1,7 +1,7 @@
 @if (check(); as check) {
   <osd-faded-bg
       [color]="getPriorityColor(check, false)"
-      [ngClass]="[check.priority, selected() ? 'selected' : '']"
+      [class.selected]="selected()"
       [style.border-left-color]="getPriorityColor(check)">
 
     <!-- Details for the check -->
@@ -15,6 +15,5 @@ <h1 [innerHTML]="check.name"></h1>
     <div class="score">
       <osd-score-ring [allowReload]="false" [score]="check.score"></osd-score-ring>
     </div>
-
   </osd-faded-bg>
 }