From 9ca0b7bec087ede54948ca34e86c721b24a5a188 Mon Sep 17 00:00:00 2001 From: "Willy \"Linty" Date: Wed, 8 Nov 2023 12:30:21 +0100 Subject: [PATCH] Issue #1710 New storage bar tooltips For each kind of files give the number and for each file extension give number of files and total files size --- admin/intro.php | 50 +++---- admin/themes/default/template/intro.tpl | 174 ++++++++++++++---------- admin/themes/default/theme.css | 13 +- admin/themes/roma/theme.css | 4 + 4 files changed, 139 insertions(+), 102 deletions(-) diff --git a/admin/intro.php b/admin/intro.php index 44827b95f..07fd8d563 100644 --- a/admin/intro.php +++ b/admin/intro.php @@ -384,9 +384,8 @@ $template->assign('DAY_LABELS', $day_labels); // | get storage data | // +-----------------------------------------------------------------------+ -$video_format = array('webm','webmv','ogg','ogv','mp4','m4v'); +$video_format = array('webm','webmv','ogg','ogv','mp4','m4v', 'mov'); $data_storage = array(); -$file_extensions_of = array(); //Select files in Image_Table $query = ' @@ -416,34 +415,37 @@ foreach ($file_extensions as $ext => $ext_details) $type = 'Other'; } - @$file_extensions_of[$type][strtoupper($ext)] = $ext_details['ext_counter']; - @$data_storage[$type] += $ext_details['filesize']; -} + @$data_storage[$type]['total']['filesize'] += $ext_details['filesize']; + @$data_storage[$type]['total']['nb_files'] += $ext_details['ext_counter']; -$data_storage_details = array(); - -foreach ($file_extensions_of as $type => $extensions) -{ - $details = array(); - - foreach ($extensions as $ext => $counter) - { - $details[] = $counter.'x'.$ext; - } - $data_storage_details[$type] = implode(', ', $details); + @$data_storage[$type]['details'][strtoupper($ext)] = array( + 'filesize' => $ext_details['filesize'], + 'nb_files' => $ext_details['ext_counter'], + ); } //Select files from format table $query = ' -SELECT SUM(filesize) +SELECT + COUNT(*) AS ext_counter, + ext, + SUM(filesize) AS filesize FROM `'.IMAGE_FORMAT_TABLE.'` + GROUP BY ext ;'; -$result = query2array($query); - -if (isset($result[0]['SUM(filesize)'])) +$file_extensions = query2array($query, 'ext'); +foreach ($file_extensions as $ext => $ext_details) { - $data_storage['Formats'] = $result[0]['SUM(filesize)']; + $type = 'Formats'; + + @$data_storage[$type]['total']['filesize'] += $ext_details['filesize']; + @$data_storage[$type]['total']['nb_files'] += $ext_details['ext_counter']; + + @$data_storage[$type]['details'][strtoupper($ext)] = array( + 'filesize' => $ext_details['filesize'], + 'nb_files' => $ext_details['ext_counter'], + ); } // Add cache size if requested and known. @@ -454,7 +456,7 @@ if ($conf['add_cache_to_storage_chart'] && isset($conf['cache_sizes'])) { if (isset($cache_sizes[0]) && isset($cache_sizes[0]['value'])) { - $data_storage['Cache'] = $cache_sizes[0]['value']/1024; + @$data_storage['Cache']['total']['filesize'] = $cache_sizes[0]['value']/1024; } } } @@ -463,13 +465,13 @@ if ($conf['add_cache_to_storage_chart'] && isset($conf['cache_sizes'])) $total_storage = 0; foreach ($data_storage as $value) { - $total_storage += $value; + $total_storage += $value['total']['filesize']; } //Pass data to HTML $template->assign('STORAGE_TOTAL',$total_storage); $template->assign('STORAGE_CHART_DATA',$data_storage); -$template->assign('STORAGE_DETAILS', json_encode($data_storage_details)); + // +-----------------------------------------------------------------------+ // | sending html code | // +-----------------------------------------------------------------------+ diff --git a/admin/themes/default/template/intro.tpl b/admin/themes/default/template/intro.tpl index 68e7f32da..a9e1a2017 100644 --- a/admin/themes/default/template/intro.tpl +++ b/admin/themes/default/template/intro.tpl @@ -10,8 +10,9 @@ const str_mb_used = "{'%s MB used'|translate}"; const str_gb = "{'%sGB'|translate}".replace(' ', ' '); const str_mb = "{'%sMB'|translate}".replace(' ', ' '); const storage_total = {$STORAGE_TOTAL}; -const storage_details = {$STORAGE_DETAILS}; -const storage_files = "{'%d files'|translate|escape:javascript}"; +const storage_details = {$STORAGE_CHART_DATA|json_encode}; +const translate_files = "{'%d files'|translate|escape:javascript}"; +let translate_type = {}; {literal} jQuery().ready(function(){ jQuery('.cluetip').cluetip({ @@ -59,18 +60,91 @@ jQuery().ready(function(){ let size_nb = storage_total > 1000000 ? (storage_total / 1000000).toFixed(2) : (storage_total / 1000).toFixed(0); $(".chart-title-infos").html(size_info.replace("%s", size_nb)); }); +{/literal} +{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; - $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow').css('left', 'calc(50% + '+ diff +'px)'); + 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'); } - tooltip.css('left', left+"px") $(this).hover(function() { tooltip.toggle(); }); @@ -79,81 +153,31 @@ $('.storage-chart span').each(function () { $(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; - let storage_width = $('#chart-title-storage').innerWidth() + (4 * $('.intro-page-container').innerWidth() / 100); + // 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 + 5; + let diff = (left + tooltip.innerWidth()) - storage_width; left = left - diff; - $('.storage-tooltips #'+$(this).data("type")+' .tooltip-arrow').css('left', 'calc(50% + '+ diff +'px)'); + arrow.css('left', 'calc(50% + '+ diff +'px)'); } - tooltip.css('left', left+"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'); + } }); }); -let size = 0; -let str_size_type = "MB"; -let size_nb = 0; -let str_size = ""; -let str_detail; -let str_items; -let total_files = 0; -let str_per_file = 0; -let str_dtl_color_bg; {/literal} -{foreach from=$STORAGE_CHART_DATA key=type item=value} - size = {$value}; - str_size_type_string = size > 1000000 ? str_gb : str_mb; - size_nb = size > 1000000 ? (size / 1000000).toFixed(2) : (size / 1000).toFixed(0); - str_size = str_size_type_string.replace("%s", size_nb); - - if (typeof storage_details.{$type} !== 'undefined') { - // str_size += " (" + storage_details.{$type} + ")"; - } - - str_detail = storage_details["{$type}"]; - if(str_detail) { - str_items = str_detail.split(","); - str_items.forEach(function(i) { - // Count total files - total_files = parseInt(i.split("x")[0], 10) + total_files; - // Count MB/GB per files - str_per_file = i.split('x')[0] * size_nb / str_items.map(i => parseInt(i)).reduce((acc, nb) => acc + nb, 0); - $("#storage-detail-{$type}").append(''+ - ''+ - ''+ i.split('x')[1] +''+ - ''+ str_size_type_string.replace("%s", str_per_file.toFixed(0)) +''+ - ''+ storage_files.replace('%d', i.split('x')[0]) +''+ - ''+ - ''); - }); - } else { - $('#storage-{$type} .separated').attr('style', 'display: none !important'); - $('#storage-{$type} .tooltip-header').css('margin' , '0'); - } - - $("#storage-title-{$type}").html(""); - $("#storage-title-{$type} b").html("{$type|translate}"); - $("#storage-size-{$type}").html("" + str_size + ""); - $("#storage-files-{$type}").html("

"+ (total_files === 0 ? '~' : storage_files.replace('%d', total_files)) +"

"); - str_dtl_color_bg = $(".storage-chart span[data-type='storage-{$type}']").css('background-color'); - $("#storage-{$type} .tooltip-details-ext b").css('color', str_dtl_color_bg); - total_files = 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'); - }); - -{/foreach} {/footer_script} {html_style} @@ -297,9 +321,9 @@ let str_dtl_color_bg;
{'Storage'|translate} {'%s MB used'|translate:(round($STORAGE_TOTAL/1000, 0))}
- {foreach from=$STORAGE_CHART_DATA key=type item=value} - -

{round($value/$STORAGE_TOTAL*100)}%

+ {foreach from=$STORAGE_CHART_DATA key=type item=details} + +

{round($details.total.filesize/$STORAGE_TOTAL*100)}%

 {/foreach}
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 1e089a486..c77cb1c70 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -1599,6 +1599,11 @@ a.stat-box:hover { border-color: transparent transparent white transparent; } +.storage-tooltips .tooltip-arrow.bottom { + top: 100%; + border-color: white transparent transparent transparent; +} + .storage-tooltips .separated { display: block !important; width: 100%; @@ -1638,14 +1643,16 @@ a.stat-box:hover { } .storage-tooltips .tooltip-details { - display: grid !important; - grid-template-columns: repeat(3, 1fr); - gap: 10px; + flex-wrap: wrap; + justify-content: center; } .storage-tooltips .tooltip-details-cont{ + width: 33%; align-items: center !important; + margin: 0 !important; margin-top: 10px !important; + margin-bottom: 5px !important; } .storage-tooltips .tooltip-details-ext, diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 0156792bd..c162dd587 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -274,6 +274,10 @@ a.stat-box:hover { border-color: transparent transparent #333333 transparent; } +.storage-tooltips .tooltip-arrow.bottom{ + border-color: #333333 transparent transparent transparent; +} + .intro-charts .tooltip .tooltip-details-title, .intro-charts .tooltip-title { color:#aeaeae !important; border: none !important;