From f23e285a9fcc96912e6f870814dd3dcd68dab412 Mon Sep 17 00:00:00 2001
From: chsakell <chsakell@gmail.com>
Date: Mon, 3 Oct 2016 14:39:19 +0300
Subject: [PATCH] highlight directive added

---
 app/app.module.ts                            |  2 ++
 app/shared/components/match.component.html   |  4 ++--
 app/shared/directives/highlight.directive.ts | 22 ++++++++++++++++++++
 wwwroot/css/site.css                         |  9 ++++++++
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 app/shared/directives/highlight.directive.ts

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 @@
                 <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>
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