From d1cd5b11ef1bab446f926bbfe2b4237cbc28ed4a Mon Sep 17 00:00:00 2001 From: Linty Date: Mon, 15 Jul 2024 17:41:18 +0200 Subject: [PATCH] fixes #2187 resize activity tooltips ...when the tooltip extends beyond the page. I've also added the tooltips (for both storage and activity) logic to a js file `intro_tooltips.js` and imported it into `intro.tpl` --- admin/themes/default/js/intro_tooltips.js | 135 ++++++++++++++++++++++ admin/themes/default/template/intro.tpl | 118 +------------------ admin/themes/default/theme.css | 14 +-- admin/themes/roma/theme.css | 7 +- 4 files changed, 142 insertions(+), 132 deletions(-) create mode 100644 admin/themes/default/js/intro_tooltips.js diff --git a/admin/themes/default/js/intro_tooltips.js b/admin/themes/default/js/intro_tooltips.js new file mode 100644 index 000000000..9b12a82bf --- /dev/null +++ b/admin/themes/default/js/intro_tooltips.js @@ -0,0 +1,135 @@ +$(function() { + Object.entries(storage_details).forEach(([type, infos]) => { + // Determine if we use MB or GB and show it correctly + let size = infos.total.filesize; + let str_size_type_string = size > 1000000 ? str_gb : str_mb; + let size_nb = size > 1000000 ? (size / 1000000).toFixed(2) : (size / 1000).toFixed(0); + let str_size = str_size_type_string.replace("%s", size_nb); + + // Display head of Tooltip + $('#storage-title-' + type).html(''+translate_type[type]+''); + $('#storage-size-' + type).html(''+ str_size +''); + $('#storage-files-' + type).html('

'+ (infos.total.nb_files ? translate_files.replace('%d', infos.total.nb_files) : "~") +'

'); + + // Display body of Tooltip + if (infos.details) { + $.each(infos.details, function(ext, data) { + // Determinate if we use MB or GB and show it correctly (duplicate code from total size for scaling code) + let detail_size = data.filesize; + let detail_str_size_type_string; + let detail_size_nb = 0; + if (detail_size > 1000000) { + detail_str_size_type_string = str_gb; + detail_size_nb = (detail_size / 1000000).toFixed(2); + } else { + detail_str_size_type_string = str_mb; + detail_size_nb = (detail_size / 1000).toFixed(0) < 1 ? (detail_size / 1000).toFixed(2) : (detail_size / 1000).toFixed(0); + } + let detail_str_size = detail_str_size_type_string.replace("%s", detail_size_nb); + $('#storage-detail-' + type).append(''+ + ''+ + ''+ ext +''+ + ''+ detail_str_size +''+ + ''+ translate_files.replace('%d', data.nb_files) +''+ + ''+ + ''); + let ext_bg_color = $('.storage-chart span[data-type="storage-'+type+'"]').css('background-color'); + $('#storage-'+type+' .tooltip-details-ext b').css('color', ext_bg_color); + }); + } else { + $('#storage-'+ type +' .separated').attr('style', 'display: none !important'); + $('#storage-' + type +' .tooltip-header').css('margin', '0'); + } + + // Fixing storage chart tooltip bug in little screen + // Keep showing tooltip and his % when hovered + $('#storage-' + type).on('mouseenter', function() { + $(this).css('display', 'block'); + $('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0.4'); + }).on('mouseleave', function() { + $(this).css('display', 'none'); + $('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0'); + }); + + $('.storage-chart span[data-type="storage-'+ type +'"]').on('mouseover', function() { + $(this).find('p').css('opacity', '0.4'); + }).on('mouseout', function() { + $(this).find('p').css('opacity', '0'); + }); + }); + + //Tooltip for the storage chart + resizeStorageTooltips(); + //Tooltip for the activity chart + resizeActivityTooltips(); + + + // Resize + $(window).on('resize', function(){ + // resize storage tooltips + resizeStorageTooltips(true); + // resize activity tooltips + resizeActivityTooltips(); + }); +}); + +/*---------------- +General function +----------------*/ +function resizeStorageTooltips(resize=false) { + $('.storage-chart span').each(function () { + let tooltip = $('.storage-tooltips #'+$(this).data('type')); + let arrow = $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow'); + let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2; + // Move tooltip if he create horizontal scrollbar + let storage_width = $('#chart-title-storage').innerWidth(); + if(left + tooltip.innerWidth() > storage_width){ + let diff = (left + tooltip.innerWidth()) - storage_width; + left = left - diff; + arrow.css('left', 'calc(50% + '+ diff +'px)'); + } + tooltip.css('left', left+"px"); + // Move tooltip if he create vertical scrollbar + let str_chart_pos = $('.storage-chart').offset().top; + let str_chart_height = $('.storage-chart').innerHeight(); + let tooltip_height = $('.storage-tooltips #'+$(this).data("type")).innerHeight() + str_chart_height; + let windows_height = $(window).height(); + + if (resize) { + if (str_chart_pos + tooltip_height > windows_height) { + tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)'); + arrow.addClass('bottom'); + } else { + tooltip.css('bottom', ''); + arrow.removeClass('bottom'); + } + } else { + if (str_chart_pos + tooltip_height > windows_height) { + tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)'); + arrow.addClass('bottom'); + } + $(this).off('mouseenter').on('mouseenter', function() { + tooltip.show(); + }); + $(this).off('mouseleave').on('mouseleave', function() { + tooltip.hide(); + }); + } + }); +} + +function resizeActivityTooltips() { + $('.activity_tooltips').has('.tooltip').each(function() { + const max_width = $('#pwgMain').innerWidth() - 20; + const tooltip = $(this).find('.tooltip'); + let left = $(this).position().left + ($(this).innerWidth() / 2) + (tooltip.innerWidth() / 2); + if (left > max_width) { + const arrow = $(this).find('.tooltip-arrow'); + const diff = max_width - left; + + tooltip.css('left', 'calc(50% + '+ diff +'px)'); + arrow.css('left', 'calc(50% - '+ diff +'px)'); + } + }); +} + diff --git a/admin/themes/default/template/intro.tpl b/admin/themes/default/template/intro.tpl index a9e1a2017..eff014028 100644 --- a/admin/themes/default/template/intro.tpl +++ b/admin/themes/default/template/intro.tpl @@ -64,121 +64,8 @@ jQuery().ready(function(){ {foreach from=$STORAGE_CHART_DATA key=type_to_translate item=details} translate_type['{$type_to_translate}'] = "{$type_to_translate|translate}"; {/foreach} -{literal} -Object.entries(storage_details).forEach(([type, infos]) => { - // Determine if we use MB or GB and show it correctly - let size = infos.total.filesize; - let str_size_type_string = size > 1000000 ? str_gb : str_mb; - let size_nb = size > 1000000 ? (size / 1000000).toFixed(2) : (size / 1000).toFixed(0); - let str_size = str_size_type_string.replace("%s", size_nb); - - // Display head of Tooltip - $('#storage-title-' + type).html(''+translate_type[type]+''); - $('#storage-size-' + type).html(''+ str_size +''); - $('#storage-files-' + type).html('

'+ (infos.total.nb_files ? translate_files.replace('%d', infos.total.nb_files) : "~") +'

'); - - // Display body of Tooltip - if (infos.details) { - $.each(infos.details, function(ext, data) { - // Determinate if we use MB or GB and show it correctly (duplicate code from total size for scaling code) - let detail_size = data.filesize; - let detail_str_size_type_string; - let detail_size_nb = 0; - if (detail_size > 1000000) { - detail_str_size_type_string = str_gb; - detail_size_nb = (detail_size / 1000000).toFixed(2); - } else { - detail_str_size_type_string = str_mb; - detail_size_nb = (detail_size / 1000).toFixed(0) < 1 ? (detail_size / 1000).toFixed(2) : (detail_size / 1000).toFixed(0); - } - let detail_str_size = detail_str_size_type_string.replace("%s", detail_size_nb); - $('#storage-detail-' + type).append(''+ - ''+ - ''+ ext +''+ - ''+ detail_str_size +''+ - ''+ translate_files.replace('%d', data.nb_files) +''+ - ''+ - ''); - let ext_bg_color = $('.storage-chart span[data-type="storage-'+type+'"]').css('background-color'); - $('#storage-'+type+' .tooltip-details-ext b').css('color', ext_bg_color); - }); - } else { - $('#storage-'+ type +' .separated').attr('style', 'display: none !important'); - $('#storage-' + type +' .tooltip-header').css('margin', '0'); - } - - // Fixing storage chart tooltip bug in little screen - // Keep showing tooltip and his % when hovered - $('#storage-' + type).hover(function() { - $(this).css('display', 'block'); - $('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0.4'); - }, function() { - $(this).css('display', 'none'); - $('.storage-chart span[data-type="storage-'+ type +'"] p').css('opacity', '0'); - }); - $('.storage-chart span[data-type="storage-'+ type +'"]').hover(function() { - $(this).find('p').css('opacity', '0.4'); - }, function() { - $(this).find('p').css('opacity', '0'); - }); -}); - -//Tooltip for the storage chart -$('.storage-chart span').each(function () { - let tooltip = $('.storage-tooltips #'+$(this).data('type')); - let arrow = $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow'); - let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2; - // Move tooltip if he create horizontal scrollbar - let storage_width = $('#chart-title-storage').innerWidth(); - if(left + tooltip.innerWidth() > storage_width){ - let diff = (left + tooltip.innerWidth()) - storage_width; - left = left - diff; - arrow.css('left', 'calc(50% + '+ diff +'px)'); - } - tooltip.css('left', left+"px"); - // Move tooltip if he create vertical scrollbar - let str_chart_pos = $('.storage-chart').offset().top; - let str_chart_height = $('.storage-chart').innerHeight(); - let tooltip_height = $('.storage-tooltips #'+$(this).data("type")).innerHeight() + str_chart_height; - let windows_height = $(window).height(); - if (str_chart_pos + tooltip_height > windows_height) { - tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)'); - arrow.addClass('bottom'); - } - $(this).hover(function() { - tooltip.toggle(); - }); -}); - -$(window).on('resize', function(){ - $('.storage-chart span').each(function () { - let tooltip = $('.storage-tooltips #'+$(this).data('type')); - let arrow = $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow'); - let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2; - // Move tooltip if he create horizontal scrollbar - let storage_width = $('#chart-title-storage').innerWidth(); - if(left + tooltip.innerWidth() > storage_width){ - let diff = (left + tooltip.innerWidth()) - storage_width; - left = left - diff; - arrow.css('left', 'calc(50% + '+ diff +'px)'); - } - tooltip.css('left', left+"px"); - // Move tooltip if he create vertical scrollbar - let str_chart_pos = $('.storage-chart').offset().top; - let str_chart_height = $('.storage-chart').innerHeight(); - let tooltip_height = $('.storage-tooltips #'+$(this).data("type")).innerHeight() + str_chart_height; - let windows_height = $(window).height(); - if (str_chart_pos + tooltip_height > windows_height) { - tooltip.css('bottom', 'calc(100% + '+ str_chart_height +'px)'); - arrow.addClass('bottom'); - } else { - tooltip.css('bottom', ''); - arrow.removeClass('bottom'); - } - }); -}); -{/literal} {/footer_script} +{combine_script id='intro_tooltips' load='footer' path='admin/themes/default/js/intro_tooltips.js'} {html_style} .eiw .messages ul li { @@ -273,13 +160,14 @@ $(window).on('resize', function(){ {foreach from=$ACTIVITY_CHART_DATA item=WEEK_ACTIVITY key=WEEK_NUMBER}
{'Week %d'|@translate:$ACTIVITY_WEEK_NUMBER[$WEEK_NUMBER]}
{foreach from=$WEEK_ACTIVITY item=SIZE key=DAY_NUMBER} - + {if $SIZE != 0} {assign var='SIZE_IN_UNIT' value=$SIZE/$ACTIVITY_CHART_NUMBER_SIZES * 5 + 1} {assign var='OPACITY_IN_UNIT' value=$SIZE/$ACTIVITY_CHART_NUMBER_SIZES * 0.6 + 0.2}
{if $ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"] != 0}

+ {if $ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"] > 1}{'%d Activities'|translate:$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"]}{else}{'%d Activity'|translate:$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"]}{/if} {$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["date"]} diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 902657bdb..5fea2fde7 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -1530,17 +1530,6 @@ a.stat-box:hover { white-space: nowrap; } -.intro-charts .tooltip::after { - content: " "; - position: absolute; - bottom: 100%; - left: 51%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: transparent transparent white transparent; -} - .activity-chart span div:hover{ padding: 0.5vw; } @@ -1588,7 +1577,8 @@ a.stat-box:hover { content: none; } -.storage-tooltips .tooltip-arrow { +.storage-tooltips .tooltip-arrow, +.activity-chart .tooltip-arrow { content: " "; position: absolute; bottom: 100%; diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 883a02c64..d5826fdf8 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -262,15 +262,12 @@ a.stat-box:hover { box-shadow: none; } -.intro-charts .tooltip::after { - border-color: transparent transparent #333333 transparent; -} - .storage-tooltips .separated { background: #777; } -.storage-tooltips .tooltip-arrow { +.storage-tooltips .tooltip-arrow, +.activity-chart .tooltip-arrow { border-color: transparent transparent #333333 transparent; }