Skip to content

Commit

Permalink
WEBUI-555 : implemented tab navigation in nuxeo data-grid cards
Browse files Browse the repository at this point in the history
  • Loading branch information
swarnadipa-dev committed Sep 21, 2023
1 parent b2cc992 commit 2238a7c
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 13 deletions.
40 changes: 28 additions & 12 deletions elements/nuxeo-data-grid/nuxeo-document-grid-thumbnail.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,7 @@ Polymer({
border: 2px solid transparent;
}
.bubbleBox:hover,
.bubbleBox:focus {
.bubbleBox:hover {
z-index: 500;
border: 2px solid var(--nuxeo-link-hover-color);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04);
Expand Down Expand Up @@ -108,7 +107,6 @@ Polymer({
}
.bubbleBox .select {
display: none;
position: absolute;
top: 1rem;
left: 1rem;
Expand Down Expand Up @@ -142,7 +140,6 @@ Polymer({
}
.bubbleBox .actions {
display: none;
background-color: var(--nuxeo-box);
position: absolute;
bottom: 0;
Expand All @@ -159,12 +156,6 @@ Polymer({
@apply --nuxeo-action-hover;
}
.bubbleBox:hover .actions,
.bubbleBox:hover .select,
.bubbleBox[selection-mode] .select {
display: block;
}
.bubbleBox:hover .select:hover {
border: 2px solid var(--nuxeo-button-primary);
background-color: var(--nuxeo-button-primary);
Expand All @@ -189,14 +180,39 @@ Polymer({
:host(.droptarget-hover) .bubbleBox {
border: 2px dashed var(--nuxeo-grid-selected);
}
:host(:focus) .bubbleBox {
z-index: 500;
border: 2px solid var(--nuxeo-link-hover-color);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04);
}
:host(:focus) .bubbleBox .actions,
:host(:focus) .bubbleBox .select,
.bubbleBox:hover .actions,
.bubbleBox:hover .select,
.bubbleBox[selection-mode] .select {
opacity: 1;
height: auto;
overflow: visible;
transition: opacity 0.2s ease, height 0.2s ease;
}
.bubbleBox .actions,
.bubbleBox .select {
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.2s ease, height 0.2s ease;
}
</style>
<div class="bubbleBox grid-box" selection-mode$="[[selectionMode]]">
<div class="thumbnailContainer" on-tap="handleClick">
<div class="thumbnailContainer" on-tap="handleClick" tabindex="0">
<img src="[[_thumbnail(doc)]]" alt$="[[doc.title]]" />
</div>
<template is="dom-if" if="[[_hasDocument(doc)]]">
<a class="title" href$="[[urlFor(doc)]]" on-tap="handleClick">
<a class="title" href$="[[urlFor(doc)]]" on-tap="handleClick" tabindex="0">
<div class="dataContainer">
<div class="title" id="title">[[doc.title]]</div>
<nuxeo-tag>[[formatDocType(doc.type)]]</nuxeo-tag>
Expand Down
2 changes: 1 addition & 1 deletion elements/search/default/nuxeo-default-search-results.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
>
<template>
<nuxeo-document-grid-thumbnail
tabindex$="{{tabIndex}}"
tabindex="0"
selected$="{{selected}}"
doc="[[item]]"
index="[[index]]"
Expand Down

0 comments on commit 2238a7c

Please sign in to comment.