Merge branch 'dev-v7-U4-8580' of git://github.com/bjarnef/Umbraco-CMS into bjarnef-dev-v7-U4-8580

src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js

@@ -138,6 +138,22 @@ Use this directive to generate a thumbnail grid of media items.
                 if (!item.isFolder) {
                     item.thumbnail = mediaHelper.resolveFile(item, true);
                     item.image = mediaHelper.resolveFile(item, false);
+
+                    var fileProp = _.find(item.properties, function (v) {
+                        return (v.alias === "umbracoFile");
+                    });
+
+                    if (fileProp && fileProp.value) {
+                        item.file = fileProp.value;
+                    }
+
+                    var extensionProp = _.find(item.properties, function (v) {
+                        return (v.alias === "umbracoExtension");
+                    });
+
+                    if (extensionProp && extensionProp.value) {
+                        item.extension = extensionProp.value;
+                    }
                 }
             }
 

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -704,6 +704,31 @@ ul.color-picker li a  {
   padding-top: 27px;
 }
 
+.umb-fileupload .file-icon {
+  text-align: center;
+  display: block;
+  position: relative;
+  padding: 5px 0;
+
+  > .icon {
+    font-size: 70px;
+    line-height: 110%;
+    color: #666;
+    text-align: center;
+  }
+
+  > span {
+    color: #fff;
+    background: #666;
+    padding: 1px 3px;
+    font-size: 12px;
+    line-height: 130%;
+    position: absolute;
+    top: 45px;
+    left: 110px;
+  }
+}
+
 .umb-fileupload input {
   font-size: 12px;
   line-height: 1;

src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html

@@ -1,7 +1,6 @@
 <div class="umb-media-grid">
-    <div class="umb-media-grid__item" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail}">
+    <div class="umb-media-grid__item" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail, '-svg': item.extension == 'svg'}">
         <div>
-
             <i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>
 
             <div class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">
@@ -9,11 +8,13 @@
                 <div class="umb-media-grid__item-name">{{item.name}}</div>
             </div>
 
-            <div class="umb-media-grid__image-background" ng-if="item.thumbnail"></div>
-            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" draggable="false"/>
-            <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false"/>
+            <div class="umb-media-grid__image-background" ng-if="item.thumbnail || item.extension == 'svg'"></div>
+            <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" draggable="false" />
+            <object class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="!item.thumbnail && item.extension == 'svg'" type="image/svg+xml" data="{{item.file}}" alt="{{item.name}}" draggable="false"></object>
 
-            <i class="umb-media-grid__item-icon {{ item.icon }}" ng-if="!item.thumbnail"></i>
+            <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail && item.extension != 'svg'" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false" />
+
+            <i class="umb-media-grid__item-icon {{item.icon}}" ng-if="!item.thumbnail && item.extension != 'svg'"></i>
 
         </div>
     </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js

@@ -71,7 +71,10 @@ function fileUploadController($scope, $element, $compile, imageHelper, fileManag
                         "GetBigThumbnail",
                         [{ originalImagePath: file.file }]);
 
+            var extension = file.file.substring(file.file.lastIndexOf(".") + 1, file.file.length);
+
             file.thumbnail = thumbnailUrl;
+            file.extension = extension.toLowerCase();
         });
 
         $scope.clearFiles = false;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html

@@ -1,10 +1,15 @@
 <div class="umb-editor umb-fileupload" ng-controller="Umbraco.PropertyEditors.FileUploadController">
-
+    
     <div ng-show="persistedFiles.length > 0">
         <ul class="thumbnails">
             <li class="span4 thumbnail" ng-repeat="file in persistedFiles">
-                <a href="{{file.file}}" target="_blank" ng-switch on="file.isImage" >
-                    <img ng-src="{{file.thumbnail}}" ng-switch-when="true" alt="{{file.file}}"/>
+                <a href="{{file.file}}" target="_blank" ng-switch on="file.isImage">
+                    <img ng-src="{{file.thumbnail}}" ng-switch-when="true" alt="{{file.file}}" />
+                    <img ng-src="{{file.file}}" ng-switch-when="false" ng-if="file.extension == 'svg'" alt="{{file.file}}" />
+                    <span class="file-icon" ng-if="!file.isImage && file.extension != 'svg'">
+                        <i class="icon icon-document"></i>
+                        <span>.{{file.extension}}</span>
+                    </span>
                     <span ng-switch-default>{{file.file}}</span>
                 </a>
             </li>