Merged release/0.2.0 into master

package.json

@@ -1,11 +1,11 @@
 {
-  "name"    : "openpics",
+  "name": "openpics",
   "productName": "Open Pics",
-  "description":"Search and download free stock photos from multiple sources for your creative projects",
-  "version" : "0.1.0",
-  "author":{
-    "name":"Damodar Lohani",
-    "email":"[email protected]",
+  "description": "Search and download free stock photos from multiple sources for your creative projects",
+  "version": "0.1.0",
+  "author": {
+    "name": "Damodar Lohani",
+    "email": "[email protected]",
     "url": "https://lohanitech.com/members/damodar-lohani"
   },
   "homepage": "http://openpics.xyz",
@@ -16,7 +16,7 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "electron-watch": "node_modules/.bin/electron-angular-toolkit build -w",
+    "electron-watch": "src/tools/electron-angular-toolkit build -w",
     "electron-run": "electron ."
   },
   "private": true,
@@ -30,6 +30,7 @@
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",
     "@types/electron": "^1.4.32",
+    "blazy": "^1.8.2",
     "core-js": "^2.4.1",
     "immutable": "^3.8.1",
     "rxjs": "^5.1.0",
@@ -38,6 +39,7 @@
   "devDependencies": {
     "@angular/cli": "1.0.0-beta.32.3",
     "@angular/compiler-cli": "^2.4.0",
+    "@types/blazy": "^1.5.30",
     "@types/electron": "^1.4.32",
     "@types/jasmine": "2.5.38",
     "@types/node": "^6.0.63",
@@ -69,4 +71,4 @@
       "output": "dist"
     }
   }
-}
+}

src/app/app.component.html

@@ -1,6 +1,6 @@
 <div id="main">
   <app-sidebar *ngIf="showSidebar" ></app-sidebar>
   <div class="content {{fullWidth}}">
-    <router-outlet></router-outlet>
+    <app-image-gallery></app-image-gallery>
   </div>
 </div>

src/app/app.component.ts

@@ -16,6 +16,9 @@ export class AppComponent {
       this.showSidebar = show;
       this.fullWidth = (show)?'':'full-width';
     });
+  }
+  ngOnInit(){
     this.api.getRecentPics();
+
   }
 }

src/app/app.module.ts

@@ -3,9 +3,6 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
-
-import { routing } from './app.routes';
-
 import { AppComponent } from './app.component';
 import { UnsplashApiService } from './services/unsplash-api.service';
 import { TumblrApiService } from './services/tumblr-api.service';
@@ -33,8 +30,7 @@ import { ImageGalleryComponent } from './components/image-gallery/image-gallery.
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
-    routing
+    HttpModule
   ],
   providers: [UnsplashApiService, TumblrApiService, PixabayApiService, FreerangestockApiService, ApiService, ElectronService, PicStore, LocalStore],
   bootstrap: [AppComponent]

src/app/components/image-gallery/image-gallery.component.html

@@ -1,19 +1,102 @@
 <app-toolbar class="level notification" (search)="search($event)"></app-toolbar>
 <div class="photos {{fullWidth}}">
-  <div class="box pics-container" (scroll)="scroll($event)">
+  <div id="pics-container" class="box pics-container">
   <div id="pics" class="pics">
       <div *ngIf="pics" class="gallery">
-        <div *ngFor="let pic of pics" class="pic">
-          <a [routerLink]="['view']" (click)="select(pic)">
-            <img [src]="pic.thumbnailUrl" />
-          </a>
-          <div class="pic-footer">
-            Source: <a [href]="pic.foundAt" (click)="openExternal($event)">{{pic.source.name}}</a> | By: <a [href]="pic.author.url" (click)="openExternal($event)">{{pic.author.name}}</a>
-          </div>
-        </div>
-
+          <div *ngFor="let pic of pics; trackBy: trackPic" class="pic">
+            <a (click)="select(pic)">
+              <img data-src="assets/placeholder.png" [src]="pic.thumbnailUrl" />
+            </a>
+            <div class="pic-buttons">
+              <div class="buttons">
+                <a class="button is-primary" [href]="pic.fullUrl" download>
+                  <span class="icon">
+                    <i class="fa fa-download"></i>
+                  </span>
+                </a>
+                <span *ngIf="pic.source.name !='Pixabay'">
+                  <a *ngIf="!isFavourite(pic)"  class="button" (click)="addToFavourite(pic)">
+                    <span class="icon">
+                      <i class="fa fa-heart"></i>
+                    </span>
+                  </a>
+                  <a *ngIf="isFavourite(pic)"  class="button is-danger" (click)="removeFromFavourite(pic)">
+                    <span class="icon">
+                      <i class="fa fa-heart"></i>
+                    </span>
+                  </a>
+                  <a  class="button is-primary" (click)="toggleAddToAlbum(pic)">
+                    <span class="icon">
+                      <i class="fa fa-plus-circle"></i>
+                    </span>
+                  </a>
+                </span>
+                <a class="button is-info" (click)="select(pic)">
+                  <span class="icon">
+                    <i class="fa fa-eye"></i>
+                  </span>
+                </a>
+              </div>
+              <div class="pic-footer">
+                Source: <a [href]="pic.foundAt" (click)="openExternal($event)">{{pic.source.name}}</a> | By: <a [href]="pic.author.url" (click)="openExternal($event)">{{pic.author.name}}</a>
+              </div>
+            </div>
+          </div> 
       </div>
       </div>
-      <div id="infinite"></div>
+      <div id="infinite" class="level" *ngIf="api.loadComplete()" >
+        <div class="level-left">
+          <span *ngIf="api.showPrev()"  class="level-item">
+            <a class="button is-primary" (click)="prevPage()">Previous</a>
+          </span>
+        </div>
+        <div class="level-right">
+          <span *ngIf="api.showNext()"  class="level-item">
+            <a class="button is-primary" (click)="nextPage()">Next</a>
+          </span>
+        </div>
+      </div>
+    </div>
+</div>
+
+<div class="modal {{isActive}}">
+  <div class="modal-background" (click)="toggleViewer()"></div>
+  <div class="modal-content">
+    <app-image-viewer *ngIf="picStore.selectedPic" [pic]="picStore.selectedPic"></app-image-viewer>
+  </div>
+  <button class="modal-close" (click)="toggleViewer()"></button>
+</div>
+
+<div *ngIf="showAddToAlbum"  class="modal {{showAddToAlbum}}">
+  <div class="modal-background" (click)="toggleAddToAlbum()"></div>
+  <div class="modal-content">
+    <div class="box">
+      <article class="media">
+        <figure class="media-left">
+          <p class="image">
+            <img [src]="picStore.selectedPic.thumbnailUrl">
+          </p>
+        </figure>
+        <div class="media-content">
+          <div class="content">
+            <nav class="menu">
+              <p class="menu-label">Add to</p>
+              <ul class="menu-list">
+                <ng-container *ngFor="let collection of collections">
+                  <li *ngIf="!isInCollection(picStore.selectedPic, collection)" ><a (click)="addToAlbum(picStore.selectedPic,collection)">{{collection}}</a></li> 
+                </ng-container>
+              </ul>
+              <p class="menu-label">Remove From</p>
+              <ul class="menu-list">
+                <ng-container *ngFor="let collection of collections">
+                  <li *ngIf="isInCollection(picStore.selectedPic, collection)" ><a (click)="removeFromAlbum(picStore.selectedPic,collection)">{{collection}}</a></li> 
+                </ng-container>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </article>
     </div>
+  </div>
+  <button class="modal-close" (click)="toggleAddToAlbum()"></button>
 </div>

src/app/components/image-gallery/image-gallery.component.scss

@@ -16,13 +16,25 @@
     overflow: auto;
   }
   .pics {
-    column-count: 4;
+    column-count: 6;
     .pic {
       min-height: 150px;
       position: relative;
       break-inside: avoid;
+      .pic-buttons{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0, .5);
+        top:0;
+        left: 0;
+        display:none;
+        align-items: center;
+        .buttons{
+            margin: 0 auto;
+        }
+      }
       .pic-footer {
-        display: none;
         position: absolute;
         bottom: 5px;
         left: 0;
@@ -37,9 +49,12 @@
         color: #f8f8f8;
       }
       &:hover {
-        .pic-footer {
-          display: block;
+        .pic-buttons{
+          display:flex;
         }
+        // .pic-footer {
+        //   display: block;
+        // }
       }
     }
   }
@@ -49,3 +64,27 @@ app-toolbar {
   margin-right: 20px;
   top: 20px;
 }
+.modal{
+  .menu{
+    ul{
+      list-style: none;
+    }
+  }
+  .media{
+    img{
+      max-width: 200px;
+      height: auto;
+    }
+  }
+}
+
+@media(max-width: 1600px){
+  .pics{
+    column-count: 4 !important;
+  }
+}
+@media(max-width: 1200px){
+  .pics{
+    column-count: 3 !important;
+  }
+}

src/app/components/image-gallery/image-gallery.component.ts

@@ -16,31 +16,32 @@ export class ImageGalleryComponent implements OnInit {
   query:string;
   scrollComplete:boolean = true;
   fullWidth='';
-  constructor(public api: ApiService, public electron:ElectronService, public picStore: PicStore, public store: LocalStore, public elementRef:ElementRef){
+  isActive='';
+  showAddToAlbum='';
+  collections:any;
+  constructor(public api: ApiService, public electron:ElectronService, public picStore: PicStore, public store: LocalStore){
     store.showSidebar.subscribe(show=>{
       this.fullWidth = (show)?'':'full-width';
     })
     picStore.pics$.subscribe(pics=>{
       this.pics = pics;
+      console.log(this.pics);
       this.scrollComplete = true;
     })
+    store.collections.subscribe(collections=>this.collections = collections.collections);
   }
-  scroll(event){
-    var loaderPos = this.elementRef.nativeElement.querySelector('#infinite').offsetTop+this.elementRef.nativeElement.querySelector('#infinite').offsetHeight;
-    var scrollBottom = event.target.offsetHeight + event.target.scrollTop;
-    if(scrollBottom >= loaderPos){
-      if(this.scrollComplete){
-        this.scrollComplete=false;
-        this.api.nextPage();
-      }
-    }
+  nextPage(){
+    this.api.nextPage();
+  }
+  prevPage(){
+    this.api.prevPage();
   }
-
   ngOnInit() {
 
   }
   select(pic:any){
     this.picStore.selectedPic = pic;
+    this.toggleViewer();
   }
 
   search(event){
@@ -50,4 +51,35 @@ export class ImageGalleryComponent implements OnInit {
     event.preventDefault();
     this.electron.openExternal(event.target.href);
   }
+  trackPic(index,pic){
+    return pic ? pic.foundAt : undefined;
+  }
+  toggleViewer(){
+    this.isActive = (this.isActive === '')?'is-active':'';
+  }
+
+  addToFavourite(pic){
+    this.store.addPicToCollection(pic,LocalStore.KEY_FAVOURITE)
+  }
+  toggleAddToAlbum(pic){
+    this.picStore.selectedPic = pic;
+    this.showAddToAlbum = (this.showAddToAlbum === '')?'is-active':'';
+  }
+  addToAlbum(pic,album){
+    this.store.addPicToCollection(pic,album);
+    this.toggleAddToAlbum(pic);
+  }
+  removeFromAlbum(pic,album){
+    this.store.removeFromCollection(pic,album);
+    this.toggleAddToAlbum(pic);
+  }
+  removeFromFavourite(pic){
+    this.store.removeFromCollection(pic, LocalStore.KEY_FAVOURITE);
+  }
+  isFavourite(pic){
+    return this.store.isInCollection(pic,LocalStore.KEY_FAVOURITE);
+  }
+  isInCollection(pic,album){
+    return this.store.isInCollection(pic, album);
+  }
 }