From 562367e9a2fa67b707b98b0213e0f9229c9f8694 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 16 Dec 2014 15:25:13 +0000
Subject: [PATCH] Label on files not just folders

---
 .../src/less/property-editors.less            | 37 +++++++++++--------
 .../directives/html/umb-photo-folder.html     |  8 ++--
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 1aea07bfbd..51319a5bf5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -25,7 +25,7 @@
 }
 
 .umb-codeeditor{
-  width: 99%; 
+  width: 99%;
 }
 
 //
@@ -68,7 +68,7 @@ div.umb-codeeditor .umb-btn-toolbar {
 .mce-ico{font-size: 12px !important; color: @blackLight !important;}
 /* Special case to support helviticons for the tiny mce button controls */
 .mce-ico.mce-i-custom[class^="icon-"],
-.mce-ico.mce-i-custom[class*=" icon-"] {    
+.mce-ico.mce-i-custom[class*=" icon-"] {
   font-family: icomoon;
   font-size:16px !important;
 }
@@ -100,8 +100,8 @@ ul.color-picker li a  {
 /* pre-value editor */
 
 .control-group.color-picker-preval pre {
-    display: inline; 
-    margin-right: 20px; 
+    display: inline;
+    margin-right: 20px;
     margin-left: 10px;
 }
 
@@ -116,8 +116,8 @@ ul.color-picker li a  {
 // --------------------------------------------------
 .umb-mediapicker .add-link{
   display: inline-block;
-  height: 120px; 
-  width: 120px; 
+  height: 120px;
+  width: 120px;
   text-align: center;
   color: @grayLight;
   border: 2px @grayLight dashed !important;
@@ -187,7 +187,7 @@ ul.color-picker li a  {
 
 .umb-sortable-thumbnails li img
 {
-  max-width:100%; 
+  max-width:100%;
   max-height:100%;
   margin:auto;
   display:block;
@@ -206,12 +206,12 @@ ul.color-picker li a  {
 .umb-sortable-thumbnails .icon-holder *
 {
   color: @grayLight;
-  display: block 
+  display: block
 }
 
 
 //
-// Cropper 
+// Cropper
 // -------------------------------------------------
 
 .umb-cropper{
@@ -237,7 +237,7 @@ ul.color-picker li a  {
     position: relative;
     margin: auto;
  }
- 
+
 .umb-cropper-gravity .viewport{
    overflow: hidden;
    position: relative;
@@ -301,8 +301,8 @@ ul.color-picker li a  {
 // --------------------------------------------------
 .umb-folderbrowser .add-link{
   display: inline-block;
-  height: 120px; 
-  width: 120px; 
+  height: 120px;
+  width: 120px;
   text-align: center;
   border: 1px @grayLight dashed;
   line-height: 120px
@@ -364,7 +364,7 @@ ul.color-picker li a  {
 
 
 
-.umb-photo-folder .picrow div a:first-child {    
+.umb-photo-folder .picrow div a:first-child {
     width:100%;
     height:100%;
 }
@@ -375,6 +375,12 @@ ul.color-picker li a  {
     background-color: @grayLighter;
 }
 
+.umb-photo-folder .picrow div.umb-photo .umb-photo-img-name{
+    overflow: hidden;
+    text-overlow: ellipsis;
+    white-space: no-wrap;
+}
+
 .umb-photo-folder a:hover{text-decoration: none}
 .umb-photo-folder .umb-non-thumbnail{
   text-align: center;
@@ -386,7 +392,8 @@ ul.color-picker li a  {
 }
 
 //this is a temp hack, to provide selectors in the dialog:
-.umb-photo-folder .pic:hover .selector-overlay{
+.umb-photo-folder .pic:hover .selector-overlay,
+.umb-photo-folder .picrow div.umb-photo .umb-photo-img-name{
   position: absolute;
   bottom: 0px;
   left: 0px;
@@ -501,4 +508,4 @@ ul.color-picker li a  {
 // --------------------------------------------------
 .bootstrap-datetimepicker-widget .btn{padding: 0;}
 .bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;}
-.umb-datepicker .input-append .add-on{cursor: pointer;}
\ No newline at end of file
+.umb-datepicker .input-append .add-on{cursor: pointer;}
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html
index 8b0ced6ebe..00382a0a3e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html
@@ -13,11 +13,13 @@
                     <i class="icon large {{img.icon}}"></i>
                     {{img.name}}
                 </div>
-            
-                <div ng-if="img.thumbnail" class="umb-photo" ng-style="img.thumbStyle" alt="{{img.name}}"></div>
+
+                <div ng-if="img.thumbnail" class="umb-photo" ng-style="img.thumbStyle" alt="{{img.name}}">
+                  <span class="selector-overlay umb-photo-img-name">{{img.name}}</span>
+                </div>
             </a>
 
-            <a href ng-click="clickHandler(img, $event, true)" 
+            <a href ng-click="clickHandler(img, $event, true)"
                 ng-if="img.isFolder" class="selector-overlay">
                 <localize key="buttons_select">Select</localize>
 			</a>