Various bug fixes for v5-beta1 (#2722)

* Prevent legend text overlapping

- As well as some minor display adjustment for MaterialDesign theme.

* Fix indent issue

* Fix legend text bg-color

* Fix spectrogram image save

* Fix create torrent save

* Clean up dialog verbose utility classes

- Replace verbose utility classes with plain CSS rules.
- Center any open dialogs when the WebUI resizes.

* Group dialog windows in a container

* Fix spectrogram init.js indent

* Fix Blue theme dialog windows

Author: jevenski

css/style.css

@@ -129,10 +129,19 @@ div.dlg-window {
   color: #000000;
   border: 2px solid #909090;
   border-radius: 8px;
+  outline: 0px solid transparent;
   display: none;
   max-width: 95vw;
   max-height: 95vh;
 }
+div.dlg-window > div:first-child {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+}
 div.dlg-window div.row {
   margin: 0.5rem 0;
   padding: 0;
@@ -150,6 +159,9 @@ div.dlg-header {
   background: #F0F0F0 url(../images/blank.gif) no-repeat scroll 4px center;
   border-bottom: 1px solid #909090;
   border-radius: 10px 10px 0 0;
+  font-weight: bold;
+  padding: 0.25rem 0.25rem 0.25rem 3rem;
+  flex-grow: 1;
 }
 a.dlg-close:link, a.dlg-close:visited {
   display: block;
@@ -294,6 +306,7 @@ div#stg {width: 95vw;}
 div#stg_c {
   display: flex;
   flex-direction: row;
+  background-color: var(--settings-background-color);
 }
 div#stg-pages {
   padding: 0 0.5rem;
@@ -367,6 +380,7 @@ div#stg .lm {
 .stg_con legend {
   position: sticky;
   top: 0;
+  background-color: var(--settings-background-color);
 }
 .ie9 .stg_con {position: static}
 .stg_con table {width: 100%}
@@ -415,9 +429,7 @@ div#gcont div.row:not(.Header) {padding: 0 0.3rem; word-break: break-all;}
 div#gcont div.row > div {padding-top: 0.25rem; padding-bottom: 0.25rem;}
 
 div.graph_tab {background-color: #FFFFFF; overflow: hidden; display: block; -moz-user-focus: normal; -moz-user-input: enabled; line-height: 11px; color: #545454;}
-.graph_tab_grid,.graph_tab_legend {
-	display: none;
-}
+.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 { position: absolute; 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; }

index.html

@@ -296,6 +296,7 @@ <h4 class="offcanvas-title" id="offcanvas-sidepanel-label"></h4>
 		</div>
 		<div class="graph_tab_grid"></div>
 		<div class="graph_tab_legend"></div>
+		<div id="dialog-container"></div>
 		<div id="dir-container"></div>
 		<script type="text/javascript" src="./js/bootstrap.bundle.min.js?v=5b1"></script>
 	</body>

js/objects.js

@@ -108,9 +108,9 @@ var theDialogManager =
 	modalState: false,
 
 	make: function(id, name, content, isModal, noClose) {
-		$(document.body).append($("<div>").attr("id",id).addClass("dlg-window").append(
-			$("<div>").addClass("d-flex flex-row align-items-center justify-content-between position-sticky top-0").append(
-				$("<div>").attr("id",id+"-header").addClass("dlg-header fw-bold ps-5 pe-1 py-1 flex-grow-1").text(name),
+		$("#dialog-container").append($("<div>").attr("id",id).addClass("dlg-window").append(
+			$("<div>").append(
+				$("<div>").attr("id",id+"-header").addClass("dlg-header").text(name),
 				$("<a>").attr({href:"#"}).addClass("dlg-close"),
 			),
 			$(content),
@@ -121,22 +121,22 @@ var theDialogManager =
 		var obj = $('#'+id);
 		if(!isModal)
 			isModal = false;
-		obj.css( { position: "absolute", display: "none", outline: "0px solid transparent" } ).
-			data("modal",isModal).data("nokeyclose",noClose);
+		obj.data({
+			modal: isModal,
+			nokeyclose: noClose,
+		});
 		if(!noClose)
 			obj.find(".dlg-close").on("click", () => theDialogManager.hide(id));
 		var self = this;
-		var checkForButtons = function me(val)
-		{
+		var checkForButtons = function me(val) {
 			if(val.hasClass("Cancel"))
 				val.on('click', function() { theDialogManager.hide(id); } );
 			if(val.hasClass("Button"))
 				$(val).on('focus', function() { this.blur(); } );
 			val.children().each( function(ndx,val) { me($(val)) } );
 		};
 		checkForButtons(obj);
-		var inScrollBarArea = function(obj,x,y)
-		{
+		var inScrollBarArea = function(obj,x,y) {
 			if(obj.tagName && (/^input|textarea$/i).test(obj.tagName))
 				return(false);
 			var c = $(obj).offset();

js/webui.js

@@ -249,10 +249,9 @@ var theWebUI =
 		}
 	},
 
-	assignEvents: function()
-	{
-		window.onresize = theWebUI.resize;
-		window.onorientationchange = theWebUI.resize;
+	assignEvents: function() {
+		window.addEventListener("resize", () => theWebUI.resize());
+		window.addEventListener("orientationchange", () => theWebUI.resize());
 		$(document).on("dragstart", function(e) { return(false); } );
 		$(document).on("selectstart", function(e) { return(e.fromTextCtrl); });
 		$(document).on("contextmenu", function(e) {
@@ -2306,6 +2305,8 @@ var theWebUI =
 		theWebUI.resizeLeft(w);
 		const h = $("#maincont").height() * theWebUI.settings["webui.vsplit"];
 		theWebUI.resizeTop(null, h);
+		// center any open dialog
+		theDialogManager.visible.forEach(id => theDialogManager.center(id));
 	},
 
 	update: function()

plugins/_task/_task.css

@@ -3,10 +3,13 @@
   line-height: 16px;
   background: #F5F5F5;
   white-space: pre;
-  overflow: scroll;
+  overflow: auto;
   width: 580px;
   cursor: text;
 }
+.tskconsole img {
+  width: 100%;
+}
 #tskcmdlog {
   height: 36rem;
 }

plugins/create/create.css

@@ -1,6 +1,5 @@
 div#create {background: url(../../images/toolbar.png) -48px center}
 div#tcreate div.dlg-header {background-image: url(./images/create16.gif)}
-div#tcreate .row {margin: 0 0 0.25rem 0; padding: 0; align-items: center;}
 div#tcreate textarea {resize: none; height: 8rem;}
 
 #recentTrackers {width: 130px;}

plugins/create/init.js

@@ -119,14 +119,13 @@ theWebUI.deleteFromRecentTrackers = function()
 plugin.onLangLoaded = function()
 {
 	var plg = thePlugins.get("_task");
-	if(!plg.allStuffLoaded)
+	if (!plg.allStuffLoaded)
 		setTimeout(arguments.callee,1000);
-	else
-	{
+	else {
 		theWebUI.request('?action=rtget',[plugin.getRecentTrackers, plugin]);
 		$('#tsk_btns').prepend(
-			"<input type='button' class='Button' id='xcsave' value='"+theUILang.torrentSave+"'>"
-			 );
+			$("<button>").attr({type:"button", id:"xcsave"}).text(theUILang.torrentSave).hide(),
+		);
 		plugin.addButtonToToolbar("create",theUILang.mnu_create,"theWebUI.showCreate()","remove");
 		plugin.addSeparatorToToolbar("remove");
 		var pieceSize = $("<div>").addClass("row").append(
@@ -221,18 +220,16 @@ plugin.onLangLoaded = function()
 			)[0].outerHTML,
 			true
 		);
-		$("option[value='1024']").attr({selected: ""});
+		$("option[value='1024']").prop("selected", true);
 
 		$(document.body).append($("<iframe name='xcreatefrm'/>").css({visibility: "hidden"}).attr( { name: "xcreatefrm", id: "xcreatefrm" } ).width(0).height(0));
 		$(document.body).append(
 			$('<form action="plugins/create/action.php" id="xgetfile" method="post" target="xcreatefrm">'+
 				'<input type="hidden" name="cmd" value="getfile">'+
 				'<input type="hidden" name="no" id="xtaskno" value="0">'+
-			'</form>').width(0).height(0));
-		$("#xcsave").on('click', function()
-		{
-			$('#xgetfile').trigger('submit');
-		});
+			'</form>').width(0).height(0),
+		);
+		$("#xcsave").on('click', () => $('#xgetfile').trigger('submit'));
 		if (thePlugins.isInstalled("_getdir")) {
 			new theWebUI.rDirBrowser("path_edit", true, 375);
 		}