mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-10 15:32:38 -07:00
Initial implementation of tooltips in history table
* Move transcode icon to platform column * Tooltips for transcode icon and media type icon * Popover for album art when hover over title
This commit is contained in:
parent
b2a7f639bb
commit
e34865d0dd
3 changed files with 46 additions and 10 deletions
|
@ -1646,6 +1646,30 @@ input[type="color"],
|
||||||
width: 250px;
|
width: 250px;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
.tooltip.top .tooltip-arrow {
|
||||||
|
border-top-color: #fff;
|
||||||
|
}
|
||||||
|
.tooltip.right .tooltip-arrow {
|
||||||
|
border-right-color: #fff;
|
||||||
|
}
|
||||||
|
.tooltip.bottom .tooltip-arrow {
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
.tooltip.left .tooltip-arrow {
|
||||||
|
border-left-color: #fff;
|
||||||
|
}
|
||||||
|
.tooltip-inner {
|
||||||
|
color: #000;
|
||||||
|
background: #fff;
|
||||||
|
border: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.history-title .popover.right {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
.history-title .popover.right .popover-content {
|
||||||
|
padding: 5px 8px;
|
||||||
|
}
|
||||||
#updatebar {
|
#updatebar {
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
|
|
|
@ -79,7 +79,6 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -92,7 +92,12 @@ history_table_options = {
|
||||||
"data":"player",
|
"data":"player",
|
||||||
"createdCell": function (td, cellData, rowData, row, col) {
|
"createdCell": function (td, cellData, rowData, row, col) {
|
||||||
if (cellData !== '') {
|
if (cellData !== '') {
|
||||||
$(td).html('<a href="#" data-target="#info-modal" data-toggle="modal"><i class="fa fa-lg fa-info-circle"></i> ' + cellData + '</a>');
|
var transcode_dec = '';
|
||||||
|
if (rowData['video_decision'] === 'transcode') {
|
||||||
|
transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Transcode"><i class="fa fa-server"></i></span> ';
|
||||||
|
}
|
||||||
|
$(td).html('<div><a href="#" data-target="#info-modal" data-toggle="modal"><div style="float: left;"><i class="fa fa-lg fa-info-circle"></i> ' + cellData + '</div> \
|
||||||
|
<div style="float: right; text-align: right; padding-right: 5px;">' + transcode_dec + '</div></a></div>');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"className": "no-wrap hidden-md hidden-sm hidden-xs modal-control"
|
"className": "no-wrap hidden-md hidden-sm hidden-xs modal-control"
|
||||||
|
@ -103,13 +108,12 @@ history_table_options = {
|
||||||
"createdCell": function (td, cellData, rowData, row, col) {
|
"createdCell": function (td, cellData, rowData, row, col) {
|
||||||
if (cellData !== '') {
|
if (cellData !== '') {
|
||||||
if (rowData['media_type'] === 'movie' || rowData['media_type'] === 'episode') {
|
if (rowData['media_type'] === 'movie' || rowData['media_type'] === 'episode') {
|
||||||
var transcode_dec = '';
|
var media_type = rowData['media_type'][0].toUpperCase() + rowData['media_type'].substring(1);
|
||||||
if (rowData['video_decision'] === 'transcode') {
|
$(td).html('<div class="history-title"><a href="info?source=history&item_id=' + rowData['id'] + '"><div style="float: left;" class="thumb-tooltip" data-toggle="tooltip" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=120&fallback=poster">' + cellData + '</div> \
|
||||||
transcode_dec = '<i class="fa fa-server"></i> ';
|
<div style="float: right; text-align: right; padding-right: 5px;"><span class="media-type-tooltip" data-toggle="tooltip" title="' + media_type + '"><i class="fa fa-video-camera"></i></span></div></a></div>');
|
||||||
}
|
|
||||||
$(td).html('<div><div style="float: left;"><a href="info?source=history&item_id=' + rowData['id'] + '">' + cellData + '</a></div><div style="float: right; text-align: right; padding-right: 5px;">' + transcode_dec + '<i class="fa fa-video-camera"></i></div></div>');
|
|
||||||
} else if (rowData['media_type'] === 'track') {
|
} else if (rowData['media_type'] === 'track') {
|
||||||
$(td).html('<div><div style="float: left;">' + cellData + '</div><div style="float: right; text-align: right; padding-right: 5px;"><i class="fa fa-music"></i></div></div>');
|
$(td).html('<div class="history-title"><div style="float: left;" class="thumb-tooltip" data-toggle="tooltip" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=120&fallback=poster">' + cellData + '</div> \
|
||||||
|
<div style="float: right; text-align: right; padding-right: 5px;"><span class="media-type-tooltip" data-toggle="tooltip" title="' + media_type + '"><i class="fa fa-music"></i></span></div></div>');
|
||||||
} else {
|
} else {
|
||||||
$(td).html('<a href="info?item_id=' + rowData['id'] + '">' + cellData + '</a>');
|
$(td).html('<a href="info?item_id=' + rowData['id'] + '">' + cellData + '</a>');
|
||||||
}
|
}
|
||||||
|
@ -190,10 +194,19 @@ history_table_options = {
|
||||||
// Jump to top of page
|
// Jump to top of page
|
||||||
// $('html,body').scrollTop(0);
|
// $('html,body').scrollTop(0);
|
||||||
$('#ajaxMsg').fadeOut();
|
$('#ajaxMsg').fadeOut();
|
||||||
|
|
||||||
// Create the tooltips.
|
// Create the tooltips.
|
||||||
$('.info-modal').each(function() {
|
$('.transcode-tooltip').tooltip();
|
||||||
$(this).tooltip();
|
$('.media-type-tooltip').tooltip();
|
||||||
|
$('.thumb-tooltip').popover({
|
||||||
|
html: true,
|
||||||
|
trigger: 'hover',
|
||||||
|
placement: 'right',
|
||||||
|
content: function () {
|
||||||
|
return '<div style="background-image: url(' + $(this).data('img') + '); width: 80px; height: 120px;" />';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if ($('#row-edit-mode').hasClass('active')) {
|
if ($('#row-edit-mode').hasClass('active')) {
|
||||||
$('.delete-control').each(function() {
|
$('.delete-control').each(function() {
|
||||||
$(this).removeClass('hidden');
|
$(this).removeClass('hidden');
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue