added tooltips to webspace/traffic bars

Signed-off-by: Roman Schmerold (BNoiZe) <bnoize@froxlor.org>
This commit is contained in:
Roman Schmerold (BNoiZe)
2013-12-16 11:47:25 +01:00
parent 7c0ab217ee
commit dc886c9fc5
7 changed files with 474 additions and 301 deletions

View File

@@ -19,11 +19,11 @@
<span>Webspace:</span>
<if $row['diskspace'] != 'UL'>
<if (($row['diskspace']/100)*(int)Settings::Get('system.report_webmax')) < $row['diskspace_used']>
<div class="progress progress-danger">
<div class="progress progress-danger tipper" title="{$row['diskspace_used']} {$lng['panel']['used']}, {$row['diskspace']} {$lng['panel']['assigned']}">
<div class="bar" style="width: {$disk_percent}%"></div>
</div>
<else>
<div class="progress">
<div class="progress tipper" title="{$row['diskspace_used']} {$lng['panel']['used']}, {$row['diskspace']} {$lng['panel']['assigned']}">
<div class="bar" style="width: {$disk_percent}%"></div>
</div>
</if>
@@ -37,11 +37,11 @@
<span>Traffic:</span>
<if $row['traffic'] != 'UL'>
<if (($row['traffic']/100)*(int)Settings::Get('system.report_trafficmax')) < $row['traffic_used']>
<div class="progress progress-danger">
<div class="progress progress-danger tipper" title="{$row['traffic_used']} {$lng['panel']['used']}, {$row['traffic']} {$lng['panel']['assigned']}">
<div class="bar" style="width: {$traffic_percent}%"></div>
</div>
<else>
<div class="progress">
<div class="progress tipper" title="{$row['traffic_used']} {$lng['panel']['used']}, {$row['traffic']} {$lng['panel']['assigned']}">
<div class="bar" style="width: {$traffic_percent}%"></div>
</div>
</if>

View File

@@ -26,11 +26,11 @@
<span>Webspace:</span>
<if $row['diskspace'] != 'UL'>
<if (($row['diskspace']/100)*(int)Settings::Get('system.report_webmax')) < $row['diskspace_used']>
<div class="progress progress-danger">
<div class="progress progress-danger tipper" title="{$row['diskspace_used']} {$lng['panel']['used']}, {$row['diskspace']} {$lng['panel']['assigned']}">
<div class="bar" style="width: {$disk_percent}%"></div>
</div>
<else>
<div class="progress">
<div class="progress tipper" title="{$row['diskspace_used']} {$lng['panel']['used']}, {$row['diskspace']} {$lng['panel']['assigned']}">
<div class="bar" style="width: {$disk_percent}%"></div>
</div>
</if>
@@ -44,11 +44,11 @@
<span>Traffic:</span>
<if $row['traffic'] != 'UL'>
<if (($row['traffic']/100)*(int)Settings::Get('system.report_trafficmax')) < $row['traffic_used']>
<div class="progress progress-danger">
<div class="progress progress-danger tipper" title="{$row['traffic_used']} {$lng['panel']['used']}, {$row['traffic']} {$lng['panel']['assigned']}">
<div class="bar" style="width: {$traffic_percent}%"></div>
</div>
<else>
<div class="progress">
<div class="progress tipper" title="{$row['traffic_used']} {$lng['panel']['used']}, {$row['traffic']} {$lng['panel']['assigned']}">
<div class="bar" style="width: {$traffic_percent}%"></div>
</div>
</if>

File diff suppressed because it is too large Load Diff

BIN
templates/Sparkle/assets/img/tipper.png vendored Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 B

View File

@@ -34,6 +34,11 @@ $(document).ready(function() {
}
});
// Enable Newsfeeds
$(".tipper").tipper({
direction: "right"
});
// Height of divs fix
var snheight = $('#sidenavigation').height();
var mainheight = $('#maincontent').height();

10
templates/Sparkle/assets/js/tipper.min.js vendored Executable file
View File

@@ -0,0 +1,10 @@
/*
* Tipper Plugin [Formstone Library]
* @author Ben Plum
* @version 0.4.3
*
* Copyright © 2013 Ben Plum <mr@benplum.com>
* Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
if(jQuery)(function(c){function n(a){e.formatter=p;return c(this).on("mouseenter.tipper",q).data("tipper",c.extend({},e,a||{}))}function q(){var a=c(this),b=a.data("tipper"),d;d='<div class="tipper-wrapper"><div class="tipper-content">'+b.formatter.apply(c("body"),[a]);d+='</div><span class="tipper-caret"></span></div>';a.data("tipper-text",a.attr("title")).attr("title",null);var g=c('<div class="tipper-positioner '+b.direction+'" />');g.append(d).appendTo("body");d=g.find(".tipper-caret");var h=a.offset(), e=a.outerWidth(),j=a.outerHeight(),k=g.outerWidth(!0),l=g.outerHeight(!0),f={},m={};"right"==b.direction||"left"==b.direction?(f.top=h.top-(l-j)/2,m.top=(l-d.outerHeight(!0))/2,"right"==b.direction?f.left=h.left+e+b.margin:"left"==b.direction&&(f.left=h.left-k-b.margin)):(f.left=h.left-(k-e)/2,m.left=(k-d.outerWidth(!0))/2,"bottom"==b.direction?f.top=h.top+j+b.margin:"top"==b.direction&&(f.top=h.top-l-b.margin));g.css(f);d.css(m);a.one("mouseleave.tipper",{$tipper:g,$target:a},r)}function p(a){return a.attr("title")} function r(a){a=a.data;a.$target.attr("title",a.$target.data("tipper-text")).data("tipper-text",null);a.$tipper.remove()}var e={direction:"right",follow:!1,formatter:function(){},margin:15},j={defaults:function(a){e=c.extend(e,a||{});return c(this)},destroy:function(){c(".tipper-wrapper").remove();return c(this).off(".tipper").data("tipper",null)}};c.fn.tipper=function(a){return j[a]?j[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"===typeof a||!a?n.apply(this,arguments):this}})(jQuery);

View File

@@ -19,6 +19,7 @@
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/traffic.js"></script>
</if>
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/tipper.min.js"></script>
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/jcanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/circular.js"></script>
<if Settings::Get('panel.use_webfonts') == '1'>