From 8a3f1e6fbfc1a4729382cbba1ee1187eb4b0407e Mon Sep 17 00:00:00 2001 From: perploug Date: Wed, 25 Sep 2013 15:15:35 +0200 Subject: [PATCH] NH code refactor Moved view into directive Moved dropzone into directive Reused in media dialog --- .../html/umbphotofolder.directive.js | 58 ++++--- .../html/umbuploaddropzone.directive.js | 18 ++ .../src/less/modals.less | 55 ------ src/Umbraco.Web.UI.Client/src/less/panel.less | 3 + .../src/less/property-editors.less | 123 +++++++++++++- .../common/dialogs/mediapicker.controller.js | 9 + .../src/views/common/dialogs/mediapicker.html | 38 +---- .../directives/html/umb-photo-folder.html | 2 +- .../directives/html/umb-upload-dropzone.html | 11 ++ .../folderbrowser/folderbrowser.controller.js | 158 +----------------- .../folderbrowser/folderbrowser.html | 63 +------ .../mediapicker/mediapicker.html | 13 +- 12 files changed, 216 insertions(+), 335 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/html/umbuploaddropzone.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/directives/html/umb-upload-dropzone.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js index 814db432d0..e9e1e89009 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js @@ -4,7 +4,7 @@ * @restrict E **/ angular.module("umbraco.directives.html") -.directive('umbPhotoFolder', function ($compile, $log, $timeout, imageHelper) { +.directive('umbPhotoFolder', function ($compile, $log, $timeout, $filter, imageHelper) { return { restrict: 'E', @@ -13,35 +13,15 @@ angular.module("umbraco.directives.html") terminate: true, templateUrl: 'views/directives/html/umb-photo-folder.html', link: function(scope, element, attrs, ngModel) { - - element.ready(function(){ - var wat = 1; - - }); - - ngModel.$render = function() { - - if(ngModel.$modelValue){ - - $timeout(function(){ - - var photos = ngModel.$modelValue; - var rows = []; - - scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'),10) : 0; - scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'),10) : 420; - scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'),10) : 200; - scope.border = element.attr('border') ? parseInt(element.attr('border'),10) : 5; - scope.clickHandler = scope.$eval(element.attr('on-click')); - scope.lastWidth = Math.max(element.width(), scope.minWidth); + function _renderCollection(scope, photos){ // get row width - this is fixed. var w = scope.lastWidth; - + var rows = []; // initial height - effectively the maximum height +/- 10%; var h = Math.max(scope.minHeight,Math.floor(w / 5)); - + // store relative widths of all images (scaled to match estimate height above) var ws = []; @@ -146,8 +126,34 @@ angular.module("umbraco.directives.html") } } - //populate the scope - scope.rows = rows; + return rows; + } + + ngModel.$render = function() { + if(ngModel.$modelValue){ + + $timeout(function(){ + var photos = ngModel.$modelValue; + + scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'),10) : 0; + scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'),10) : 420; + scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'),10) : 200; + scope.border = element.attr('border') ? parseInt(element.attr('border'),10) : 5; + scope.clickHandler = scope.$eval(element.attr('on-click')); + scope.lastWidth = Math.max(element.width(), scope.minWidth); + + scope.rows = _renderCollection(scope, photos); + + if(attrs.filterBy){ + scope.$watch(attrs.filterBy, function(newVal, oldVal){ + if(newVal !== oldVal){ + var p = $filter('filter')(photos, newVal, false); + scope.baseline = 0; + var m = _renderCollection(scope, p); + scope.rows = m; + } + }); + } }, 500); //end timeout } //end if modelValue diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbuploaddropzone.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbuploaddropzone.directive.js new file mode 100644 index 0000000000..ba7195a7a2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbuploaddropzone.directive.js @@ -0,0 +1,18 @@ +/** +* @ngdoc directive +* @name umbraco.directives.directive:umbPanel +* @restrict E +**/ +angular.module("umbraco.directives.html") + .directive('umbUploadDropzone', function(){ + return { + restrict: 'E', + replace: true, + scope: { + dropping: "=", + files: "=" + }, + transclude: 'true', + templateUrl: 'views/directives/html/umb-upload-dropzone.html' + }; + }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/modals.less b/src/Umbraco.Web.UI.Client/src/less/modals.less index 0569a29aa2..939887fa61 100644 --- a/src/Umbraco.Web.UI.Client/src/less/modals.less +++ b/src/Umbraco.Web.UI.Client/src/less/modals.less @@ -137,61 +137,6 @@ height: 12px } - - -.umb-thumbnails .thumbnail { - padding: 0; - border:none; -} - -/*.umb-modal .thumbnails > li:nth-child(2) { - margin: 0 0 20px 0 -}*/ - -.umb-thumbnails > li { - margin: 1px; - text-align: center; -} - -.umb-thumbnails i{margin: auto;} - -.umb-thumbnails .selected img, .umb-thumbnails img:hover { - opacity: 0.5 -} - -.umb-thumbnails > li.folder { - width: 100px; - /*height: 100px;*/ - display: block; - text-align: center; - font-size: 12px; -} - -.umb-thumbnails a{ - outline: none; - border:none !important; - box-shadow:none !important; -} - -.umb-thumbnails > li.folder .icon-folder{ - display: block; - font-size: 90px; - height: 75px; - width:100px; - color: @grayLight; -} - -.umb-thumbnails > li.folder a { - width: 100px; - height: 100px; - display: block; -} - -.umb-thumbnails > li.folder a:hover { - text-decoration: none -} - - /* YSOD */ /* These styles are an exact replica of a real .Net YSOD */ .umb-modal .ysod { diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less index 6f85daf02b..e5187da1c6 100644 --- a/src/Umbraco.Web.UI.Client/src/less/panel.less +++ b/src/Umbraco.Web.UI.Client/src/less/panel.less @@ -25,6 +25,9 @@ position: relative; clear: both; } +.umb-panel-body.no-header { + top: 0px; +} .umb-panel-header h1.umb-headline-editor { cursor: text; 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 7206b272bb..5319da9681 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -1,11 +1,12 @@ // // Container styles // -------------------------------------------------- -.tab-content .control-group .umb-editor { +.umb-editor { width:66.6%; } -.umb-modal .control-group .umb-editor { - width: 80%; + +.umb-modal .umb-editor { + width: 95%; } @@ -44,8 +45,54 @@ ul.color-picker li a { color: @grayLight; border: 2px @grayLight dashed !important; line-height: 120px; + text-decoration: none; } +//wtf? where does this opacity crap comes from? +.umb-mediapicker *:hover{ + opacity: 1 !important; +} + +.umb-mediapicker .picked-image:hover:before{ + content: "\e1a4"; + font-family: Icomoon; + position: absolute; + bottom: 10px; + right: 10px; + opacity: 0.5; + + font-size: 24px; + color: red; + background: white; + + line-height: 36px; + text-align: center; + -moz-border-radius: 15px; + border-radius: 15px; + + height: 32px; + width: 32px; + overflow: hidden; + display: block; + } + + .umb-thumbnails .thumbnail { + padding: 0; + border:none; + } + + .umb-thumbnails > li { + margin: 1px; + text-align: center; + } + + .umb-thumbnails i{margin: auto;} + .umb-thumbnails a{ + outline: none; + border:none !important; + box-shadow:none !important; + } + // // folder-browser @@ -59,25 +106,83 @@ ul.color-picker li a { line-height: 120px } +.umb-upload-drop-zone .info{ + display: block; + padding: 30px; + opacity: 0.7; + + border: 1px dashed @grayLight; + background: @grayLighter; + + text-align: center; + font-size: 14px; + + color: @grayLight; +} + + +.umb-upload-drop-zone .info i.icon{ + font-size: 90px; + line-height: 110px +} + + + + // // Photo folder styling // -------------------------------------------------- +.umb-photo-folder .picrow a, .umb-photo-preview{ + margin: 0px; + padding: 0px; + border: none; + display: inline-block; + vertical-align: top; +} + +.umb-photo-folder a:hover{text-decoration: none} .umb-photo-folder .umb-non-thumbnail{ text-align: center; - color: @gray; + vertical-align: center; font-size: 12px; + background: @grayLighter; + color: @grayLight; + text-decoration: none; } .umb-photo-folder .umb-non-thumbnail i{ color: @grayLight; - font-size: 60px; + font-size: 70px; line-height: 80px; - display: block + display: block; + margin: auto; + padding-top: 25%; } - -.umb-photo-folder .selected img{ - opacity:0.5; +.umb-photo-folder .selected{ + position: relative; } +.umb-photo-folder .selected:before{ + content: "\e165"; + font-family: Icomoon; + position: absolute; + bottom: 10px; + right: 10px; + + font-size: 24px; + color: black; + opacity: 0.5; + background: white; + + line-height: 36px; + text-align: center; + -moz-border-radius: 15px; + border-radius: 15px; + + height: 32px; + width: 32px; + overflow: hidden; + display: block; + } diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js index 8c02df4bbd..988950a996 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js @@ -37,9 +37,14 @@ angular.module("umbraco") $scope.path = []; } + + //mediaResource.rootMedia() mediaResource.getChildren(folderId) .then(function(data) { + + $scope.images = []; + $scope.searchTerm = ""; $scope.images = data; //update the thumbnail property _.each($scope.images, function(img) { @@ -56,6 +61,8 @@ angular.module("umbraco") }); $scope.clickHandler = function(image, ev){ + + if (image.contentTypeAlias.toLowerCase() == 'folder') { $scope.options.formData.currentFolder = image.id; $scope.gotoFolder(image.id); @@ -69,6 +76,8 @@ angular.module("umbraco") } }); } + + ev.preventDefault(); }; $scope.selectMediaItem = function(image) { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html index cb433fbaed..bef16e2b72 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html @@ -3,7 +3,7 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
- +
@@ -11,8 +11,7 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl + placeholder="Filter...">
@@ -21,8 +20,8 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl -
+
@@ -33,7 +32,6 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl {{item.name}} / -
  • @@ -44,47 +42,23 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl ng-show="showFolderInput" ng-model="newFolderName" ng-keyup="submitFolder($event)" - ng-blur="showFolderInput = false" - > + ng-blur="showFolderInput = false">
    • -
    -
    - -
    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 61c87f25dd..49dd40d820 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 @@ -1,7 +1,7 @@
    +
    + +

    Drop your files here...

    +
    + +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js index 86243dfd17..1d3df2ce6f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js @@ -11,42 +11,28 @@ angular.module("umbraco") }; }) .controller("Umbraco.Editors.FolderBrowserController", - function ($rootScope, $scope, assetsService, $routeParams, $timeout, $element, umbRequestHelper, mediaResource, imageHelper) { + function ($rootScope, $scope, assetsService, $routeParams, $timeout, $element, $location, umbRequestHelper, mediaResource, imageHelper) { var dialogOptions = $scope.$parent.dialogOptions; - $scope.minWidth = 480; - $scope.minHeight = 200; - $scope.lastWidth = 0; - $scope.baseline = 0; - $scope.filesUploading = []; - $scope.options = { url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"), autoUpload: true, disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), - previewMaxWidth: 100, - previewMaxHeight: 100, + previewMaxWidth: 200, + previewMaxHeight: 200, previewCrop: true, formData:{ currentFolder: $routeParams.id } }; + $scope.loadChildren = function(id){ mediaResource.getChildren(id) .then(function(data) { $scope.images = data; - //update the thumbnail property - _.each($scope.images, function(img) { - //img.thumbnail = imageHelper.getThumbnail({ imageModel: img, scope: $scope }); - }); - - // prettify the look and feel - $scope.lastWidth = Math.max($element.find(".umb-photo-folder-max-width").width(), $scope.minWidth); - $scope.baseLine = 0; - $scope.processPhotos($scope.images); }); }; @@ -58,13 +44,10 @@ angular.module("umbraco") $scope.$on('fileuploadprocessalways', function(e,data) { var i; - console.log('processing'); - $scope.$apply(function() { $scope.filesUploading.push(data.files[data.index]); }); - }) - + }); // All these sit-ups are to add dropzone area and make sure it gets removed if dragging is aborted! $scope.$on('fileuploaddragover', function(event, files) { @@ -79,135 +62,8 @@ angular.module("umbraco") $scope.dropping = null; $scope.dragClearTimeout = null; }, 300); - }) + }); //init load $scope.loadChildren($routeParams.id); - - $scope.processPhotos = function(photos) { - // divs to contain the images - var d = $element.find(".umb-photo-folder"); - baseLine = $scope.baseLine; - minWidth = $scope.minWidth; - minHeight = $scope.minHeight; - lastWidth = $scope.lastWidth; - - if( baseLine === 0 ) { - d.empty(); - } - - // get row width - this is fixed. - var w = lastWidth; - - // initial height - effectively the maximum height +/- 10%; - var h = Math.max(minHeight,Math.floor(w / 5)); - // margin width - var border = 5; - - // store relative widths of all images (scaled to match estimate height above) - var ws = []; - $.each(photos, function(key, val) { - val.width_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoWidth");})[0].value; - val.height_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoHeight");})[0].value; - val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: $scope }); - var wt = parseInt(val.width_n, 10); - var ht = parseInt(val.height_n, 10); - if( ht != h ) { wt = Math.floor(wt * (h / ht)); } - ws.push(wt); - }); - - - var rowNum = 0; - var limit = photos.length; - - while(baseLine < limit) - { - rowNum++; - // number of images appearing in this row - var c = 0; - // total width of images in this row - including margins - var tw = 0; - - // calculate width of images and number of images to view in this row. - while( (tw * 1.1 < w) && (baseLine + c < limit)) - { - tw += ws[baseLine + c++] + border * 2; - } - - // skip the last row -// if( baseLine + c >= limit ) return; - - var d_row = $("
    ", {"class" : "picrow"}); - d.append(d_row); - - - // Ratio of actual width of row to total width of images to be used. - var r = w / tw; - - // image number being processed - var i = 0; - // reset total width to be total width of processed images - tw = 0; - // new height is not original height * ratio - var ht = Math.floor(h * r); - d_row.height(ht + border * 2); - d_row.width(lastWidth); - - while( i < c ) - { - var photo = photos[baseLine + i]; - // Calculate new width based on ratio - var wt = Math.floor(ws[baseLine + i] * r); - // add to total width with margins - tw += wt + border * 2; - - // Create image, set src, width, height and margin - var purl = photo.url_n; - - var img = $( - '', - { - "class": "umb-photo", - src: purl, - width: wt, - height: ht, - }).css("margin", border + "px").css("cursor", "pointer"); - img.data("name", photo.name); - img.data("author", photo.owner.name); - img.data("date", photo.updateDate); - img.click(function() {location.href="#/media/media/edit/" + photo.id;}); - d_row.append(img); - - i++; - } - - // set row height to actual height + margins - baseLine += c; - - // if total width is slightly smaller than - // actual div width then add 1 to each - // photo width till they match - i = 0; - while( tw < w ) - { - var img1 = d_row.find("img:nth-child(" + (i + 1) + ")"); - img1.width(img1.width() + 1); - i = (i + 1) % c; - tw++; - } - // if total width is slightly bigger than - // actual div width then subtract 1 from each - // photo width till they match - i = 0; - while( tw > w ) - { - var img2 = d_row.find("img:nth-child(" + (i + 1) + ")"); - img2.width(img2.width() - 1); - i = (i + 1) % c; - tw--; - } - } - - }; - } -); \ No newline at end of file +}); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html index 9251977c9c..9dd55d348e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html @@ -5,59 +5,14 @@ class="umb-editor umb-folderbrowser" data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupload-processing': processing() || loadingFiles}"> - -
    -

    Drop your files here...

    - -
    -
      -
    • -
      -

      {{file.name}}

      -
      -
      • -
    -
    -
    -
    -
    - - -
    - -
    - + + + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html index 8632339a56..e9c62d88f4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html @@ -1,17 +1,16 @@
    \ No newline at end of file