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