socialnetworknews-web

commit 25bff8a37e81d696e51e779e961acd846007b1a2
parent b50090e300dec354a69f217e71173e6bdfc78fda
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sun, 25 Mar 2018 13:53:07 +0200

Try to deduplicate some code and fix the spinner

Diffstat:
M
src/app/papers-list/papers-list.component.html
 | 
4
++--
M
src/app/papers-list/papers-list.component.ts
 | 
14
++++----------
M
src/app/spinner/spinner.component.html
 | 
2
+-
M
src/app/spinner/spinner.component.scss
 | 
12
++++++------
M
src/app/tweet-list/tweet-list.component.html
 | 
4
++--
M
src/app/tweet-list/tweet-list.component.ts
 | 
13
++++---------
A
src/app/utils/lightbox.ts
 | 
12
++++++++++++

7 files changed, 31 insertions(+), 30 deletions(-)
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -5,12 +5,12 @@
       <mat-card-title>{{item.name}}</mat-card-title>
       <mat-card-subtitle>AUTHOR (Placeholder)</mat-card-subtitle>
     </mat-card-header>
-    <a (click)="show(lightboxItem)" >
+    <a (click)="lightbox.show(lightboxItem)" >
       <img mat-card-image *ngIf="item.paper_image" [src]="item.paper_image">
     </a>
 
     <!-- lightbox container hidden with CSS -->
-    <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
+    <a (click)="lightbox.hide(lightboxItem)" class="lightbox" #lightboxItem>
       <div class="img-wrapper">
         <img *ngIf="item.paper_image" [src]="item.paper_image">
       </div>
diff --git a/src/app/papers-list/papers-list.component.ts b/src/app/papers-list/papers-list.component.ts
@@ -10,7 +10,7 @@ import 'rxjs/add/operator/take';
 import 'rxjs/add/operator/concat';
 import 'rxjs/add/observable/throw';
 import {ToastrService} from 'ngx-toastr';
-import {Router} from '@angular/router';
+import {Lightbox} from '../utils/lightbox';
 
 @Component({
   selector: 'app-papers-list',
@@ -19,22 +19,16 @@ import {Router} from '@angular/router';
 })
 export class PapersListComponent implements OnInit {
   data: (Paper)[];
+  lightbox: Lightbox;
 
-  constructor(private apiService: ApiService, private toastr: ToastrService) {
+  constructor(private apiService: ApiService, private toastr: ToastrService, private lightbox: Lightbox) {
+    this.lightbox = lightbox;
     Raven.captureBreadcrumb({
       message: 'Listing Papers',
       category: 'papers-list'
     });
   }
 
-  hide(el) {
-    el.style.display = '';
-  }
-
-  show(el): void {
-    el.style.display = 'block';
-  }
-
   ngOnInit() {
     this.getPapers();
   }
diff --git a/src/app/spinner/spinner.component.html b/src/app/spinner/spinner.component.html
@@ -1 +1 @@
-<div class="spinner"></div>
+<div class="sk-scaleout" [style.background-color]='backgroundColor'></div>
diff --git a/src/app/spinner/spinner.component.scss b/src/app/spinner/spinner.component.scss
@@ -1,12 +1,12 @@
-.spinner {
+.sk-scaleout {
+  top: 50%;
+  margin: auto;
   width: 40px;
   height: 40px;
-  margin: 100px auto;
-  background-color: #333;
-
-  border-radius: 100%;
+  position: relative;
+  text-align: center;
   -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
-  animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout  1.0s infinite ease-in-out;
 }
 
 @-webkit-keyframes sk-scaleout {
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -15,12 +15,12 @@
         <mat-card-title>{{item.display_name}}</mat-card-title>
         <mat-card-subtitle><i class="fa fa-clock-o">&nbsp;</i>{{item.created_at.toLocaleString()}}</mat-card-subtitle>
       </mat-card-header>
-      <a (click)="show(lightboxItem)" >
+      <a (click)="lightbox.show(lightboxItem)" >
         <img mat-card-image *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
       </a>
 
       <!-- lightbox container hidden with CSS -->
-      <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
+      <a (click)="lightbox.hide(lightboxItem)" class="lightbox" #lightboxItem>
         <div class="img-wrapper">
           <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]">
         </div>
diff --git a/src/app/tweet-list/tweet-list.component.ts b/src/app/tweet-list/tweet-list.component.ts
@@ -10,6 +10,7 @@ import 'rxjs/add/operator/take';
 import 'rxjs/add/operator/concat';
 import 'rxjs/add/observable/throw';
 import {ToastrService} from 'ngx-toastr';
+import {Lightbox} from '../utils/lightbox';
 
 @Component({
   selector: 'app-tweet-list',
@@ -20,8 +21,10 @@ export class TweetListComponent implements OnInit {
   @Input() uuid;
   data: (TweetsEntity)[];
   paperData: Paper;
+  lightbox: Lightbox;
 
-  constructor(private apiService: ApiService, private toastr: ToastrService) {
+  constructor(private apiService: ApiService, private toastr: ToastrService, private lightbox: Lightbox) {
+    this.lightbox = lightbox;
     Raven.captureBreadcrumb({
       message: 'Showing Paper',
       category: 'paper',
@@ -31,14 +34,6 @@ export class TweetListComponent implements OnInit {
     });
   }
 
-  hide(el) {
-    el.style.display = '';
-  }
-
-  show(el): void {
-    el.style.display = 'block';
-  }
-
   ngOnInit() {
     this.getYesterday();
     this.getPaper();
diff --git a/src/app/utils/lightbox.ts b/src/app/utils/lightbox.ts
@@ -0,0 +1,12 @@
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class Lightbox {
+  public hide(el) {
+    el.style.display = '';
+  }
+
+  public show(el) {
+    el.style.display = 'block';
+  }
+}