diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
index 18c37e6728..d70845c3f6 100644
--- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
+++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
@@ -340,6 +340,9 @@
+
+
+
diff --git a/src/Umbraco.Web.UI/umbraco/images/thumbs_lrg.png b/src/Umbraco.Web.UI/umbraco/images/thumbs_lrg.png
new file mode 100644
index 0000000000..7d2ed81c24
Binary files /dev/null and b/src/Umbraco.Web.UI/umbraco/images/thumbs_lrg.png differ
diff --git a/src/Umbraco.Web.UI/umbraco/images/thumbs_med.png b/src/Umbraco.Web.UI/umbraco/images/thumbs_med.png
new file mode 100644
index 0000000000..59af8634e2
Binary files /dev/null and b/src/Umbraco.Web.UI/umbraco/images/thumbs_med.png differ
diff --git a/src/Umbraco.Web.UI/umbraco/images/thumbs_smll.png b/src/Umbraco.Web.UI/umbraco/images/thumbs_smll.png
new file mode 100644
index 0000000000..081159777d
Binary files /dev/null and b/src/Umbraco.Web.UI/umbraco/images/thumbs_smll.png differ
diff --git a/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css b/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css
index 2e962fb222..8443eada3d 100644
--- a/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css
+++ b/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;
diff --git a/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js b/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js
index e31fd6e3bc..6c12a2fd70 100644
--- a/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js
+++ b/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 ||
diff --git a/src/Umbraco.Web/UI/Controls/FolderBrowser.cs b/src/Umbraco.Web/UI/Controls/FolderBrowser.cs
index b6361393ad..7caebd5b7c 100644
--- a/src/Umbraco.Web/UI/Controls/FolderBrowser.cs
+++ b/src/Umbraco.Web/UI/Controls/FolderBrowser.cs
@@ -112,6 +112,16 @@ namespace Umbraco.Web.UI.Controls
}
sb.Append("");
+ // Create size changer
+ sb.Append("
");
+
// Create the filter input
sb.Append("Filter:
");