github/aspnet-core-signalr-angular
1
1
Fork 0
mirror of https://github.com/chsakell/aspnet-core-signalr-angular.git synced 2025-12-22 09:17:47 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

fix highlight directive

Browse Source
This commit is contained in:
chsakell
2016-10-05 10:58:14 +03:00
parent f11351b523
commit 8a8055d0ba
4 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/shared/components/chat.component.html
View File

@@ -13,7 +13,7 @@
<tr>
<td colspan="2">
<div class="chat-table">
<table class="table table-striped">
<table class="table">
<thead>
<tr>
<th></th>

2
app/shared/components/match.component.html
View File

@@ -34,7 +34,7 @@
<tr>
<td colspan="2">
<div class="feed-table">
<table class="table table-striped">
<table class="table">
<thead>
<tr>
<th></th>

15
app/shared/directives/highlight.directive.ts
View File

@@ -5,17 +5,14 @@ import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/c
})
export class HighlightDirective {
constructor(private el: ElementRef, private renderer: Renderer) {
this.renderer.setElementClass(this.el.nativeElement, 'feed-highlight', true);
let self = this;
self.renderer.setElementClass(this.el.nativeElement, 'feed-highlight', true);
setTimeout(function() {
console.log('removing..');
self.renderer.setElementClass(self.el.nativeElement,'feed-highlight-light', true);
}, 1000);
}
@HostListener('mouseenter') onMouseEnter() {
this.highlight('white');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
}

11
wwwroot/css/site.css
View File

@@ -47,7 +47,16 @@ th, td {
}
.feed-highlight {
background-color: #eee;
background-color: #a94442;
-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;
}
.feed-highlight-light {
background-color: white;
-webkit-transition: background-color 2000ms linear;
-moz-transition: background-color 2000ms linear;
-o-transition: background-color 2000ms linear;