Admin UI improvements (#20048)

* admin UI improvement

* browser_ui_2

* OptimisAAtion

* a

Co-authored-by: Sirryan2002 <80364400+Sirryan2002@users.noreply.github.com>

* AA fix 2

---------

Co-authored-by: Sirryan2002 <80364400+Sirryan2002@users.noreply.github.com>

code/modules/admin/create_mob.dm

@@ -8,4 +8,10 @@ GLOBAL_VAR(create_mob_html)
 		GLOB.create_mob_html = replacetext(GLOB.create_mob_html, "$ATOM$", "Mob")
 		GLOB.create_mob_html = replacetext(GLOB.create_mob_html, "null /* object types */", "\"[mobjs]\"")
 
-	user << browse(replacetext(GLOB.create_mob_html, "/* ref src */", UID()), "window=create_mob;size=425x475")
+	var/datum/browser/popup = new(user, "create_mob", "<div align='center'>Create Mob</div>", 500, 550)
+	var/unique_content = GLOB.create_mob_html
+	unique_content = replacetext(unique_content, "/* ref src */", UID())
+	popup.set_content(unique_content)
+	popup.set_window_options("can_close=1;can_minimize=0;can_maximize=1;can_resize=1")
+	popup.open()
+	onclose(user, "create_mob")

code/modules/admin/create_object.dm

@@ -9,7 +9,13 @@ GLOBAL_LIST_INIT(create_object_forms, list(/obj, /obj/structure, /obj/machinery,
 		GLOB.create_object_html = replacetext(GLOB.create_object_html, "$ATOM$", "Object")
 		GLOB.create_object_html = replacetext(GLOB.create_object_html, "null /* object types */", "\"[objectjs]\"")
 
-	user << browse(replacetext(GLOB.create_object_html, "/* ref src */", UID()), "window=create_object;size=425x475")
+	var/datum/browser/popup = new(user, "create_obj", "<div align='center'>Create Object</div>", 500, 550)
+	var/unique_content = GLOB.create_object_html
+	unique_content = replacetext(unique_content, "/* ref src */", UID())
+	popup.set_content(unique_content)
+	popup.set_window_options("can_close=1;can_minimize=0;can_maximize=1;can_resize=1")
+	popup.open()
+	onclose(user, "create_obj")
 
 /datum/admins/proc/quick_create_object(mob/user)
 	var/path = input("Select the path of the object you wish to create.", "Path", /obj) in GLOB.create_object_forms
@@ -22,4 +28,10 @@ GLOBAL_LIST_INIT(create_object_forms, list(/obj, /obj/structure, /obj/machinery,
 		html_form = replacetext(html_form, "null /* object types */", "\"[objectjs]\"")
 		GLOB.create_object_forms[path] = html_form
 
-	user << browse(replacetext(html_form, "/* ref src */", UID()), "window=qco[path];size=425x475")
+	var/datum/browser/popup = new(user, "qco[path]", "<div align='center'>Quick Create [path]</div>", 500, 550)
+	var/unique_content = html_form
+	unique_content = replacetext(unique_content, "/* ref src */", UID())
+	popup.set_content(unique_content)
+	popup.set_window_options("can_close=1;can_minimize=0;can_maximize=1;can_resize=1")
+	popup.open()
+	onclose(user, "qco[path]")

code/modules/admin/create_turf.dm

@@ -8,4 +8,10 @@ GLOBAL_VAR(create_turf_html)
 		GLOB.create_turf_html = replacetext(GLOB.create_turf_html, "$ATOM$", "Turf")
 		GLOB.create_turf_html = replacetext(GLOB.create_turf_html, "null /* object types */", "\"[turfjs]\"")
 
-	user << browse(replacetext(GLOB.create_turf_html, "/* ref src */", UID()), "window=create_turf;size=425x475")
+	var/datum/browser/popup = new(user, "create_turf", "<div align='center'>Create Turf</div>", 500, 550)
+	var/unique_content = GLOB.create_turf_html
+	unique_content = replacetext(unique_content, "/* ref src */", UID())
+	popup.set_content(unique_content)
+	popup.set_window_options("can_close=1;can_minimize=0;can_maximize=1;can_resize=1")
+	popup.open()
+	onclose(user, "create_turf")

code/modules/admin/db_ban/functions.dm

@@ -446,19 +446,15 @@
 	if(!SSdbcore.IsConnected())
 		to_chat(usr, "<span class='warning'>Failed to establish database connection</span>")
 		return
+	var/cached_UID = UID()
+	var/list/output = list()
 
-	var/output = "<div align='center'><table width='90%'><tr>"
-
-	output += "<td width='35%' align='center'>"
-	output += "<h1>Banning panel</h1>"
-	output += "</td>"
-
-	output += "<td width='65%' align='center' bgcolor='#f9f9f9'>"
-
-	output += "<form method='GET' action='?src=[UID()]'><b>Add custom ban:</b> (ONLY use this if you can't ban through any other method)"
-	output += "<input type='hidden' name='src' value='[UID()]'>"
+	output += "<div align='center'><table width='100%'><tr>"
+	output += "<td align='center'>"
+	output += "<form method='GET' action='?src=[cached_UID]'><b>(ONLY use this if you can't ban through any other method)</b>"
+	output += "<input type='hidden' name='src' value='[cached_UID]'>"
 	output += "<table width='100%'><tr>"
-	output += "<td width='50%' align='right'><b>Ban type:</b><select name='dbbanaddtype'>"
+	output += "<td width='50%' align='center'><b>Ban type:</b><br><select name='dbbanaddtype'>"
 	output += "<option value=''>--</option>"
 	output += "<option value='[BANTYPE_PERMA]'>PERMABAN</option>"
 	output += "<option value='[BANTYPE_TEMP]'>TEMPBAN</option>"
@@ -467,11 +463,11 @@
 	output += "<option value='[BANTYPE_ADMIN_PERMA]'>ADMIN PERMABAN</option>"
 	output += "<option value='[BANTYPE_ADMIN_TEMP]'>ADMIN TEMPBAN</option>"
 	output += "</select></td>"
-	output += "<td width='50%' align='right'><b>Ckey:</b> <input type='text' name='dbbanaddckey'></td></tr>"
-	output += "<tr><td width='50%' align='right'><b>IP:</b> <input type='text' name='dbbanaddip'></td>"
-	output += "<td width='50%' align='right'><b>CID:</b> <input type='text' name='dbbanaddcid'></td></tr>"
-	output += "<tr><td width='50%' align='right'><b>Duration:</b> <input type='text' name='dbbaddduration'></td>"
-	output += "<td width='50%' align='right'><b>Job:</b><select name='dbbanaddjob'>"
+	output += "<td width='50%' align='center'><b>Ckey:</b><br><input type='text' name='dbbanaddckey'></td></tr>"
+	output += "<tr><td width='50%' align='center'><b>IP:</b><br><input type='text' name='dbbanaddip'></td>"
+	output += "<td width='50%' align='center'><b>CID:</b><br><input type='text' name='dbbanaddcid'></td></tr>"
+	output += "<tr><td width='50%' align='center'><b>Duration (minutes):</b><br><input type='text' name='dbbaddduration'></td>"
+	output += "<td width='50%' align='center'><b>Job:</b><br><select name='dbbanaddjob'>"
 	output += "<option value=''>--</option>"
 	for(var/j in get_all_jobs())
 		output += "<option value='[j]'>[j]</option>"
@@ -484,7 +480,7 @@
 	for(var/j in list("Syndicate") + GLOB.antag_roles)
 		output += "<option value='[j]'>[j]</option>"
 	output += "</select></td></tr></table>"
-	output += "<b>Reason:<br></b><textarea name='dbbanreason' cols='50'></textarea><br>"
+	output += "<b>Reason:<br></b><textarea name='dbbanreason' cols='55' rows='10'></textarea><br>"
 	output += "<input type='checkbox' value='1' name='autopopulate' checked='1'>&nbsp;Auto populate CID & IP for online players<br>"
 	output += "<input type='submit' value='Add ban'>"
 	output += "</form>"
@@ -492,14 +488,15 @@
 	output += "</td>"
 	output += "</tr>"
 	output += "</table>"
+	output += "<br><br><hr><br><br>"
 
-	output += "<form method='GET' action='?src=[UID()]'><table width='60%'><tr><td colspan='2' align='left'><b>Search:</b>"
-	output += "<input type='hidden' name='src' value='[UID()]'></td></tr>"
-	output += "<tr><td width='50%' align='right'><b>Ckey:</b> <input type='text' name='dbsearchckey' value='[playerckey]'></td>"
-	output += "<td width='50%' align='right'><b>Admin ckey:</b> <input type='text' name='dbsearchadmin' value='[adminckey]'></td></tr>"
-	output += "<tr><td width='50%' align='right'><b>IP:</b> <input type='text' name='dbsearchip' value='[playerip]'></td>"
-	output += "<td width='50%' align='right'><b>CID:</b> <input type='text' name='dbsearchcid' value='[playercid]'></td></tr>"
-	output += "<tr><td width='50%' align='right' colspan='2'><b>Ban type:</b><select name='dbsearchbantype'>"
+	output += "<form method='GET' action='?src=[cached_UID]'><table width='100%'><tr><td colspan='2' align='center'><b>Search:</b>"
+	output += "<input type='hidden' name='src' value='[cached_UID]'></td></tr>"
+	output += "<tr><td width='50%' align='center'><b>Ckey:</b><br><input type='text' name='dbsearchckey' value='[playerckey]'></td>"
+	output += "<td width='50%' align='center'><b>Admin ckey:</b><br><input type='text' name='dbsearchadmin' value='[adminckey]'></td></tr>"
+	output += "<tr><td width='50%' align='center'><b>IP:</b><br><input type='text' name='dbsearchip' value='[playerip]'></td>"
+	output += "<td width='50%' align='center'><b>CID:</b><br><input type='text' name='dbsearchcid' value='[playercid]'></td></tr>"
+	output += "<tr><td width='50%' align='center' colspan='2'><b>Ban type:</b><br><select name='dbsearchbantype'>"
 	output += "<option value=''>--</option>"
 	output += "<option value='[BANTYPE_PERMA]'>PERMABAN</option>"
 	output += "<option value='[BANTYPE_TEMP]'>TEMPBAN</option>"
@@ -508,7 +505,7 @@
 	output += "<option value='[BANTYPE_ADMIN_PERMA]'>ADMIN PERMABAN</option>"
 	output += "<option value='[BANTYPE_ADMIN_TEMP]'>ADMIN TEMPBAN</option>"
 	output += "</select></td></tr></table>"
-	output += "<br><input type='submit' value='search'><br>"
+	output += "<br><input type='submit' value='Search'><br>"
 	output += "<input type='checkbox' value='[match]' name='dbmatch' [match? "checked=\"1\"" : null]> Match(min. 3 characters to search by key or ip, and 7 to search by cid)<br>"
 	output += "</form>"
 	output += "This search shows only last 100 bans."
@@ -520,12 +517,12 @@
 
 		if(adminckey || playerckey || playerip || playercid || dbbantype)
 
-			var/blcolor = "#ffeeee" //banned light
-			var/bdcolor = "#ffdddd" //banned dark
-			var/ulcolor = "#eeffee" //unbanned light
-			var/udcolor = "#ddffdd" //unbanned dark
+			var/blcolor = "#fc5f5f" //banned light
+			var/bdcolor = "#c72626" //banned dark
+			var/ulcolor = "#73b873" //unbanned light
+			var/udcolor = "#3faa3f" //unbanned dark
 
-			output += "<table width='90%' bgcolor='#e3e3e3' cellpadding='5' cellspacing='0' align='center'>"
+			output += "<table width='100%' bgcolor='#151515' cellpadding='5' cellspacing='0' align='center'>"
 			output += "<tr>"
 			output += "<th width='25%'><b>TYPE</b></th>"
 			output += "<th width='20%'><b>CKEY</b></th>"
@@ -623,9 +620,9 @@
 				var/typedesc =""
 				switch(bantype)
 					if("PERMABAN")
-						typedesc = "<font color='red'><b>PERMABAN</b></font>"
+						typedesc = "<b>PERMABAN</b>"
 					if("TEMPBAN")
-						typedesc = "<b>TEMPBAN</b><br><font size='2'>([duration] minutes [(unbanned) ? "" : "(<a href=\"byond://?src=[UID()];dbbanedit=duration;dbbanid=[banid]\">Edit</a>))"]<br>Expires [expiration]</font>"
+						typedesc = "<b>TEMPBAN</b><br><font size='2'>([duration] minutes [(unbanned) ? "" : "(<a href=\"byond://?src=[cached_UID];dbbanedit=duration;dbbanid=[banid]\">Edit</a>))"]<br>Expires<br>[expiration]</font>"
 					if("JOB_PERMABAN")
 						typedesc = "<b>JOBBAN</b><br><font size='2'>([job])"
 					if("JOB_TEMPBAN")
@@ -633,21 +630,21 @@
 					if("ADMIN_PERMABAN")
 						typedesc = "<b>ADMIN PERMABAN</b>"
 					if("ADMIN_TEMPBAN")
-						typedesc = "<b>ADMIN TEMPBAN</b><br><font size='2'>([duration] minutes [(unbanned) ? "" : "(<a href=\"byond://?src=[UID()];dbbanedit=duration;dbbanid=[banid]\">Edit</a>))"]<br>Expires [expiration]</font>"
+						typedesc = "<b>ADMIN TEMPBAN</b><br><font size='2'>([duration] minutes [(unbanned) ? "" : "(<a href=\"byond://?src=[cached_UID];dbbanedit=duration;dbbanid=[banid]\">Edit</a>))"]<br>Expires<br>[expiration]</font>"
 
 				output += "<tr bgcolor='[dcolor]'>"
 				output += "<td align='center'>[typedesc]</td>"
 				output += "<td align='center'><b>[ckey]</b></td>"
 				output += "<td align='center'>[bantime][ban_round_id ? " (Round [ban_round_id])" : ""]</td>"
 				output += "<td align='center'><b>[ackey]</b></td>"
-				output += "<td align='center'>[(unbanned) ? "" : "<b><a href=\"byond://?src=[UID()];dbbanedit=unban;dbbanid=[banid]\">Unban</a></b>"]</td>"
+				output += "<td align='center'>[(unbanned) ? "" : "<b><a href=\"byond://?src=[cached_UID];dbbanedit=unban;dbbanid=[banid]\">Unban</a></b>"]</td>"
 				output += "</tr>"
 				output += "<tr bgcolor='[dcolor]'>"
 				output += "<td align='center' colspan='2' bgcolor=''><b>IP:</b> [ip]</td>"
 				output += "<td align='center' colspan='3' bgcolor=''><b>CID:</b> [cid]</td>"
 				output += "</tr>"
 				output += "<tr bgcolor='[lcolor]'>"
-				output += "<td align='center' colspan='5'><b>Reason: [(unbanned) ? "" : "(<a href=\"byond://?src=[UID()];dbbanedit=reason;dbbanid=[banid]\">Edit</a>)"]</b> <cite>\"[reason]\"</cite></td>"
+				output += "<td align='center' colspan='5'><b>Reason: [(unbanned) ? "" : "(<a href=\"byond://?src=[cached_UID];dbbanedit=reason;dbbanid=[banid]\">Edit</a>)"]</b> <cite>\"[reason]\"</cite></td>"
 				output += "</tr>"
 				if(edits)
 					output += "<tr bgcolor='[dcolor]'>"
@@ -661,14 +658,18 @@
 					output += "<td align='center' colspan='5' bgcolor=''><b>UNBANNED by admin [unbanckey] on [unbantime][unban_round_id ? " (Round [unban_round_id])" : ""]</b></td>"
 					output += "</tr>"
 				output += "<tr>"
-				output += "<td colspan='5' bgcolor='white'>&nbsp</td>"
+				output += "<td colspan='5' bgcolor='#151515'>&nbsp</td>"
 				output += "</tr>"
 
 			output += "</table></div>"
 
 			qdel(select_query)
 
-	usr << browse(output,"window=lookupbans;size=900x700")
+	var/datum/browser/popup = new(usr, "ban_panel", "<div align='center'>Manual Ban Panel</div>", 500, 600)
+	popup.set_content(output.Join(""))
+	popup.set_window_options("can_close=1;can_minimize=0;can_maximize=0;can_resize=0;titlebar=1;")
+	popup.open()
+	onclose(usr, "ban_panel")
 
 /proc/flag_account_for_forum_sync(ckey)
 	if(!SSdbcore.IsConnected())

code/modules/admin/misc_admin_procs.dm

@@ -316,22 +316,23 @@ GLOBAL_VAR_INIT(nologevent, 0)
 	if(!check_rights(R_ADMIN))
 		return
 
-	var/dat = {"
-		<center><B>Game Panel</B></center><hr>\n
-		<A href='?src=[UID()];c_mode=1'>Change Game Mode</A><br>
-		"}
+	var/list/dat = list()
+	var/cached_UID = UID()
+	dat += "<center>"
+	dat += "<p><a href='?src=[cached_UID];c_mode=1'>Change Game Mode</a><br></p>"
 	if(GLOB.master_mode == "secret")
-		dat += "<A href='?src=[UID()];f_secret=1'>(Force Secret Mode)</A><br>"
+		dat += "<p><a href='?src=[cached_UID];f_secret=1'>(Force Secret Mode)</a><br></p>"
+	dat += "<hr><br>"
+	dat += "<p><a href='?src=[cached_UID];create_object=1'>Create Object</a><br></p>"
+	dat += "<p><a href='?src=[cached_UID];quick_create_object=1'>Quick Create Object</a><br></p>"
+	dat += "<p><a href='?src=[cached_UID];create_turf=1'>Create Turf</a><br></p>"
+	dat += "<p><a href='?src=[cached_UID];create_mob=1'>Create Mob</a></p>"
 
-	dat += {"
-		<BR>
-		<A href='?src=[UID()];create_object=1'>Create Object</A><br>
-		<A href='?src=[UID()];quick_create_object=1'>Quick Create Object</A><br>
-		<A href='?src=[UID()];create_turf=1'>Create Turf</A><br>
-		<A href='?src=[UID()];create_mob=1'>Create Mob</A><br>
-		"}
-
-	usr << browse(dat, "window=admin2;size=210x280")
+	var/datum/browser/popup = new(usr, "game_panel", "<div align='center'>Game Panel</div>", 210, 280)
+	popup.set_content(dat.Join(""))
+	popup.set_window_options("can_close=1;can_minimize=0;can_maximize=0;can_resize=0;titlebar=1;")
+	popup.open()
+	onclose(usr, "game_panel")
 	return
 
 /////////////////////////////////////////////////////////////////////////////////////////////////admins2.dm merge

html/create_object.html

@@ -1,96 +1,68 @@
-<html>
-
-<head>
-  <title>Create $ATOM$</title>
-  <style type="text/css">
-    body
-    {
-      font-size: 9pt;
-      font-family: Verdana, sans-serif;
-    }
-
-    h1, h2, h3, h4, h5, h6
-    {
-      color: #00f;
-      font-family: Georgia, Arial, sans-serif;
-    }
-    img { 
-      border: 0px; 
-    }
-    p.lic {
-      font-size: 6pt;
-    }
-  </style>
-</head>
-
-<body>
-	<form name="spawner" action="byond://?src=/* ref src */" method="get">
-		<input type="hidden" name="src" value="/* ref src */">
-		
-		Type <input type="text" name="filter" value="" style="width:280px;height:25"> <input type = "submit" value = "Search" onclick = "updateSearch()" /><br>
-		Offset: <input type="text" name="offset" value="x,y,z" style="width:250px">
-		
-		A <input type="radio" name="offset_type" value="absolute">
-		R <input type="radio" name="offset_type" value="relative" checked="checked"><br>
-		
-		Number: <input type="text" name="object_count" value="1" style="width:30px">
-		Dir: <input type="text" name="object_dir" value="2" style="width:30px">
-		Name: <input type="text" name="object_name" value="" style="width:180px"><br>
-		Where: 
-			<select name='object_where' style="width:320px">
-				<option value='onfloor'>On floor below own mob</option>
-				<option value='inhand'>In own mob's hand</option>
-				<option value='inmarked'>In marked object</option>
-			</select>
-		<br><br>
-		<select name="object_list" id="object_list" size="18" multiple style="width:98%"></select><br>
-		<input type="submit" value="spawn">
-	</form>
-	
-	<script language="JavaScript">
-		var old_search = "";
-		var object_list = document.spawner.object_list;
-		var object_paths = null /* object types */;
-		var objects = object_paths == null ? new Array() : object_paths.split(";");
-		
-		document.spawner.filter.focus();
-		
-		function populateList(from_list)
-		{
-			object_list.options.length = 0;
-			
-			var i;
-			for (i in from_list)
-			{
-				var new_option = document.createElement("option");
-				new_option.value = from_list[i];
-				new_option.text = from_list[i];
-				object_list.options.add(new_option);
-			}
-		}
-		
-		function updateSearch()
-		{
-			old_search = document.spawner.filter.value.toLowerCase();
-			if (!old_search)
-				return;
-			
-			var filtered = new Array();
-			var i;
-			for (i in objects)
-			{
-				var caseInsensitiveObject = objects[i].toLowerCase();
-				if(caseInsensitiveObject.search(old_search) < 0)
-				{
-					continue;
-				}
-				
-				filtered.push(objects[i]);
-			}
-			
-			populateList(filtered);
-		}
-	</script>
-</body>
-
-</html>
+<body>
+	<form name="spawner" action="byond://?src=/* ref src */" method="get">
+		<input type="hidden" name="src" value="/* ref src */">
+		<div style="display: block; width: 440px"><table width='100%'>
+		<tr><td width='20%'>Type: </td><td><input type="text" name="filter" value="" style="width:65%" autofocus><button type="submit" onclick="updateSearch()" style="margin-left:5%">Search</button></td>
+		<tr><td width='20%'>Offset: </td><td><input type="text" name="offset" value="x,y,z" style="width:25%;text-align:center">
+		Absolute:<input type="radio" name="offset_type" value="absolute" style="border:none">
+		Relative:<input type="radio" name="offset_type" value="relative" checked="checked" style="border:none"></td></tr>
+		<tr><td width='20%'>Amount: </td><td><input type="text" name="object_count" value="1" style="width:10%;text-align:center"></td></tr>
+		<tr><td width='20%'>Dir: </td><td><input type="text" name="object_dir" value="2" style="width:10%;text-align:center"></td></tr>
+		<tr><td width='20%'>Name: </td><td><input type="text" name="object_name" value="" style="width:65%"></td></tr>
+		<tr><td width='20%'>Where:</td><td>
+			<select name='object_where' style="width:65%">
+				<option value='onfloor'>On floor below own mob</option>
+				<option value='inhand'>In own mob's hand</option>
+				<option value='inmarked'>In marked object</option>
+			</select></td></tr>
+		</table></div>
+		<br><br>
+		<select name="object_list" id="object_list" size="15" multiple style="width:100%"></select>
+		<br><br>
+		<div align="center"><button type="submit" style="width:50%">Spawn</button></div>
+	</form>
+
+	<script language="JavaScript">
+		var old_search = "";
+		var object_list = document.spawner.object_list;
+		var object_paths = null /* object types */;
+		var objects = object_paths == null ? new Array() : object_paths.split(";");
+
+		document.spawner.filter.focus();
+
+		function populateList(from_list)
+		{
+			object_list.options.length = 0;
+
+			var i;
+			for (i in from_list)
+			{
+				var new_option = document.createElement("option");
+				new_option.value = from_list[i];
+				new_option.text = from_list[i];
+				object_list.options.add(new_option);
+			}
+		}
+
+		function updateSearch()
+		{
+			old_search = document.spawner.filter.value.toLowerCase();
+			if (!old_search)
+				return;
+
+			var filtered = new Array();
+			var i;
+			for (i in objects)
+			{
+				var caseInsensitiveObject = objects[i].toLowerCase();
+				if(caseInsensitiveObject.search(old_search) < 0)
+				{
+					continue;
+				}
+
+				filtered.push(objects[i]);
+			}
+
+			populateList(filtered);
+		}
+	</script>