Merge pull request #27 from appirio-tech/view-files

Add Previews for Files in Image Viewer

Author: samsep

src/.DS_Store

@@ -19,6 +19,11 @@ ImageViewerController = ->
 
     vm.onFileChange({file: vm.file}) if vm.onFileChange
 
+  vm.isImage = (file) ->
+    pattern = new RegExp('image.*')
+    testFile = if file then file else vm.file
+    pattern.test(testFile.type)
+
   vm.viewNext = ->
     update(vm.currentIndex + 1)
 

src/images/file-icon.svg

@@ -38,13 +38,30 @@ image-slide-viewer {
         text-align: center;
 
         &.small, &.fit {
-          img {
+          .preview {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translateY(-50%) translateX(-50%);
             max-width: 100%;
             max-height: 100%;
+
+            &.file {
+              background-color: $gray;
+              height: 200px;
+              width: 400px;
+              min-width: 100px;
+              min-height: 50px;
+
+              img {
+                max-height: 100px;
+                max-width: 100px;
+                position: inherit;
+                top: inherit;
+                left: inherit;
+                transform: inherit;
+              }
+            }
           }
         }
 
@@ -85,11 +102,14 @@ image-slide-viewer {
       }
 
       button {
-        img {
+        img, a {
           width  : 60px;
           height : 50px;
           display: block;
         }
+        .preview-container {
+          background-color: $gray;
+        }
       }
     }
   }

src/scripts/controllers/image-viewer.controller.coffee

@@ -10,7 +10,10 @@ main.flex.column.light-bg
         button.clean.icon.arrow
 
     .image-container.flex-grow(ng-class="{ 'small' : !vm.largeImage, 'fit' : vm.largeImage && !vm.zoom, 'full elevated': vm.largeImage && vm.zoom }")
-      img.preview-image(ng-src="{{vm.file.url}}" ng-click="vm.toggleZoom()" ng-class="{ 'elevated': !vm.largeImage || (vm.largeImage && !vm.zoom) }")
+      img.preview(ng-if="vm.isImage()" ng-src="{{vm.file.url}}" ng-click="vm.toggleZoom()" ng-class="{ 'elevated': !vm.largeImage || (vm.largeImage && !vm.zoom) }")
+
+      a.preview.file.flex.center.middle(ng-if="!vm.isImage()" href="{{vm.file.url}}" target="_blank")
+        img(ng-src=require('../images/file-icon.svg'))
 
     .next.flex
       a.arrow-next(ng-class="{invisible: !vm.nextFile}" ng-click="vm.viewNext()")
@@ -19,6 +22,9 @@ main.flex.column.light-bg
   ul.thumbnails
     li.thumbnail(ng-repeat="file in vm.files" ng-class="{ elevated: !vm.isCurrent(file) }")
       button.clean(ng-click="vm.selectFile(file)")
-        img(ng-src="{{ file.url }}")
+        img(ng-src="{{ file.url }}" ng-if="vm.isImage(file)")
+
+        a.preview-container.flex.middle.center(ng-if="!vm.isImage(file)")
+          img(ng-src=require('../images/file-icon.svg'))
 
         .notification.absolute(ng-if="file.unreadMessages > 0 && vm.showNotifications") {{ file.unreadMessages }}