Merge pull request #2300 from TrimmingFool/master

improve graph theme support
Novik · Feb 11, 2022 · 6ef8301 · 6ef8301
2 parents 354a0d6 + 9690d74
commit 6ef8301
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 40 deletions.
diff --git a/css/style.css b/css/style.css
@@ -187,8 +187,13 @@ div#lcont div.std {padding: 2px}
 div#gcont table {font-size: 11px;  line-height: 10px}
 div#gcont table td.Header {font-weight: bold; background: #FCFCFC}
 
-div.graph_tab {background-color: #FFFFFF; overflow: hidden; display: block; -moz-user-select: none; -moz-user-focus: normal; -moz-user-input: enabled; user-select: none;}
-div.graph_tab {font-size: 11px;  line-height: 11px; color: #545454}
+div.graph_tab {background-color: #FFFFFF; overflow: hidden; display: block; -moz-user-select: none; -moz-user-focus: normal; -moz-user-input: enabled; user-select: none; font-size: 11px;  line-height: 11px; color: #545454;}
+.graph_tab_grid,.graph_tab_legend {
+	display: none;
+}
+.graph_tab_grid { background-color: transparent; border: 2px solid #545454; }
+.graph_tab_legend { background-color: #F0F0F0; border: 0px none transparent; }
+.graph_tab_tooltip { border: 1px solid #fdd; padding: 2px; background-color: #fee; color: black; font-size: 11px; font-weight: bold; font-family: Tahoma, Arial, Helvetica, sans-serif; opacity: 0.80; }
 
 div.table_tab {background-color: #FFFFFF; overflow: hidden; display: block; -moz-user-select: none; -moz-user-focus: normal; -moz-user-input: enabled; user-select: none; }
 div#List {border: 1px solid #A0A0A0;}

diff --git a/index.html b/index.html
@@ -276,5 +276,7 @@
 				</td>
 			</tr>
 		</table>
+		<div class="graph_tab_grid"></div>
+		<div class="graph_tab_legend"></div>
 	</body>
 </html>
diff --git a/js/graph.js b/js/graph.js
@@ -46,9 +46,6 @@ rSpeedGraph.prototype.create = function( aOwner )
 	this.down = { label: theUILang.DL, data: [], color: "#1C8DFF" };
 	this.up = { label: theUILang.UL, data: [], color: "#009900" };
 	this.startSeconds = new Date().getTime()/1000;
-	var rule = getCSSRule("div.graph_tab");
-	this.gridColor = rule ? rule.style.color : "#545454";
-	this.backgroundColor = rule ? rule.style.borderColor : null;
 
 	this.checked = [ true, true ];
 	this.datasets = [ this.up, this.down ];
@@ -79,6 +76,8 @@ rSpeedGraph.prototype.getColors = function()
 var previousSpeedPoint = null;
 rSpeedGraph.prototype.draw = function()
 {
+	var gridSel = $('.graph_tab_grid');
+	var legendSel = $('.graph_tab_legend');
 	var self = this;
 	$(function() 
 	{
@@ -109,10 +108,17 @@ rSpeedGraph.prototype.draw = function()
 				},
 				grid:
 				{
-					color: self.gridColor,
-					backgroundColor: self.backgroundColor,
+					color: gridSel.css('color'),
+					backgroundColor: gridSel.css('background-color'),
+					borderWidth: parseInt(gridSel.css('border-width')),
+					borderColor: gridSel.css('border-color'),
 					hoverable: true
 				},
+				legend : {
+					color: legendSel.css('color'),
+					borderColor: legendSel.css('border-color'),
+					backgroundColor: legendSel.css('background-color'),
+				},
 				xaxis: 
 				{ 
 					min: (self.seconds-self.startSeconds>=self.maxSeconds) ? null : self.startSeconds,
@@ -130,19 +136,14 @@ rSpeedGraph.prototype.draw = function()
 
 			function showTooltip(x, y, contents)
 			{
-        			$('<div id="tooltip">' + contents + '</div>').css( {
-					position: 'absolute',
-					display: 'none',
-					top: y + 5,
-					left: x + 5,
-					border: '1px solid #fdd',
-					padding: '2px',
-					'background-color': '#fee',
-					'color': 'black',
-					'font-size': '11px',
-					'font-weight': 'bold',
-					'font-family': 'Tahoma, Arial, Helvetica, sans-serif',
-					opacity: 0.80
+				$('<div>').attr('id', 'tooltip')
+					.addClass('graph_tab_tooltip')
+					.text(contents)
+					.css( {
+						position: 'absolute',
+						display: 'none',
+						top: y + 5,
+						left: x + 5,
 				}).appendTo("body").fadeIn(200);
 			}
 

diff --git a/plugins/theme/themes/Acid/style.css b/plugins/theme/themes/Acid/style.css
@@ -19,6 +19,8 @@ ul.CMenu li:hover ul li a {background-color: #272E36; color: #00FF00}
 ul.CMenu li:hover ul li a:hover {background-color: #BDDBDB; color: #272E36;}
 
 div.graph_tab {background-color: #272E36; color: #BDDBDB; font-weight: bold;}
+.graph_tab_legend { color: #FFF; background-color: #272E36; }
+.graph_tab_tooltip { color: #FFF; background-color: #272E36; border: 1px solid #BDDBDB; }
 
 div#t {background: #252525 url(./images/t_bg.png) repeat-x center center; border-bottom: 1px solid #252525;}
 div#t a:hover {background: transparent url(./images/tb_bg.gif) no-repeat scroll center center}

diff --git a/plugins/theme/themes/Dark/style.css b/plugins/theme/themes/Dark/style.css
@@ -63,6 +63,8 @@ div.tab {background: #181818}
 div#lcont {background: #181818}
 div#gcont table td.Header {background: #181818}
 div.graph_tab {background-color: #181818}
+.graph_tab_legend { color: #FFF; background-color: #181818; }
+.graph_tab_tooltip { color: #FFF; background-color: #606060; border: 1px solid #606060; }
 div.table_tab {background-color: #181818}
 div#List {border: 1px solid #333333;}
 

diff --git a/plugins/theme/themes/Oblivion/style.css b/plugins/theme/themes/Oblivion/style.css
@@ -104,7 +104,9 @@ div#gcont table td.Header {background: transparent url(./images/status_icons.png
 div#gcont table tr {background: #181818 url(./images/headers.png) repeat-x 0px -93px;font-family: inherit;color:#D4D6C9}
 div#gcont table tr td{background: #181818 url(./images/headers.png) repeat-x 0px -38px;}
 div#gcont table {font-family:inherit;}
-div.graph_tab {color:#FFF;border-color: #000;background-color: #181818}
+div.graph_tab {color:#FFF; background-color: #181818}
+.graph_tab_legend { color: #FFF; background-color: #181818; }
+.graph_tab_tooltip { color: #FFF; background-color: #606060; border: 1px solid #606060; }
 div.table_tab {background-color: #181818;font-family: inherit;}
 
 div#modalbg {background-color: #181818;}

diff --git a/plugins/trafic/init.js b/plugins/trafic/init.js
@@ -22,9 +22,6 @@ if(plugin.canChangeTabs())
 
 		this.ticks = new Array();
 		this.previousPoint = null;
-		var rule = getCSSRule("div.graph_tab");
-		this.gridColor = rule ? rule.style.color : "#545454";
-		this.backgroundColor = rule ? rule.style.borderColor : null;
 
 		this.checked = [ true, true, true, true ];
 		this.datasets = [ this.down, this.up, this.oldDown, this.oldUp ];
@@ -50,6 +47,8 @@ if(plugin.canChangeTabs())
 	rTraficGraph.prototype.draw = function()
 	{
 		var self = this;
+		var gridSel = $('.graph_tab_grid');
+		var legendSel = $('.graph_tab_legend');
 		$(function() 
 		{
 			if(self.owner.height() && self.owner.width())
@@ -66,10 +65,17 @@ if(plugin.canChangeTabs())
 				 	},
 					grid:
 					{
-						backgroundColor: self.backgroundColor,
-						color: self.gridColor,
+						color: gridSel.css('color'),
+						backgroundColor: gridSel.css('background-color'),
+						borderWidth: parseInt(gridSel.css('border-width')),
+						borderColor: gridSel.css('border-color'),
 						hoverable: true
 					},
+					legend : {
+						color: legendSel.css('color'),
+						borderColor: legendSel.css('border-color'),
+						backgroundColor: legendSel.css('background-color'),
+					},
 				  	yaxis: 
 				  	{ 
 				  		min: 0,
@@ -78,19 +84,14 @@ if(plugin.canChangeTabs())
 				});
 				function showTooltip(x, y, contents)
 				{
-        				$('<div id="tooltip">' + contents + '</div>').css( {
-						position: 'absolute',
-						display: 'none',
-						top: y + 5,
-						left: x + 5,
-						border: '1px solid #fdd',
-						padding: '2px',
-						'background-color': '#fee',
-						'color': 'black',
-						'font-size': '11px',
-						'font-weight': 'bold',
-						'font-family': 'Tahoma, Arial, Helvetica, sans-serif',
-						opacity: 0.80
+					$('<div>').attr('id', 'tooltip')
+						.addClass('graph_tab_tooltip')
+						.text(contents)
+						.css( {
+							position: 'absolute',
+							display: 'none',
+							top: y + 5,
+							left: x + 5,
 					}).appendTo("body").fadeIn(200);
 				}
 
@@ -439,4 +440,4 @@ plugin.onRemove = function()
 	}
 }
 
-plugin.loadLang(true);
+plugin.loadLang(true);