Merge branch 'temp-U4-7578' into 7.4.0

Conflicts: src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
2016-01-12 10:01:03 +01:00
parent 759c925fa0 14db03e718
commit b1f12ec864
8 changed files with 154 additions and 156 deletions
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
@@ -100,7 +100,8 @@

               var flexStyle = {
                  "flex": flex + " 1 " + imageMinWidth + "px",
-                  "max-width": mediaItem.width + "px"
+                  "max-width": mediaItem.width + "px",
+                  "min-width": "125px"
               };

               mediaItem.flexStyle = flexStyle;
@@ -109,16 +110,16 @@

         }

-         scope.selectItem = function(item, $event, $index) {
-            if(scope.onSelect) {
-               scope.onSelect(item, $event, $index);
-               $event.stopPropagation();
+         scope.clickItem = function(item, $event, $index) {
+            if(scope.onClick) {
+               scope.onClick(item, $event, $index);
            }
         };

-         scope.clickItem = function(item) {
-            if(scope.onClick) {
-               scope.onClick(item);
+         scope.clickItemName = function(item, $event, $index) {
+            if(scope.onClickName) {
+                scope.onClickName(item, $event, $index);
+                $event.stopPropagation();
            }
         };

@@ -147,8 +148,8 @@
         scope: {
            items: '=',
            onDetailsHover: "=",
-            onSelect: '=',
            onClick: '=',
+            onClickName: "=",
            filterBy: "="
         },
         link: link
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
@@ -9,10 +9,25 @@
 }

 .umb-media-grid__item {
-   margin: 2px;
+   margin: 10px;
   position: relative;
-   background: @grayLighter;
   overflow: hidden;
+   cursor: pointer;
+   display: flex;
+   align-content: center;
+   align-items: center;
+   align-self: stretch;
+   box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
+   justify-content: center;
+   transition: box-shadow 100ms;
+}
+
+.umb-media-grid__item.-file {
+    background-color: @grayLighter;
+}
+
+.umb-media-grid__item.-selected {
+    box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
 }

 .umb-media-grid__item:hover {
@@ -20,20 +35,32 @@
 }

 .umb-media-grid__item-image {
-   width: 100%;
   max-width: 100%;
   height: auto;
+   position: relative;
 }

-.umb-media-grid__item-image.-faded {
-   opacity: 0.5;
-   transition: opacity 100ms ease-in;
+.umb-media-grid__item-image-placeholder {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    position: relative;
+}
+
+.umb-media-grid__image-background {
+    content: "";
+    background: url("../img/checkered-background.png");
+    background-repeat: repeat;
+    opacity: 0.5;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
 }

 .umb-media-grid__item-overlay {
   display: flex;
-   justify-content: center;
-   align-items: center;
   opacity: 0;
   position: absolute;
   right: 0;
@@ -42,19 +69,36 @@
   z-index: 100;
   padding: 5px 10px;
   box-sizing: border-box;
-   font-size: 13px;
+   font-size: 11px;
   overflow: hidden;
   color: white;
   white-space: nowrap;
-   background: rgba(0, 0, 0, 0.4);
-   background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75));
+   background: @blue;
+   transition: opacity 150ms;
+}
+
+.umb-media-grid__item.-file .umb-media-grid__item-overlay {
+    opacity: 1;
+    color: @gray;
+    background: @grayLighter;
+}
+
+.umb-media-grid__item.-file:hover .umb-media-grid__item-overlay,
+.umb-media-grid__item.-file.-selected .umb-media-grid__item-overlay {
+    color: @white;
+    background: @blue;
+}
+
+.umb-media-grid__info {
+    margin-right: 5px;
+}
+
+.umb-media-grid__item-overlay.-locked {
+    opacity: 1;
 }

 .umb-media-grid__item:hover .umb-media-grid__item-overlay {
   opacity: 1;
-   animation: fadeIn;
-   animation-duration: 0.2s;
-   animation-timing-function: ease-in-out;
 }

 .umb-media-grid__item-name {
@@ -63,76 +107,30 @@
   text-overflow: ellipsis;
 }

-.umb-media-grid__item-non-image-name {
-    position: absolute;
-    top: 20px;
-    font-size: 12px;
-    text-align: center;
-    width: 100%;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-
 .umb-media-grid__item-icon {
   color: @gray;
   position: absolute;
-   top: 50%;
+   top: 45%;
   left: 50%;
   font-size: 40px;
   transform: translate(-50%,-50%);
 }

-.umb-media-grid__actions {
-   position: absolute;
-   z-index: 2;
-   width: 100%;
-   top: 0;
-   padding: 10px;
-   box-sizing: border-box;
-   display: flex;
-   align-items: center;
-   justify-content: flex-end;
-}
-
-.umb-media-grid__action {
-   opacity: 0;
-   border: 1px solid #ffffff;
-   width: 25px;
-   height: 25px;
-   background: rgba(0, 0, 0, 0.4);
-   border-radius: 50px;
-   box-sizing: border-box;
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   color: #ffffff;
-   margin-left: 7px;
-   cursor: pointer;
-}
-
-.umb-media-grid__action.-not-clickable {
-   cursor: default;
-}
-
-.umb-media-grid__action:first-child {
-   margin-left: 0;
-}
-
-.umb-media-grid__action:hover {
-   background: @blue;
-   transition: background 0.1s;
-}
-
-.umb-media-grid__action.-selected {
-   opacity: 1;
-   background: @blue;
-}
-
-.umb-media-grid__item:hover .umb-media-grid__action:not(.-selected),
-.umb-media-grid__folder:hover .umb-media-grid__action:not(.-selected) {
-   opacity: 1;
-   animation: fadeIn;
-   animation-duration: 0.2s;
-   animation-timing-function: ease-in-out;
+.umb-media-grid__checkmark {
+    position: absolute;
+    z-index: 2;
+    top: 10px;
+    right: 10px;
+    width: 25px;
+    height: 25px;
+    border: 1px solid #ffffff;
+    background: @blue;
+    border-radius: 50px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    margin-left: 7px;
+    transition: background 100ms;
 }
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
@@ -71,6 +71,10 @@ angular.module("umbraco")

            $scope.gotoFolder = function(folder) {

+                if(!$scope.multiPicker) {
+                    deselectAllImages($scope.model.selectedImages);
+                }
+
                if(!folder){
                    folder = {id: -1, name: "Media", icon: "icon-folder"};
                }
@@ -125,7 +129,10 @@ angular.module("umbraco")
            $scope.clickHandler = function(image, event, index) {

                if (image.isFolder) {
-                    $scope.gotoFolder(image);
+
+                    eventsService.emit("dialogs.mediaPicker.select", image);
+                    selectImage(image);
+
                } else {

                    eventsService.emit("dialogs.mediaPicker.select", image);
@@ -142,39 +149,33 @@ angular.module("umbraco")

            };

+            $scope.clickItemName = function(item) {
+                if(item.isFolder) {
+                    $scope.gotoFolder(item);
+                }
+            };
+
            function selectImage(image) {

-                if ($scope.model.selectedImages.length > 0) {
+                if(image.selected) {

-                    var selectImage = false;
+                    for(var i = 0; $scope.model.selectedImages.length > i; i++) {

-                    for (var i = 0; i < $scope.model.selectedImages.length; i++) {
-
-                        var selectedImage = $scope.model.selectedImages[i];
-
-                        if (image.key === selectedImage.key) {
+                        var imageInSelection = $scope.model.selectedImages[i];
+                        if(image.key === imageInSelection.key) {
                            image.selected = false;
                            $scope.model.selectedImages.splice(i, 1);
-                            selectImage = false;
-                        } else {
-                            selectImage = true;
                        }
-
-                    }
-
-                    if (selectImage) {
-
-                        if(!$scope.multiPicker) {
-                            deselectAllImages($scope.model.selectedImages);
-                        }
-
-                        image.selected = true;
-                        $scope.model.selectedImages.push(image);
                    }

                } else {
-                    $scope.model.selectedImages.push(image);
+
+                    if(!$scope.multiPicker) {
+                        deselectAllImages($scope.model.selectedImages);
+                    }
+
                    image.selected = true;
+                    $scope.model.selectedImages.push(image);
                }

            }
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
@@ -70,7 +70,8 @@
      <umb-media-grid
         items="images"
         filter-by="searchTerm"
-         on-click="clickHandler">
+         on-click="clickHandler"
+         on-click-name="clickItemName">
      </umb-media-grid>

   </div>
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -1,24 +1,20 @@
 <div class="umb-media-grid">

-   <a href="" ng-click="clickItem(item)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" class="umb-media-grid__item">
+   <div class="umb-media-grid__item" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle"  ng-class="{'-selected': item.selected, '-file': !item.thumbnail}">

-      <div class="umb-media-grid__actions">
-         <i ng-if="onDetailsHover" class="icon-info umb-media-grid__action -not-clickable" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
-         <i ng-if="onSelect" class="icon-check umb-media-grid__action" ng-click="selectItem(item, $event, $index)" ng-class="{'-selected': item.selected}" prevent-default></i>
-         <i ng-show="!onSelect && item.selected" class="icon-check umb-media-grid__action -selected"></i>
-      </div>
+      <i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>

-      <div ng-if="item.thumbnail" class="umb-media-grid__item-overlay">
+      <div class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">
+          <i ng-if="onDetailsHover" class="icon-info umb-media-grid__info" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
         <div class="umb-media-grid__item-name">{{item.name}}</div>
      </div>

-      <div class="umb-media-grid__item-non-image-name" ng-if="!item.thumbnail">{{ item.name }}</div>
-
-      <img class="umb-media-grid__item-image" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" ng-class="{'-faded': item.selected}" />
-      <img class="umb-media-grid__item-image" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" />
+      <div class="umb-media-grid__image-background" ng-if="item.thumbnail"></div>
+      <img class="umb-media-grid__item-image" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" />
+      <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" />

      <i class="umb-media-grid__item-icon {{ item.icon }}" ng-if="!item.thumbnail"></i>

-   </a>
+   </div>

-</div>
+</div>
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
@@ -38,15 +38,15 @@
      <umb-folder-grid
         ng-if="folders.length > 0"
         folders="folders"
-         on-click-name="vm.openFolder"
-         on-click="vm.selectFolder">
+         on-select="vm.selectFolder"
+         on-click="vm.clickFolder">
      </umb-folder-grid>

      <umb-media-grid
         items="vm.itemsWithoutFolders"
         on-details-hover="vm.hoverMediaItemDetails"
-         on-select="vm.selectItem"
-         on-click="vm.clickItem">
+         on-click="vm.clickItem"
+         on-click-name="vm.clickItemName">
      </umb-media-grid>

      <umb-tooltip
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
@@ -26,9 +26,10 @@
      vm.onUploadComplete = onUploadComplete;

      vm.hoverMediaItemDetails = hoverMediaItemDetails;
-      vm.selectItem = selectItem;
+      vm.clickFolder = clickFolder;
      vm.clickItem = clickItem;
      vm.selectFolder = selectFolder;
+      vm.clickItemName = clickItemName;
      vm.openFolder = openFolder;

      function activate() {
@@ -87,12 +88,16 @@

      }

-      function selectItem(selectedItem, $event, index) {
-         listViewHelper.selectHandler(selectedItem, index, vm.itemsWithoutFolders, $scope.selection, $event);
+      function clickFolder(folder) {
+          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + folder.id);
      }

-      function clickItem(item) {
-         $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);
+      function clickItem(item, $event, $index) {
+          listViewHelper.selectHandler(item, $index, vm.itemsWithoutFolders, $scope.selection, $event);
+      }
+
+      function clickItemName(item, $event, $index) {
+          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);
      }

      function selectFolder(folder, $event, $index) {
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
@@ -59,35 +59,31 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl

       $scope.add = function() {

-          $scope.mediaPickerOverlay = {};
-          $scope.mediaPickerOverlay.startNodeId = $scope.model.config.startNodeId;
-          $scope.mediaPickerOverlay.multiPicker = multiPicker;
-          $scope.mediaPickerOverlay.view = "mediaPicker";
-          $scope.mediaPickerOverlay.title = "Select media";
-          $scope.mediaPickerOverlay.show = true;
+           $scope.mediaPickerOverlay = {
+               view: "mediapicker",
+               title: "Select media",
+               startNodeId: $scope.model.config.startNodeId,
+               multiPicker: multiPicker,
+               show: true,
+               submit: function(model) {

-          $scope.mediaPickerOverlay.submit = function(model) {
+                   _.each(model.selectedImages, function(media, i) {

-             _.each(model.selectedImages, function(media, i) {
+                       if (!media.thumbnail) {
+                           media.thumbnail = mediaHelper.resolveFileFromEntity(media, true);
+                       }

-                 if (!media.thumbnail) {
-                     media.thumbnail = mediaHelper.resolveFileFromEntity(media, true);
-                 }
+                       $scope.images.push(media);
+                       $scope.ids.push(media.id);
+                   });

-                 $scope.images.push(media);
-                 $scope.ids.push(media.id);
-             });
+                   $scope.sync();

-             $scope.sync();
+                   $scope.mediaPickerOverlay.show = false;
+                   $scope.mediaPickerOverlay = null;

-             $scope.mediaPickerOverlay.show = false;
-             $scope.mediaPickerOverlay = null;
-          };
-
-          $scope.mediaPickerOverlay.close = function(oldModel) {
-             $scope.mediaPickerOverlay.show = false;
-             $scope.mediaPickerOverlay = null;
-          };
+               }
+           };

       };