highlight directive added

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],

app/shared/components/match.component.html

@@ -19,7 +19,7 @@
                 <span class="label label-success">{{match.Type}}</span>
             </td>
             <td>
-                <button type="button" class="btn btn-default btn-xs" (click)="subscribe()">
+                <button type="button" class="btn btn-default btn-md" (click)="subscribe()">
                             Subscribe to feed
                         </button>
             </td>
@@ -39,7 +39,7 @@
                             </tr>
                         </thead>
                         <tbody>
-                            <tr *ngFor="let feed of match.Feeds">
+                            <tr *ngFor="let feed of match.Feeds" feedHighlight>
                                 <td>
                                     <span class="feed-time">{{feed.CreatedAt | date:'shortTime' }}</span>
                                 </td>

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);
+  }
+}

wwwroot/css/site.css

@@ -36,3 +36,12 @@ 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;
+}