feat(shared): Ticker add new component and use it in marketplace (#1940)

frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html

@@ -8,7 +8,11 @@
     >
       <ion-item [routerLink]="['/marketplace', dep.key]">
         <ion-thumbnail slot="start">
-          <img alt="" [src]="getImg(dep.key) | trustUrl" />
+          <img
+            alt=""
+            style="border-radius: 100%"
+            [src]="getImg(dep.key) | trustUrl"
+          />
         </ion-thumbnail>
         <ion-label>
           <h2>

frontend/projects/marketplace/src/pages/show/package/package.component.html

@@ -5,7 +5,7 @@
     [src]="'data:image/png;base64,' + pkg.icon | trustUrl"
   />
   <div class="text">
-    <h1 class="title">{{ pkg.manifest.title }}</h1>
+    <h1 ticker class="title">{{ pkg.manifest.title }}</h1>
     <p class="version">{{ pkg.manifest.version | displayEmver }}</p>
     <p class="published">
       Released: {{ pkg['published-at'] | date: 'medium' }}

frontend/projects/marketplace/src/pages/show/package/package.component.scss

@@ -7,11 +7,13 @@
 .text {
   display: inline-block;
   vertical-align: top;
+  overflow: hidden;
 }
 
 .logo {
   width: 80px;
   margin-right: 16px;
+  border-radius: 100%;
 }
 
 .title {

frontend/projects/marketplace/src/pages/show/package/package.module.ts

@@ -1,12 +1,22 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { IonicModule } from '@ionic/angular'
-import { EmverPipesModule, SharedPipesModule } from '@start9labs/shared'
+import {
+  EmverPipesModule,
+  SharedPipesModule,
+  TickerModule,
+} from '@start9labs/shared'
 
 import { PackageComponent } from './package.component'
 
 @NgModule({
-  imports: [CommonModule, IonicModule, SharedPipesModule, EmverPipesModule],
+  imports: [
+    CommonModule,
+    IonicModule,
+    SharedPipesModule,
+    EmverPipesModule,
+    TickerModule,
+  ],
   declarations: [PackageComponent],
   exports: [PackageComponent],
 })

frontend/projects/shared/src/components/ticker/ticker.component.scss

@@ -0,0 +1,11 @@
+:host {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: text-indent 1s;
+
+  &:hover {
+    text-indent: var(--indent, 0);
+    text-overflow: clip;
+  }
+}

frontend/projects/shared/src/components/ticker/ticker.component.ts

@@ -0,0 +1,27 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostBinding,
+  HostListener,
+} from '@angular/core'
+
+@Component({
+  selector: '[ticker]',
+  template: '<ng-content></ng-content>',
+  styleUrls: ['./ticker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TickerComponent {
+  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
+
+  @HostBinding('style.--indent.px')
+  indent = 0
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    const { scrollWidth, clientWidth } = this.elementRef.nativeElement
+
+    this.indent = Math.ceil(clientWidth - scrollWidth)
+  }
+}

frontend/projects/shared/src/components/ticker/ticker.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core'
+
+import { TickerComponent } from './ticker.component'
+
+@NgModule({
+  declarations: [TickerComponent],
+  exports: [TickerComponent],
+})
+export class TickerModule {}

frontend/projects/shared/src/public-api.ts

@@ -13,6 +13,8 @@ export * from './components/markdown/markdown.component'
 export * from './components/markdown/markdown.component.module'
 export * from './components/text-spinner/text-spinner.component'
 export * from './components/text-spinner/text-spinner.component.module'
+export * from './components/ticker/ticker.component'
+export * from './components/ticker/ticker.module'
 export * from './components/toast/toast.component'
 export * from './components/toast/toast.module'
 export * from './components/toast/toast-button.directive'