Added thumbnail size selector to folder browser

src/Umbraco.Web.UI/Umbraco.Web.UI.csproj

@@ -340,6 +340,9 @@
     <Content Include="umbraco\images\information.png" />
     <Content Include="umbraco\images\listItemOrange.gif" />
     <Content Include="umbraco\images\pencil.png" />
+    <Content Include="umbraco\images\thumbs_lrg.png" />
+    <Content Include="umbraco\images\thumbs_med.png" />
+    <Content Include="umbraco\images\thumbs_smll.png" />
     <Content Include="umbraco\plugins\uGoLive\cog.png" />
     <Content Include="umbraco\plugins\uGoLive\cross.png" />
     <Content Include="umbraco\plugins\uGoLive\Dashboard.ascx" />

src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css

@@ -131,6 +131,19 @@
     margin-right: 5px;
 }
 
+.umbFolderBrowser .thumb-sizer {
+    position: absolute;
+    top: 18px;
+    right: 270px;
+    border-right: solid 1px #ccc;
+    padding-right: 15px;
+}
+
+.umbFolderBrowser .thumb-sizer input,
+.umbFolderBrowser .thumb-sizer img {
+    vertical-align: baseline;
+}
+
 .umbFolderBrowser .filter {
     position: absolute;
     top: 15px;
@@ -173,6 +186,16 @@
     cursor: pointer;
 }
 
+.umbFolderBrowser .items.medium li div {
+    width: 95px;
+    height: 125px;
+}
+
+.umbFolderBrowser .items.small li div {
+    width: 70px;
+    height: 100px;
+}
+
 .umbFolderBrowser .img {
     display: block;
     background: #e0e0e0;
@@ -182,6 +205,16 @@
     margin: 10px;
 }
 
+.umbFolderBrowser .items.medium .img {
+    width: 75px;
+    height: 75px;
+}
+
+.umbFolderBrowser .items.small .img {
+    width: 50px;
+    height: 50px;
+}
+
 .umbFolderBrowser .img:before {
   content: '';
   display: inline-block;
@@ -198,6 +231,23 @@
     max-height: 100px;
 }
 
+.umbFolderBrowser .items.medium .img img {
+    max-width: 75px;
+    max-height: 75px;
+}
+
+.umbFolderBrowser .items.small .img img {
+    max-width: 50px;
+    max-height: 50px;
+}
+
+.umbFolderBrowser li span {
+    display: block;
+    white-space: nowrap;
+    margin: 0 5px;
+    overflow: hidden;
+}
+
 .umbFolderBrowser .items li.selected div {
     background: #D5EFFC;
 	border-color: #99DEFD;

src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js

@@ -115,11 +115,20 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
             // Setup the viewmode;
             self._viewModel = $.extend({}, {
                 parent: self,
+                thumbSize: ko.observable('large'),
                 filterTerm: ko.observable(''),
                 items: ko.observableArray([]),
                 queued: ko.observableArray([])
             });
             
+            self._viewModel.thumbSize.subscribe(function (newValue) {
+                $(".umbFolderBrowser .items")
+                    .removeClass("large")
+                    .removeClass("medium")
+                    .removeClass("small")
+                    .addClass(newValue);
+            });
+            
             self._viewModel.filtered = ko.computed(function () {
                 return ko.utils.arrayFilter(this.items(), function (item) {
                     return item.Name().toLowerCase().indexOf(self._viewModel.filterTerm().toLowerCase()) > -1 || 

src/Umbraco.Web/UI/Controls/FolderBrowser.cs

@@ -112,6 +112,16 @@ namespace Umbraco.Web.UI.Controls
             }
             sb.Append("</ul>");
 
+            // Create size changer
+            sb.Append("<div class='thumb-sizer'>" +
+                      "<input type='radio' name='thumb_size' value='small' data-bind='checked: thumbSize' />" +
+                      "<img src='images/thumbs_smll.png' alt='Small thumbnails' />" +
+                      "<input type='radio' name='thumb_size' value='medium' data-bind='checked: thumbSize' />" +
+                      "<img src='images/thumbs_med.png' alt='Medium thumbnails' />" +
+                      "<input type='radio' name='thumb_size' value='large' data-bind='checked: thumbSize' />" +
+                      "<img src='images/thumbs_lrg.png' alt='Large thumbnails' />" +
+                      "</div>");
+
             // Create the filter input
             sb.Append("<div class='filter'>Filter: <input type='text' data-bind=\"value: filterTerm, valueUpdate: 'afterkeydown'\" /></div>");