tgui-like window styles (TauCetiStation#5990)

code/__DEFINES/misc.dm

@@ -200,8 +200,10 @@
 #define MOUSE_OPACITY_OPAQUE        2
 
 // Used in browser.dm for common.css style.
-#define CSS_THEME_LIGHT "theme_light"
-#define CSS_THEME_DARK "theme_dark"
+#define CSS_THEME_LIGHT     "theme_light"
+#define CSS_THEME_DARK      "theme_dark"
+#define CSS_THEME_SYNDICATE "theme_syndicate"
+#define CSS_THEME_ABDUCTOR  "theme_abductor"
 
 #define BYOND_JOIN_LINK "byond://[BYOND_SERVER_ADDRESS]"
 #define BYOND_SERVER_ADDRESS config.server ? "[config.server]" : "[world.address]:[world.port]"

code/controllers/subsystem/events.dm

@@ -4,15 +4,6 @@ SUBSYSTEM_DEF(events)
 	// Report events at the end of the rouund
 	var/report_at_round_end = 0
 
-    // UI vars
-	var/window_x = 700
-	var/window_y = 600
-	var/table_options = " align='center'"
-	var/head_options = " style='font-weight:bold;'"
-	var/row_options1 = " width='85px'"
-	var/row_options2 = " width='260px'"
-	var/row_options3 = " width='150px'"
-
     // Event vars
 	var/datum/event_container/selected_event_container = null
 	var/list/active_events = list()
@@ -71,7 +62,7 @@ SUBSYSTEM_DEF(events)
 
 	var/html = GetInteractWindow()
 
-	var/datum/browser/popup = new(user, "event_manager", "Event Manager", window_x, window_y)
+	var/datum/browser/popup = new(user, "event_manager", "Event Manager", 700, 600)
 	popup.set_content(html)
 	popup.open()
 
@@ -98,7 +89,7 @@ SUBSYSTEM_DEF(events)
 /datum/controller/subsystem/events/proc/GetInteractWindow()
 	var/html = "<A align='right' href='?src=\ref[src];refresh=1'>Refresh</A>"
 	if(!config.allow_random_events)
-		html = "<span class='alert'>Random events has been disabled by SERVER!</span><br>" + html
+		html = "<span class='red'>Random events has been disabled by SERVER!</span><br>" + html
 	else
 		var/pause_all = FALSE
 		for(var/severity in EVENT_LEVEL_MUNDANE to EVENT_LEVEL_MAJOR)
@@ -112,10 +103,10 @@ SUBSYSTEM_DEF(events)
 		var/event_time = max(0, selected_event_container.next_event_time - world.time)
 		html += "<A align='right' href='?src=\ref[src];back=1'>Back</A><br>"
 		html += "Time till start: [round(event_time / 600, 0.1)]<br>"
-		html += "<div class='block'>"
+		html += "<div class='Section'>"
 		html += "<h2>Available [severity_to_string[selected_event_container.severity]] Events (queued & running events will not be displayed)</h2>"
-		html += "<table[table_options]>"
-		html += "<tr[head_options]><td[row_options2]>Name </td><td>Weight </td><td>MinWeight </td><td>MaxWeight </td><td>OneShot </td><td>Enabled </td><td><span class='alert'>CurrWeight </span></td><td>Remove</td></tr>"
+		html += "<table align='center'>"
+		html += "<tr><th class='collapsing'>Name</th><th>Weight</th><th>MinWeight</th><th>MaxWeight</th><th>OneShot</th><th>Enabled</th><th><span class='red'>CurrWeight</span></th><th>Remove</th></tr>"
 		for(var/datum/event_meta/EM in selected_event_container.available_events)
 			html += "<tr>"
 			html += "<td>[EM.name]</td>"
@@ -124,16 +115,16 @@ SUBSYSTEM_DEF(events)
 			html += "<td>[EM.max_weight]</td>"
 			html += "<td><A align='right' href='?src=\ref[src];toggle_oneshot=\ref[EM]'>[EM.one_shot]</A></td>"
 			html += "<td><A align='right' href='?src=\ref[src];toggle_enabled=\ref[EM]'>[EM.enabled]</A></td>"
-			html += "<td><span class='alert'>[EM.get_weight(number_active_with_role())]</span></td>"
+			html += "<td><span class='red'>[EM.get_weight(number_active_with_role())]</span></td>"
 			html += "<td><A align='right' href='?src=\ref[src];remove=\ref[EM];EC=\ref[selected_event_container]'>Remove</A></td>"
 			html += "</tr>"
 		html += "</table>"
 		html += "</div>"
 
-		html += "<div class='block'>"
+		html += "<div class='Section'>"
 		html += "<h2>Add Event</h2>"
-		html += "<table[table_options]>"
-		html += "<tr [head_options]><td[row_options2]>Name</td><td[row_options2]>Type</td><td[row_options1]>Weight</td><td[row_options1]>OneShot</td></tr>"
+		html += "<table align='center'>"
+		html += "<tr><th>Name</th><th class='collapsing'>Type</th><th class='collapsing'>Weight</th><th class='collapsing'>OneShot</th></tr>"
 		html += "<tr>"
 		html += "<td><A align='right' href='?src=\ref[src];set_name=\ref[new_event]'>[new_event.name ? new_event.name : "Enter Event"]</A></td>"
 		html += "<td><A align='right' href='?src=\ref[src];set_type=\ref[new_event]'>[new_event.event_type ? new_event.event_type : "Select Type"]</A></td>"
@@ -145,11 +136,11 @@ SUBSYSTEM_DEF(events)
 		html += "</div>"
 	else
 		html += "<A align='right' href='?src=\ref[src];toggle_report=1'>Round End Report: [report_at_round_end ? "On": "Off"]</A><br>"
-		html += "<div class='block'>"
+		html += "<div class='Section'>"
 		html += "<h2>Event Start</h2>"
 
-		html += "<table[table_options]>"
-		html += "<tr[head_options]><td[row_options1]>Severity</td><td[row_options1]>Starts At</td><td[row_options1]>Starts In</td><td[row_options3]>Adjust Start</td><td[row_options1]>Pause</td><td[row_options1]>Interval Mod</td></tr>"
+		html += "<table align='center'>"
+		html += "<tr><th>Severity</th><th class='collapsing'>Starts At</th><th class='collapsing'>Starts In</th><th class='collapsing'>Adjust Start</th><th class='collapsing'>Pause</th><th class='collapsing'>Interval Mod</th></tr>"
 		for(var/severity in EVENT_LEVEL_MUNDANE to EVENT_LEVEL_MAJOR)
 			var/datum/event_container/EC = event_containers[severity]
 			var/next_event_at = max(0, EC.next_event_time - world.time)
@@ -173,10 +164,10 @@ SUBSYSTEM_DEF(events)
 		html += "</table>"
 		html += "</div>"
 
-		html += "<div class='block'>"
+		html += "<div class='Section'>"
 		html += "<h2>Next Event</h2>"
-		html += "<table[table_options]>"
-		html += "<tr[head_options]><td[row_options1]>Severity</td><td[row_options2]>Name</td><td[row_options3]>Event Rotation</td><td>Clear</td></tr>"
+		html += "<table align='center'>"
+		html += "<tr><th>Severity</th><th class='collapsing'>Name</th><th class='collapsing'>Event Rotation</th><th class='collapsing'>Clear</th></tr>"
 		for(var/severity in EVENT_LEVEL_MUNDANE to EVENT_LEVEL_MAJOR)
 			var/datum/event_container/EC = event_containers[severity]
 			var/datum/event_meta/EM = EC.next_event
@@ -189,11 +180,11 @@ SUBSYSTEM_DEF(events)
 		html += "</table>"
 		html += "</div>"
 
-		html += "<div class='block'>"
+		html += "<div class='Section'>"
 		html += "<h2>Running Events</h2>"
 		html += "Estimated times, affected by master controller delays."
-		html += "<table[table_options]>"
-		html += "<tr[head_options]><td[row_options1]>Severity</td><td[row_options2]>Name</td><td[row_options1]>Ends At</td><td[row_options1]>Ends In</td><td[row_options3]>Stop</td></tr>"
+		html += "<table align='center'>"
+		html += "<tr><th>Severity</th><th class='collapsing'>Name</th><th class='collapsing'>Ends At</th><th class='collapsing'>Ends In</th><th class='collapsing'>Stop</th></tr>"
 		for(var/datum/event/E in active_events)
 			if(!E.event_meta)
 				continue

code/controllers/subsystem/ticker.dm

@@ -449,7 +449,7 @@ SUBSYSTEM_DEF(ticker)
 
 	if(silicon_list.len)
 		ai_completions += "<h2>Silicons Laws</h2>"
-		ai_completions += "<div class='block'>"
+		ai_completions += "<div class='Section'>"
 		for (var/mob/living/silicon/ai/aiPlayer in ai_list)
 			if(!aiPlayer)
 				continue
@@ -501,7 +501,7 @@ SUBSYSTEM_DEF(ticker)
 	ai_completions += "<br><h2>Mode Result</h2>"
 
 	if(mode.completion_text)//extendet has empty completion text
-		ai_completions += "<div class='block'>[mode.completion_text]</div>"
+		ai_completions += "<div class='Section'>[mode.completion_text]</div>"
 
 	//calls auto_declare_completion_* for all modes
 	for(var/handler in typesof(/datum/game_mode/proc))

code/controllers/subsystem/vote.dm

@@ -20,18 +20,17 @@ SUBSYSTEM_DEF(vote)
 			if(get_vote_time() < 0)
 				active_vote.check_winners()
 				for(var/client/C in voters)
-					C << browse(null, "window=vote;can_close=0")
+					C << browse(null, "window=vote")
 				stop_vote()
 			else
 				for(var/client/C in voters)
 					interface_client(C)
 
 
 /datum/controller/subsystem/vote/proc/interface_client(client/C)
-	var/datum/browser/panel = new(C, "vote", "Voting Panel", 500, 650)
-	panel.set_window_options("can_close=0")
+	var/datum/browser/panel = new(C, "vote", "Voting Panel", 500, 650, nref = src)
 	panel.set_content(interface(C))
-	panel.open(0)
+	panel.open()
 
 /datum/controller/subsystem/vote/proc/start_vote(newvote)
 	if(active_vote)
@@ -122,7 +121,7 @@ SUBSYSTEM_DEF(vote)
 		if(active_vote.description)
 			. += "[active_vote.description]<hr>"
 		if(admin)
-			. += "(<a href='?src=\ref[src];cancel=1'>Cancel Vote</a>) "
+			. += "<a href='?src=\ref[src];cancel=1'>Cancel Vote</a>"
 	else
 		var/any_votes = FALSE
 		. += "<h2>Start a vote:</h2><hr>"
@@ -155,7 +154,6 @@ SUBSYSTEM_DEF(vote)
 			. += "<li><i>There is no available votes here now.</i></li>"
 
 		. += "</table><hr>"
-	. += "<a href='?src=\ref[src];close=1' style='position:absolute;right:50px'>Close</a>"
 	return .
 
 

code/datums/browser.dm

@@ -2,20 +2,17 @@
 	var/client/user
 	var/title
 	var/window_id // window_id is used as the window name for browse and onclose
-	var/width = 0
-	var/height = 0
-	var/atom/ref = null
-	var/theme = CSS_THEME_DARK // or CSS_THEME_LIGHT
-	var/window_options = "focus=0;can_close=1;can_minimize=1;can_maximize=0;can_resize=1;titlebar=1;" // window option is set using window_id
+	var/width
+	var/height
+	var/atom/ref
+	var/theme // CSS_THEME_DARK or CSS_THEME_LIGHT
+	var/window_options = "focus=0;can_close=1;can_minimize=1;can_maximize=0;titlebar=1;can_resize=1;" // window option is set using window_id
 	var/stylesheets[0]
 	var/scripts[0]
-	var/title_image
-	var/head_elements
-	var/body_elements
-	var/head_content = ""
-	var/content = ""
+	var/head_content
+	var/content
 
-/datum/browser/New(nuser, nwindow_id, ntitle = 0, nwidth = 0, nheight = 0, atom/nref, ntheme)
+/datum/browser/New(nuser, nwindow_id, ntitle, nwidth, nheight, atom/nref, ntheme = CSS_THEME_DARK)
 	if(ismob(nuser))
 		var/mob/M = nuser
 		nuser = M.client
@@ -24,15 +21,15 @@
 	LAZYSET(user.browsers, nwindow_id, src)
 	window_id = nwindow_id
 	if(ntitle)
-		title = ntitle
-	if(nwidth)
+		title = capitalize(ntitle)
+	if(nwidth && nheight)
 		width = nwidth
-	if(nheight)
 		height = nheight
 	if(nref)
 		ref = nref
 	if(ntheme)
 		theme = ntheme
+
 	add_stylesheet("common", 'html/browser/common.css') // this CSS sheet is common to all UIs
 	register_asset("error_handler.js", 'code/modules/error_handler_js/error_handler.js') // error_handler - same name as in other places, add_script do ckey with names.
 
@@ -47,9 +44,6 @@
 /datum/browser/proc/set_window_options(nwindow_options)
 	window_options = nwindow_options
 
-/datum/browser/proc/set_title_image(ntitle_image)
-	//title_image = ntitle_image
-
 /datum/browser/proc/add_stylesheet(name, file)
 	if(istype(name, /datum/asset/spritesheet))
 		var/datum/asset/spritesheet/sheet = name
@@ -70,8 +64,7 @@
 /datum/browser/proc/add_content(ncontent)
 	content += ncontent
 
-/datum/browser/proc/get_header()
-
+/datum/browser/proc/get_content()
 	for(var/name in stylesheets)
 		head_content += "<link rel='stylesheet' type='text/css' href='[name]'>"
 
@@ -82,10 +75,6 @@
 	for(var/name in scripts)
 		head_content += "<script type='text/javascript' src='[name]'></script>"
 
-	var/title_attributes = "class='uiTitle'"
-	if(title_image)
-		title_attributes = "class='uiTitle icon' style='background-image: url([title_image]);'"
-
 	return {"<!DOCTYPE html>
 <html>
 	<head>
@@ -95,26 +84,16 @@
 	</head>
 	<body scroll=auto class='[theme]'>
 		<div class='uiWrapper'>
-			[title ? "<div class='uiTitleWrapper'><div [title_attributes]><tt>[title]</tt></div></div>" : ""]
+			[title ? "<div class='uiTitleWrapper'><div class='uiTitle'>[title]</div></div>" : ""]
 			<div class='uiContent'>
-	"}
-
-/datum/browser/proc/get_footer()
-	return {"
+				[content]
 			</div>
 		</div>
 	</body>
 </html>"}
 
-/datum/browser/proc/get_content()
-	return {"
-	[get_header()]
-	[content]
-	[get_footer()]
-	"}
-
-/datum/browser/proc/open(use_onclose = 1)
-	var/window_size = ""
+/datum/browser/proc/open()
+	var/window_size
 	if(width && height)
 		window_size = "size=[width]x[height];"
 	send_asset(user, "error_handler.js")
@@ -123,8 +102,8 @@
 	if(scripts.len)
 		send_asset_list(user, scripts)
 	user << browse(get_content(), "window=[window_id];[window_size][window_options]")
-	if(use_onclose)
-		onclose(user, window_id, ref)
+	winset(user, "mapwindow.map", "focus=true") // return keyboard focus to map
+	onclose(user, window_id, ref)
 
 /datum/browser/proc/close()
 	user << browse(null, "window=[window_id]")
@@ -169,10 +148,10 @@
 	opentime = world.time
 
 	if(stealfocus)
-		. = ..(use_onclose = 1)
+		. = ..()
 	else
 		var/focusedwindow = winget(user, null, "focus")
-		. = ..(use_onclose = 1)
+		. = ..()
 
 		//waits for the window to show up client side before attempting to un-focus it
 		//winexists sleeps until it gets a reply from the client, so we don't need to bother sleeping
@@ -287,24 +266,6 @@
 		return
 
 
-// This will allow you to show an icon in the browse window
-// This is added to mob so that it can be used without a reference to the browser object
-// There is probably a better place for this...
-/mob/proc/browse_rsc_icon(icon, icon_state, dir = -1)
-	/*
-	var/icon/I
-	if(dir >= 0)
-		I = new /icon(icon, icon_state, dir)
-	else
-		I = new /icon(icon, icon_state)
-		dir = "default"
-
-	var/filename = "[ckey("[icon]_[icon_state]_[dir]")].png"
-	src << browse_rsc(I, filename)
-	return filename
-	*/
-
-
 // Registers the on-close verb for a browse window (client/verb/.windowclose)
 // this will be called when the close-button of a window is pressed.
 //

code/datums/mind.dm

@@ -303,7 +303,7 @@
 			if (objectives.len==0)
 				text += "<br>Objectives are empty! <a href='?src=\ref[src];changeling=autoobjectives'>Randomize!</a>"
 			if( changeling && changeling.absorbed_dna.len && (current.real_name != changeling.absorbed_dna[1]) )
-				text += "<br><a href='?src=\ref[src];changeling=initialdna'>Transform to initial appearance.</a>"
+				text += "<br><a href='?src=\ref[src];changeling=initialdna'>Transform to initial appearance</a>"
 		else
 			text += "<a href='?src=\ref[src];changeling=changeling'>yes</a>|<b>NO</b>"
 //			var/datum/game_mode/changeling/changeling = SSticker.mode
@@ -329,7 +329,7 @@
 					code = bombue.r_code
 					break
 			if (code)
-				text += " Code is [code]. <a href='?src=\ref[src];nuclear=tellcode'>tell the code.</a>"
+				text += " Code is [code]. <a href='?src=\ref[src];nuclear=tellcode'>tell the code</a>"
 		else
 			text += "<a href='?src=\ref[src];nuclear=nuclear'>operative</a>|<b>NANOTRASEN</b>"
 		if(current && current.client && (ROLE_OPERATIVE in current.client.prefs.be_role))
@@ -501,7 +501,7 @@
 	else
 		var/obj_count = 1
 		for(var/datum/objective/objective in objectives)
-			out += "<B>[obj_count]</B>: [objective.explanation_text] <a href='?src=\ref[src];obj_edit=\ref[objective]'>Edit</a> <a href='?src=\ref[src];obj_delete=\ref[objective]'>Delete</a> <a href='?src=\ref[src];obj_completed=\ref[objective]'><font color=[objective.completed ? "green" : "red"]>Toggle Completion</font></a><br>"
+			out += "<B>[obj_count]</B>: [objective.explanation_text] <a class='[objective.completed ? "green" : "red"]'> href='?src=\ref[src];obj_edit=\ref[objective]'>Edit</a> <a href='?src=\ref[src];obj_delete=\ref[objective]'>Delete</a> <a href='?src=\ref[src];obj_completed=\ref[objective]'>Toggle Completion</a><br>"
 			obj_count++
 	out += "<a href='?src=\ref[src];obj_add=1'>Add objective</a><br><br>"
 

code/datums/music_player.dm

@@ -137,7 +137,6 @@ var/global/datum/notes_storage/note_cache_storage = new
 
 	var/datum/browser/popup = new(user, "musical_instrument_[instrument.name]", instrument.name, 700, 700)
 	popup.set_content(html)
-	popup.set_title_image(user.browse_rsc_icon(instrument.icon, instrument.icon_state))
 	popup.open()
 
 /datum/music_player/Topic(herf, href_list)

code/datums/wires/_wires.dm

@@ -176,7 +176,6 @@ var/global/list/wire_daltonism_colors = list()
 
 	var/datum/browser/popup = new(user, "wires", holder.name, window_x, window_y)
 	popup.set_content(html)
-	popup.set_title_image(user.browse_rsc_icon(holder.icon, holder.icon_state))
 	popup.open()
 
 	return TRUE
@@ -192,7 +191,7 @@ var/global/list/wire_daltonism_colors = list()
  * >   . += "<br>Another light is [E.another_status ? "off" : "blinking"]."
  */
 /datum/wires/proc/get_interact_window(see_effect)
-	var/html = "<fieldset class='block'>"
+	var/html = "<fieldset class='Section'>"
 	html += "<legend><h3>Exposed Wires</h3></legend>"
 	html += "<table[table_options]>"