diff --git a/app/app.module.ts b/app/app.module.ts index 39f651a..536e7f7 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -7,6 +7,7 @@ import { AppComponent } from './app.component'; import { ConfigService } from './shared/services/config.service'; import { DataService } from './shared/services/data.service'; import { HomeComponent } from './home/home.component'; +import { HighlightDirective } from './shared/directives/highlight.directive'; import { MatchComponent } from './shared/components/match.component'; import { routing } from './app.routes'; @@ -20,6 +21,7 @@ import { routing } from './app.routes'; declarations: [ AppComponent, HomeComponent, + HighlightDirective, MatchComponent ], bootstrap: [AppComponent], diff --git a/app/shared/components/match.component.html b/app/shared/components/match.component.html index e2fdfe9..938b2a6 100644 --- a/app/shared/components/match.component.html +++ b/app/shared/components/match.component.html @@ -19,7 +19,7 @@ {{match.Type}} - @@ -39,7 +39,7 @@ - + {{feed.CreatedAt | date:'shortTime' }} diff --git a/app/shared/directives/highlight.directive.ts b/app/shared/directives/highlight.directive.ts new file mode 100644 index 0000000..979db46 --- /dev/null +++ b/app/shared/directives/highlight.directive.ts @@ -0,0 +1,22 @@ +import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core'; + +@Directive({ + selector: '[feedHighlight]' +}) +export class HighlightDirective { + constructor(private el: ElementRef, private renderer: Renderer) { + this.renderer.setElementClass(this.el.nativeElement, 'feed-highlight', true); + } + + @HostListener('mouseenter') onMouseEnter() { + this.highlight('white'); + } + + @HostListener('mouseleave') onMouseLeave() { + this.highlight(null); + } + + private highlight(color: string) { + this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color); + } +} \ No newline at end of file diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css index a766d32..6c11274 100644 --- a/wwwroot/css/site.css +++ b/wwwroot/css/site.css @@ -35,4 +35,13 @@ th, td { .feed-update { color: #337ab7; +} + +.feed-highlight { + background-color: #eee; + -webkit-transition: background-color 2000ms linear; + -moz-transition: background-color 2000ms linear; + -o-transition: background-color 2000ms linear; + -ms-transition: background-color 2000ms linear; + transition: background-color 2000ms linear; } \ No newline at end of file