diff --git a/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html b/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html index 5c3e1a9a1..a3d2270e5 100644 --- a/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html +++ b/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html @@ -8,7 +8,11 @@ > - +

diff --git a/frontend/projects/marketplace/src/pages/show/package/package.component.html b/frontend/projects/marketplace/src/pages/show/package/package.component.html index 6c1cdf677..9ea3393e7 100644 --- a/frontend/projects/marketplace/src/pages/show/package/package.component.html +++ b/frontend/projects/marketplace/src/pages/show/package/package.component.html @@ -5,7 +5,7 @@ [src]="'data:image/png;base64,' + pkg.icon | trustUrl" />
-

{{ pkg.manifest.title }}

+

{{ pkg.manifest.title }}

{{ pkg.manifest.version | displayEmver }}

Released: {{ pkg['published-at'] | date: 'medium' }} diff --git a/frontend/projects/marketplace/src/pages/show/package/package.component.scss b/frontend/projects/marketplace/src/pages/show/package/package.component.scss index c10aba5c2..9e75cfd41 100644 --- a/frontend/projects/marketplace/src/pages/show/package/package.component.scss +++ b/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 { diff --git a/frontend/projects/marketplace/src/pages/show/package/package.module.ts b/frontend/projects/marketplace/src/pages/show/package/package.module.ts index ada551799..ec15f429b 100644 --- a/frontend/projects/marketplace/src/pages/show/package/package.module.ts +++ b/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], }) diff --git a/frontend/projects/shared/src/components/ticker/ticker.component.scss b/frontend/projects/shared/src/components/ticker/ticker.component.scss new file mode 100644 index 000000000..a94230795 --- /dev/null +++ b/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; + } +} diff --git a/frontend/projects/shared/src/components/ticker/ticker.component.ts b/frontend/projects/shared/src/components/ticker/ticker.component.ts new file mode 100644 index 000000000..f330e0be1 --- /dev/null +++ b/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: '', + styleUrls: ['./ticker.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TickerComponent { + constructor(private readonly elementRef: ElementRef) {} + + @HostBinding('style.--indent.px') + indent = 0 + + @HostListener('mouseenter') + onMouseEnter() { + const { scrollWidth, clientWidth } = this.elementRef.nativeElement + + this.indent = Math.ceil(clientWidth - scrollWidth) + } +} diff --git a/frontend/projects/shared/src/components/ticker/ticker.module.ts b/frontend/projects/shared/src/components/ticker/ticker.module.ts new file mode 100644 index 000000000..c2bd46f15 --- /dev/null +++ b/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 {} diff --git a/frontend/projects/shared/src/public-api.ts b/frontend/projects/shared/src/public-api.ts index a957014ee..311cbc4bf 100644 --- a/frontend/projects/shared/src/public-api.ts +++ b/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'