Merge branch 'dev-v7' of https://github.com/umbraco/Umbraco-CMS into dev-v7

src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js

@@ -5,16 +5,15 @@
 
       function link(scope, el, attr, ctrl) {
 
-         scope.clickItem = function(item) {
+         scope.clickItem = function(item, $event, $index) {
             if(scope.onClick) {
-               scope.onClick(item);
+               scope.onClick(item, $event, $index);
             }
          };
 
-         scope.selectItem = function(item, $event, $index) {
-            if(scope.onSelect) {
-               scope.onSelect(item, $event, $index);
-               $event.stopPropagation();
+         scope.clickItemName = function(item, $event, $index) {
+            if(scope.onClickName) {
+               scope.onClickName(item, $event, $index);
             }
          };
 
@@ -27,8 +26,8 @@
          scope: {
             content: '=',
             contentProperties: "=",
-            onSelect: '=',
-            onClick: "="
+            onClick: "=",
+            onClickName: "="
          },
          link: link
       };

src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less

@@ -11,16 +11,11 @@
    cursor: pointer;
    position: relative;
    margin: 10px;
-   border: 1px solid #ffffff;
    user-select: none;
 }
 
-.umb-content-grid__item:hover {
-   border: 1px solid @blue;
-}
-
-.umb-content-grid__item:hover .umb-content-grid__action {
-   opacity: 1;
+.umb-content-grid__item.-selected {
+    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.35);
 }
 
 .umb-content-grid__icon-container {
@@ -48,12 +43,16 @@
 
 .umb-content-grid__item-name {
    font-weight: bold;
-   color: @grayDark;
    margin-bottom: 10px;
    color: black;
    padding-bottom: 10px;
    line-height: 1.4em;
    border-bottom: 1px solid @grayLight;
+   display: inline-block;
+}
+
+.umb-content-grid__item-name:hover {
+    text-decoration: underline;
 }
 
 .umb-content-grid__item-name.-light {
@@ -80,15 +79,14 @@
    display: inline-block;
 }
 
-.umb-content-grid__action {
+.umb-content-grid__checkmark {
    position: absolute;
-   opacity: 0;
    top: 10px;
    right: 10px;
    border: 1px solid #ffffff;
    width: 25px;
    height: 25px;
-   background: rgba(0, 0, 0, 0.4);
+   background: @blue;
    border-radius: 50px;
    box-sizing: border-box;
    display: flex;
@@ -98,16 +96,6 @@
    cursor: pointer;
 }
 
-.umb-content-grid__action:hover {
-   background: @blue;
-   transition: background 0.1s;
-}
-
-.umb-content-grid__action.-selected {
-   opacity: 1;
-   background: @blue;
-}
-
 .umb-content-grid__item:hover .umb-content-grid__action:not(.-selected) {
    opacity: 1;
    animation: fadeIn;

src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html

@@ -4,9 +4,9 @@
       class="umb-content-grid__item"
       ng-repeat="item in content"
       ng-class="{'-selected': item.selected}"
-      ng-click="clickItem(item)">
+      ng-click="clickItem(item, $event, $index)">
 
-      <i ng-if="onSelect" class="icon-check umb-content-grid__action" ng-click="selectItem(item, $event, $index)" ng-class="{'-selected': item.selected}"></i>
+      <i ng-if="item.selected" class="icon-check umb-content-grid__checkmark"></i>
 
       <div class="umb-content-grid__icon-container">
          <i class="{{ item.icon }} umb-content-grid__icon" ng-class="{'-light': !item.published}"></i>
@@ -14,7 +14,7 @@
 
       <div class="umb-content-grid__content">
 
-         <div class="umb-content-grid__item-name" ng-class="{'-light': !item.published}">{{ item.name }}</div>
+         <div class="umb-content-grid__item-name" ng-click="clickItemName(item, $event, $index)" ng-class="{'-light': !item.published}">{{ item.name }}</div>
 
          <ul class="umb-content-grid__details-list" ng-class="{'-light': !item.published}">
             <li class="umb-content-grid__details-item" ng-repeat="property in contentProperties">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html

@@ -7,8 +7,8 @@
          ng-if="items || !items && !options.filter"
          content="items"
          content-properties="options.includeProperties"
-         on-click="vm.clickItem"
-         on-select="vm.selectItem">
+         on-click="vm.selectContentItem"
+         on-click-name="vm.goToItem">
       </umb-content-grid>
 
       <umb-empty-state

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js

@@ -26,6 +26,7 @@
       vm.onUploadComplete = onUploadComplete;
 
       vm.hoverMediaItemDetails = hoverMediaItemDetails;
+      vm.selectContentItem = selectContentItem;
       vm.selectItem = selectItem;
       vm.selectFolder = selectFolder;
       vm.goToItem = goToItem;
@@ -86,6 +87,10 @@
 
       }
 
+      function selectContentItem(item, $event, $index) {
+          listViewHelper.selectHandler(item, $index, $scope.items, $scope.selection, $event);
+      }
+
       function selectItem(item, $event, $index) {
           listViewHelper.selectHandler(item, $index, vm.itemsWithoutFolders, $scope.selection, $event);
       }