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("
" + + "" + + "Small thumbnails" + + "" + + "Medium thumbnails" + + "" + + "Large thumbnails" + + "
"); + // Create the filter input sb.Append("
Filter:
");