added tooltips to webspace/traffic bars

Signed-off-by: Roman Schmerold (BNoiZe) <bnoize@froxlor.org>

templates/Sparkle/admin/admins/admins_admin.tpl

@@ -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>

templates/Sparkle/admin/customers/customers_customer.tpl

@@ -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>

templates/Sparkle/assets/js/main.js

@@ -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();

templates/Sparkle/assets/js/tipper.min.js

@@ -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);

templates/Sparkle/header.tpl

@@ -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'>