From f5d258b42dcbeaccc8b1589c275357ec2e4f6a66 Mon Sep 17 00:00:00 2001 From: "Matt@MBP13-PC" Date: Tue, 21 Aug 2012 08:59:10 -0100 Subject: [PATCH] Added thumbnail size selector to folder browser --- src/Umbraco.Web.UI/Umbraco.Web.UI.csproj | 3 ++ .../umbraco/images/thumbs_lrg.png | Bin 0 -> 959 bytes .../umbraco/images/thumbs_med.png | Bin 0 -> 967 bytes .../umbraco/images/thumbs_smll.png | Bin 0 -> 957 bytes .../FolderBrowser/Css/folderbrowser.css | 50 ++++++++++++++++++ .../FolderBrowser/Js/folderbrowser.js | 9 ++++ src/Umbraco.Web/UI/Controls/FolderBrowser.cs | 10 ++++ 7 files changed, 72 insertions(+) create mode 100644 src/Umbraco.Web.UI/umbraco/images/thumbs_lrg.png create mode 100644 src/Umbraco.Web.UI/umbraco/images/thumbs_med.png create mode 100644 src/Umbraco.Web.UI/umbraco/images/thumbs_smll.png 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 0000000000000000000000000000000000000000..7d2ed81c247c184d37ece2d21a3900f81a1ce81a GIT binary patch literal 959 zcmaJ=PiWIn9F7i)OeRcrnWsmFqG*%6G)?KFv9wL+ic2YNVZCXZytbiBUQAwX+S3q( z4NrmxLGkQK*jZ#Aym<019>lXC9=s{@rE5D6){x}=;rqVd@BMz?JE&D}uPk3)<~VMp zvZdGKG5*efvk3?}e916pfK!UCav)OE{ACIJvoBw&t<)ES|(O7F*1D-3Q~Ne8PG8P z4|Ux+I;3@cn(se_!{*4xVjYKM5Lm2nosBq@k4gbHDG8c{?9QrK>k&%A9`Qk`p@M5W zj%Sl$czuF53{>$#YI+u~=o-%y1jn%vlw`dmt7^HJNkLeK#gr;-78RwO%}PZ@F3h+( zu?8;o=!|Qhax)9Lu@zjOMb>fPJizv5KwL06GIAE@qAb*#a_z;rq!)5UmW&uT_OC|I zwwQb3>D;z#F*iQ;nA-zp>%^D0-`JH%RrEqL`qch)e4Jle-8;Ac@ul|o?vukqc;UsP uJFD;4t|q>|dxbv#C~QBKF0CJNXA<1=pBMMmuIxXHuT-U6)n6CyJ^TYD;whN` literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..59af8634e2b1e22acf2083c7d6f211ee53446fab GIT binary patch literal 967 zcmaJ=&x_MQ7!4LgiVIdmQ9KM;SroTPCT-FtZd`Vo)-9M?+rsv?ohH*Zbd!n6tWDR` z>czc^e}I302;xQXpm-3xdG_d01aE?Z;H2AjJy=7M`N4bd`{w)J9M)^MmeQBf9LFtH zx6DQ|Cf}(O?Em{Py3U4+wA`jm(xW33Vs67BT@0!o>f;7R&iLL(yvA`U-fgvM+q$jW z#1l}05n?Z3Y>r!7j{{^6F$G=RcYTBZ{^l(YT*u(I6-%;$5+1l)`yp=b*IM@e(AFG& z{U%t8btd3pia_k``jH+R{6tr0^JH7(!308w27i=P+p2>S2{BNFT-KH#1ga{)yrQab z7042lMTxy?7Up$D)#U=1K0J#SIz7E%R;IDo%HRi-2D&JYMk8UA6G+$>p{8kxhAd|p zA{&i;isGyvEzcB89ND28P?z{1QAAy`M-853dUOOYn9KUnv`nmEVvGV23Q}^U8PKx+ z5B0n`I-(7HobNw{qt-aUVgpBHFSJ?Xddo?uKre+DQ4+QY*_~CfJ|L7t0}_BzQw3MI zUEd+2=-LEtS$frvDDrJwH4UCA2(IhsQo&RexhR)63pohOP}`_LO;U=LVnHocGF*mo6n^?gMSY#82?tSc3LgInRk#%=*F4981Dc4z?3tY$*Su$eM*uNS* z+hXoXrgPh}#oYMVXKoLft>3SlKVVnlM%CPC#h<&s?p*GmPN(?b$7<@Vq^cjzp@Uc8 z^y_p!vvTqa_wsA|)AL8Ee5Uej=dnVr{Ja3(aZk?Fp0+dJ?j~2OTCSNdHaidh0HUxd A5&!@I literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..081159777dcd91b3790ee9ef668fd35d2a12078b GIT binary patch literal 957 zcmaJ=&ui0A91jlJ7!)0z^z_IsiZo2(7ZO53EaVoGT%>(MlMZ9|v5n7o>_7e(-} z34#Z2{sEqZ;YIYIC&7c~p?`vk1J6o*>Dq1wYe@3G@A3J3zCYi7y>>IPer26um_&6) zZNzK*t(~L)Kl{OTx?Cn&n>2BkgoclpqJ=vMR2`#-8pyCl_dcOK!>q7&t4-SaZP~;Q zXT%sTay-grn0z7f40C`8=%AkMD(vyQ_bjk2h20hPlkb%OU1l88-pp1P4L@u2)QxF14;$TLUBzOY| zDJbwM`btTdkwr-sw!rLRsW;#1$_=$L^F?6dZ3M>jtwj(Sq@j;qj15#VO5!y8eHt z<1EktX`s`1|0x`_MjqlDD8NJCq>bxt#;!cM>?4C05MXj_YK&Zj2CQ>^kYOt8mDmh`!Rk1mA zkW1!V>y#@k<;J7nc+|6seEUAKDn53=G-cUd9!q+u-i&K4k0rB|%hO=^xUpv%JwKw; z6Pt^%rJKdzBbQFQPsh6SYxM!W60oWkThZ6f@5!XFvhi@^<q=r2|xEqed} literal 0 HcmV?d00001 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:
");