yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5026 from umbraco/temp8-ui-hover-state-for-selectable-items

Browse Source 
Hover state for selectable items in Lists and Grids
This commit is contained in:
Bjarke Berg
2019-03-21 15:19:53 +01:00
committed by GitHub
parent c6e6a9d4cc 30eb097f9c
commit 9a6798953b
8 changed files with 103 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less
View File

@@ -11,4 +11,5 @@
animation: fadeIn;
margin-top: 15px;
pointer-events: none;
border-radius: 3px;
}

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

@@ -15,21 +15,35 @@
border-radius: 3px;
}
.umb-content-grid__item.-selected {
&::before {
content: "";
position: absolute;
z-index:2;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid @ui-selected-border;
border-radius: 5px;
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-content-grid__item {
&.-selected, &:hover {
&::before {
content: "";
position: absolute;
z-index: 2;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid @ui-selected-border;
border-radius: 5px;
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-content-grid__item:hover {
&::before {
opacity: .33;
}
}
.umb-content-grid__item.-selected:hover {
&::before {
opacity: .75;
}
}
.umb-content-grid__icon-container {

19
src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
View File

@@ -27,7 +27,12 @@
.umb-folder-grid__folder.-selected {
color:@ui-selected-type;
&:hover {
color:@ui-selected-type-hover;
}
}
.umb-folder-grid__folder.-selected, .umb-folder-grid__folder:hover {
&::before {
content: "";
position: absolute;
@@ -41,9 +46,15 @@
box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
pointer-events: none;
}
&:hover {
color:@ui-selected-type-hover;
}
.umb-folder-grid__folder:hover {
&::before {
opacity: .33;
}
}
.umb-folder-grid__folder.-selected:hover {
&::before {
opacity: .75;
}
}

27
src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
View File

@@ -38,12 +38,12 @@
}
.umb-media-grid__item.-selected {
//background: @ui-selected;
color:@ui-selected-type;
//border-color: @ui-selected-border;
//box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20);
.umb-media-grid__item-overlay {
color: @ui-selected-type;
}
}
.umb-media-grid__item.-selected, .umb-media-grid__item:hover {
&::before {
content: "";
position: absolute;
@@ -57,12 +57,16 @@
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-media-grid__item-overlay {
color: @ui-selected-type;
//background: @ui-selected-border;
}
.umb-media-grid__item:hover {
&::before {
opacity: .33;
}
}
.umb-media-grid__item.-selected:hover {
&::before {
opacity: .75;
}
}
.umb-media-grid__item-file-icon > span {
@@ -158,6 +162,9 @@
.umb-media-grid__item:hover .umb-media-grid__item-overlay {
opacity: 1;
i {
text-decoration: none;
}
}
.umb-media-grid__item-name {

44
src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
View File

@@ -96,12 +96,34 @@ input.umb-table__input {
min-height: 52px;
}
.umb-table-body .umb-table-row.-selectable {
cursor: pointer;
}
.umb-table-row.-selected,
.umb-table-body .umb-table-row.-selectable:hover {
&::before {
content: "";
position: absolute;
z-index:1;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border: 2px solid @ui-selected-border;
pointer-events: none;
}
}
.umb-table-body .umb-table-row.-selectable {
&:hover {
//background-color: @ui-option-hover;
&::before {
opacity:.33;
}
}
}
.umb-table-body .umb-table-row.-selected.-selectable {
&:hover {
&::before {
opacity:.66;
}
}
}
@@ -176,7 +198,7 @@ input.umb-table__input {
}
// Show checkmark when checked, hide file icon
.umb-table-row--selected {
.umb-table-row.-selected {
.umb-table-body__fileicon {
display: none;
@@ -185,18 +207,6 @@ input.umb-table__input {
display: inline-block;
}
&::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;
}
}
// Table Row Styles

16
src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
View File

@@ -21,7 +21,7 @@
.umb-user-card.-selectable {
cursor: pointer;
}
.umb-user-card.-selected {
.umb-user-card.-selected, .umb-user-card.-selectable:hover {
&::before {
content: "";
position: absolute;
@@ -30,10 +30,20 @@
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid @ui-selected-border;
border-radius: 5px;
box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
pointer-events: none;
border: 2px solid @ui-selected-border;
box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
}
}
.umb-user-card.-selectable:hover {
&::before {
opacity: .33;
}
}
.umb-user-card.-selected:hover {
&::before {
opacity: .75;
}
}

2
src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
View File

@@ -63,7 +63,7 @@
<div class="umb-table-row"
ng-repeat="child in miniListView.children"
ng-click="selectNode(child)"
ng-class="{'umb-table-row--selected':child.selected, 'not-allowed':!child.allowed}">
ng-class="{'-selected':child.selected, 'not-allowed':!child.allowed}">
<div class="umb-table-cell umb-table-cell--auto-width" ng-class="{'umb-table-cell--faded':child.published === false}">
<div class="flex items-center">
<ins class="icon-navigation-right umb-table__row-expand" ng-click="openNode($event, child)" ng-class="{'umb-table__row-expand--hidden': child.metaData.hasChildren !== true}">&nbsp;</ins>

2
src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
View File

@@ -31,7 +31,7 @@
<div class="umb-table-body">
<div class="umb-table-row -selectable"
ng-repeat="item in vm.items track by $index"
ng-class="{'umb-table-row--selected':item.selected, '-light':!item.published && item.updater != null}"
ng-class="{'-selected':item.selected, '-light':!item.published && item.updater != null}"
ng-click="vm.selectItem(item, $index, $event)">
<div class="umb-table-cell">