add styling for file previews

Author: samsep

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

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

src/styles/image-viewer.scss

@@ -38,23 +38,29 @@ 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-preview {
-            background-color: $gray;
-            height: 148px;
-            width: 148px;
-
-            img {
-              height: 35px;
-              width: 35px;
+            &.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;
+              }
             }
           }
         }
@@ -96,11 +102,14 @@ image-slide-viewer {
       }
 
       button {
-        img {
+        img, a {
           width  : 60px;
           height : 50px;
           display: block;
         }
+        .preview-container {
+          background-color: $gray;
+        }
       }
     }
   }

src/views/image-viewer.directive.jade

@@ -10,9 +10,9 @@ 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-if="vm.isImage()" 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.file-preview.flex.center.middle(ng-if="!vm.isImage()")
+      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
@@ -22,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 }}