diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js index 3994770c8e..f226d924af 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js @@ -117,9 +117,11 @@ Use this directive to generate a list of content items presented as a flexbox gr }; scope.clickItemName = function(item, $event, $index) { - if(scope.onClickName) { + if(scope.onClickName && !($event.metaKey || $event.ctrlKey)) { scope.onClickName(item, $event, $index); + $event.preventDefault(); } + $event.stopPropagation(); }; } diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js index ae41073c0d..3f1929e97d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtable.directive.js @@ -117,10 +117,11 @@ var vm = this; vm.clickItem = function (item, $event) { - if (vm.onClick) { + if (vm.onClick && !($event.metaKey || $event.ctrlKey)) { vm.onClick({ item: item}); - $event.stopPropagation(); + $event.preventDefault(); } + $event.stopPropagation(); }; vm.selectItem = function (item, $index, $event) { diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 88988485fe..8c0df988d1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -167,6 +167,7 @@ @import "components/umb-property-file-upload.less"; @import "components/users/umb-user-cards.less"; +@import "components/users/umb-user-table.less"; @import "components/users/umb-user-details.less"; @import "components/users/umb-user-group-picker-list.less"; @import "components/users/umb-user-group-preview.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less index d2fa2be0c7..2a4a3be2e4 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less @@ -13,7 +13,6 @@ user-select: none; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16); border-radius: 3px; - } .umb-content-grid__item.-selected { @@ -59,7 +58,8 @@ display: inline-flex; color: @ui-option-type; - &:hover { + &:hover, &:focus { + text-decoration: none; color:@ui-option-type-hover; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less index e24f68078b..190f977880 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less @@ -17,6 +17,10 @@ outline: none; text-decoration: none !important; } + +.umb-user-card.-selectable { + cursor: pointer; +} .umb-user-card.-selected { &::before { content: ""; @@ -31,7 +35,6 @@ box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); pointer-events: none; } - } .umb-user-card__content { @@ -44,14 +47,18 @@ box-sizing: border-box; display: flex; flex-direction: column; - cursor: pointer; max-width: 100%; } .umb-user-card__goToUser { - &:hover { + &:hover, &:focus { + text-decoration: none; .umb-user-card__name { - text-decoration: underline; + text-decoration: underline; + color: @ui-option-type-hover; + } + .umb-avatar { + border: 1px solid @ui-option-type-hover; } } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less new file mode 100644 index 0000000000..1fcaf04183 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less @@ -0,0 +1,73 @@ +.umb-user-table { + + .umb-user-table-col-avatar { + flex: 0 0 32px; + padding: 15px 0; + } + + .umb-table-cell a { + &:hover, &:focus { + .umb-avatar { + border: 1px solid @ui-option-type-hover; + } + } + } + + .umb-table-body .umb-table-cell.umb-table__name { + margin: 0; + padding: 0; + a { + display: flex; + padding: 6px 2px; + height: 42px; + span { + margin: auto 14px; + } + } + } + .umb-table-cell.umb-table__name a { + &:hover, &:focus { + text-decoration: underline; + } + } + + .umb-user-table-row { + cursor: default; + .umb-checkmark { + visibility: hidden; + } + } + + .umb-user-table-row.-selectable { + cursor: pointer; + + + } + + .umb-user-table-row.-selectable:hover { + .umb-checkmark { + visibility: visible; + } + } + + .umb-user-table-row.-selected { + + .umb-checkmark { + visibility: visible; + } + + &::before { + content: ""; + position: absolute; + z-index:1; + top: 1px; + left: 1px; + right: 1px; + bottom: 1px; + border: 2px solid @ui-selected-border; + box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%); + pointer-events: none; + } + } + +} diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less index 8b5a295752..c77e4fd1a4 100644 --- a/src/Umbraco.Web.UI.Client/src/less/listview.less +++ b/src/Umbraco.Web.UI.Client/src/less/listview.less @@ -30,7 +30,7 @@ position: absolute; padding: 5px 8px; pointer-events: none; - top: 0; + top: 2px; } input[type="text"] { diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html index 487be4af87..ce85537d7c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html @@ -10,10 +10,13 @@
| + | -- | ||||
|---|---|---|---|---|---|
|
+ ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}"
+ class="umb-table-row umb-user-table-row">
+ |
-
- |
- {{user.name}} | -{{ userGroup.name }}, | -{{ user.formattedLastLogin }} | -
+
+
+
+
+
+ {{ userGroup.name }},
+ {{ user.formattedLastLogin }}
+ |
-