Merge pull request #11 from scottstraughan/small-bugfixes

Bug Fixes and UI Tweaks

src/app/app.config.ts

@@ -21,12 +21,14 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideHttpClient(
       withFetch()
     ),
+    provideAnimations()
   ]
 };

src/app/repository-view/repository-view.component.html

@@ -56,10 +56,7 @@ <h1 [innerHTML]="account.name"></h1>
         <a [href]="account.url" target="_blank" rel="noopener">
           <osf-button icon="alt_route" label="Visit Repository"></osf-button>
         </a>
-        <div class="group">
-          <osf-button icon="sync" label="Sync" (onClicked)="onDeleteServiceAccount()"></osf-button>
-          <osf-button icon="delete" label="Remove" (onClicked)="onDeleteServiceAccount()"></osf-button>
-        </div>
+        <osf-button icon="delete" label="Remove" (onClicked)="onDeleteServiceAccount()"></osf-button>
       </div>
     }
   } @else {

src/app/repository-view/repository-view.component.scss

@@ -98,15 +98,6 @@
     display: flex;
     flex-direction: column;
     gap: .5rem;
-
-    .group {
-      display: flex;
-      gap: .5rem;
-
-      > * {
-        flex: 1;
-      }
-    }
   }
 
   @container main (max-width: 760px) {

src/app/shared/components/score-ring/score-ring.component.html

@@ -3,4 +3,16 @@
 <div class="progress"
      [style.border-color]="getColorVariableForScore(score())"></div>
 
-<div class="score" [innerHTML]="score()"></div>
+<div class="contents"
+     (mouseenter)="onMouseEnter()"
+     (mouseleave)="onMouseLeave()">
+
+  <!-- Value of the score ring -->
+  <div [@rotateAndFade]="!hover() ? 'focused' : 'blurred'"
+       class="score"
+       [innerHTML]="score()"></div>
+
+  <!-- Shown on hover -->
+  <span [@rotateAndFade]="hover() ? 'focused' : 'blurred'"
+        class="sync material-symbols-outlined">sync</span>
+</div>

src/app/shared/components/score-ring/score-ring.component.scss

@@ -3,22 +3,20 @@
   height: 75px;
   position: relative;
   display: block;
-  color: #303030;
+  container: score-container / inline-size;
 
   --progress: 50%;
   --thickness: 5px;
   --color: blue;
-  --font-size: 1rem;
 
+  .base,
   .progress,
-  .score,
-  .base {
+  .contents {
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
-    font-size: var(--font-size);
   }
 
   .base,
@@ -36,9 +34,15 @@
     mask: none;
   }
 
-  .score {
+  .contents {
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+
+    > * {
+      position: absolute;
+      font-size: 40cqw;
+    }
   }
-}
+}

src/app/shared/components/score-ring/score-ring.component.ts

@@ -22,36 +22,48 @@ import {
   Component,
   effect,
   HostBinding,
-  input,
-  SkipSelf
+  input, signal,
+  SkipSelf, WritableSignal
 } from '@angular/core';
 import { NgCircleProgressModule } from 'ng-circle-progress';
-import { NgClass } from '@angular/common';
+import { NgClass, NgIf } from '@angular/common';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'osf-score-ring',
   standalone: true,
   templateUrl: './score-ring.component.html',
   imports: [
     NgCircleProgressModule,
-    NgClass
+    NgClass,
+    NgIf
   ],
   styleUrl: './score-ring.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('rotateAndFade', [
+      state('blurred', style({ opacity: 0, transform: 'rotate(-180deg)' })),
+      state('focused', style({ opacity: 1, transform: 'rotate(0deg)' })),
+      transition('blurred => focused', [animate('0.2s')]),
+      transition('focused => blurred', [animate('0.2s')]),
+    ])
+  ],
 })
 export class ScoreRingComponent {
+  readonly hoverDelay: number = 350;
   readonly score = input.required<number>();
   readonly thickness = input<string>('5px');
   readonly fontSize = input<string>('1.5rem');
 
+  protected timeout: number | undefined;
+
   @HostBinding('style.--progress')
   percentage: string = '0%';
 
   @HostBinding('style.--thickness')
   thicknessBinding: string = '5px';
 
-  @HostBinding('style.--font-size')
-  fontSizeBinding: string = this.fontSize();
+  hover: WritableSignal<boolean> = signal(false);
 
   /**
    * Constructor.
@@ -62,7 +74,6 @@ export class ScoreRingComponent {
     effect(() => {
       this.percentage = Math.round(this.score() * 10) + '%';
       this.thicknessBinding = this.thickness();
-      this.fontSizeBinding = this.fontSize();
 
       this.cdRef.detectChanges();
     });
@@ -78,6 +89,25 @@ export class ScoreRingComponent {
     return ScoreRingComponent.getColorVariableForScore(score);
   }
 
+  /**
+   * Called when a user hovers-enters the score ring with their mouse.
+   */
+  onMouseEnter() {
+    // Set a timer that is invalided if the user hovers-outs
+    this.timeout = setTimeout(() => {
+      this.hover.set(true);
+    }, this.hoverDelay);
+  }
+
+  /**
+   * Called when a user hovers-out the score ring with their mouse.
+   */
+  onMouseLeave() {
+    this.hover.set(false)
+    clearTimeout(this.timeout);
+    this.timeout = undefined;
+  }
+
   /**
    * Get the color grade of the repository based on its score.
    * @param score