feat: optimize logs cell tip animation

This commit is contained in:
Emil Zhai
2022-12-12 09:51:05 +00:00
parent 60d16f3469
commit 8ce58dc818
2 changed files with 79 additions and 45 deletions

View File

@@ -243,13 +243,30 @@ select.typecho-access-logs-filter-item__content {
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
}
.typecho-access-logs-list-cell-item:first-child {
margin-right: 5px;
.typecho-access-logs-list-cell__tooltip {
position: absolute;
bottom: 100%;
display: flex;
background-color: #f5f7fb;
padding: 5px 8px;
transition: all ease-in-out .1s;
}
.typecho-access-logs-list-cell-item-icon {
.typecho-access-logs-list-cell__tooltip--hidden {
opacity: 0;
pointer-events: none;
transition: all ease-in-out .3s;
}
.typecho-access-logs-list-cell__tooltip > *:not(:last-child) {
margin-right: 4px;
}
.typecho-access-logs-list-cell__tooltip-icon {
display: inline-block;
width: 18px;
height: 18px;
cursor: pointer;
@@ -259,7 +276,7 @@ select.typecho-access-logs-filter-item__content {
background-repeat: no-repeat;
}
.typecho-access-logs-list-cell-item-icon:hover {
.typecho-access-logs-list-cell__tooltip-icon:hover {
opacity: 1;
}

View File

@@ -108,20 +108,25 @@ $(document).ready(function () {
}).text(item.url.replace(/%23/u, '#'))
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell-item-icon typecho-access-logs-list-cell-item-search',
'data-action': 'search-anchor',
'data-filter': JSON.stringify({ path: item.path }),
$('<div />', {
class: 'typecho-access-logs-list-cell__tooltip typecho-access-logs-list-cell__tooltip--hidden',
'data-auto-hide': 'yes',
}).hide()
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell-item-icon typecho-access-logs-list-cell-item-delete',
'data-action': 'quick-filter-delete',
'data-filter': JSON.stringify({ url: item.url }),
'data-auto-hide': 'yes',
}).hide()
})
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell__tooltip-icon typecho-access-logs-list-cell-item-search',
'data-action': 'search-anchor',
'data-filter': JSON.stringify({ path: item.path }),
})
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell__tooltip-icon typecho-access-logs-list-cell-item-delete',
'data-action': 'quick-filter-delete',
'data-filter': JSON.stringify({ url: item.url }),
'data-auto-hide': 'yes',
})
)
)
);
$tr.append($td);
@@ -138,20 +143,26 @@ $(document).ready(function () {
}).text(item.display_name)
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell-item-icon typecho-access-logs-list-cell-item-search',
'data-action': 'search-anchor',
'data-filter': JSON.stringify({ ua: item.ua }),
$('<div />', {
class: 'typecho-access-logs-list-cell__tooltip typecho-access-logs-list-cell__tooltip--hidden',
'data-auto-hide': 'yes',
}).hide()
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell-item-icon typecho-access-logs-list-cell-item-delete',
'data-action': 'quick-filter-delete',
'data-filter': JSON.stringify({ ua: item.ua }),
'data-auto-hide': 'yes',
}).hide()
})
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell__tooltip-icon typecho-access-logs-list-cell-item-search',
'data-action': 'search-anchor',
'data-filter': JSON.stringify({ ua: item.ua }),
'data-auto-hide': 'yes',
})
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell__tooltip-icon typecho-access-logs-list-cell-item-delete',
'data-action': 'quick-filter-delete',
'data-filter': JSON.stringify({ ua: item.ua }),
'data-auto-hide': 'yes',
})
)
)
);
$tr.append($td);
@@ -167,20 +178,26 @@ $(document).ready(function () {
}).text(item.ip)
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell-item-icon typecho-access-logs-list-cell-item-search',
'data-action': 'search-anchor',
'data-filter': JSON.stringify({ ip: item.ip }),
$('<div />', {
class: 'typecho-access-logs-list-cell__tooltip typecho-access-logs-list-cell__tooltip--hidden',
'data-auto-hide': 'yes',
}).hide()
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell-item-icon typecho-access-logs-list-cell-item-delete',
'data-action': 'quick-filter-delete',
'data-filter': JSON.stringify({ ip: item.ip }),
'data-auto-hide': 'yes',
}).hide()
})
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell__tooltip-icon typecho-access-logs-list-cell-item-search',
'data-action': 'search-anchor',
'data-filter': JSON.stringify({ ip: item.ip }),
'data-auto-hide': 'yes',
})
)
.append(
$('<span />', {
class: 'typecho-access-logs-list-cell-item typecho-access-logs-list-cell__tooltip-icon typecho-access-logs-list-cell-item-delete',
'data-action': 'quick-filter-delete',
'data-filter': JSON.stringify({ ip: item.ip }),
'data-auto-hide': 'yes',
})
)
)
);
$tr.append($td);
@@ -206,10 +223,10 @@ $(document).ready(function () {
$('[data-action="search-anchor"]').click(onSearchAnchorClick);
$('.typecho-access-logs-list-cell').hover(
function() {
$(this).find('[data-auto-hide="yes"]').show();
$(this).find('[data-auto-hide="yes"]').removeClass('typecho-access-logs-list-cell__tooltip--hidden');
},
function() {
$(this).find('[data-auto-hide="yes"]').hide();
$(this).find('[data-auto-hide="yes"]').addClass('typecho-access-logs-list-cell__tooltip--hidden');
}
);
$('[data-action="quick-filter-delete"]').click(function(e) {