VueUI Titlebars, Resizing, and Scrolling (#10528)

TL;DR: Goodbye gross white BYOND titlebar ruining my immersion, hello beautiful theme-matched titlebars of the future. Screenshots below.

    Removes the BYOND titlebar (and thus resizing / dragging features) and replaces them with Vue/JS replacements, which may be styled as needed.
    Added a debug button that appears when UIDEBUG is defined if the user has developer permissions, thereby allowing UI developers to toggle debug mode on/off at will in-game
    A few minor styling tweaks (like adding a parameter to have buttons be an icon only so they don't have an extra margin-right sticking out)

Pretty much all of the JS heavy lifting here was ported from /tg/ and then butchered by yours truly, to get it working with our Vue system rather than their React-based system. There are no doubt more than a few JS warcrimes in here, so I'd appreciate a thorough, but gentle, review of things, as well as a decent bit of testing.
This commit is contained in:
Wildkins
2020-12-06 13:23:54 -05:00
committed by GitHub
parent 777166a3a8
commit b053ce9ba7
20 changed files with 1253 additions and 119 deletions

View File

@@ -153,6 +153,8 @@
else
VUEUI_SET_CHECK(data["apclinkicon"], "", ., data)
data["flashlight"] = flashlight?.enabled ? TRUE : FALSE
switch(get_ntnet_status())
if(0)
VUEUI_SET_CHECK(data["ntneticon"], "sig_none.gif", ., data)
@@ -175,4 +177,4 @@
continue
VUEUI_SET_CHECK(data["programheaders"][P.filename], P.ui_header, ., data)
VUEUI_SET_CHECK(data["showexitprogram"], !!active_program, ., data) // Hides "Exit Program" button on mainscreen
VUEUI_SET_CHECK(data["showexitprogram"], !!active_program, ., data) // Hides "Exit Program" button on mainscreen

View File

@@ -86,7 +86,7 @@ main ui datum.
SSvueui.ui_opened(src) // this starts processing and adds the UI to the mob and whatnot
var/params = "window=[windowid];file=[windowid];"
var/params = "window=[windowid];file=[windowid];titlebar=0;can_resize=0;"
if(width && height)
params += "size=[width]x[height];"
send_resources_and_assets(user.client, load_asset)
@@ -127,23 +127,23 @@ main ui datum.
* @return html code - text
*/
/datum/vueui/proc/generate_html(var/css_tag)
#ifdef UIDEBUG
var/debugtxt = "<div id=\"dapp\"></div>"
#else
var/debugtxt = ""
#endif
if(user && check_rights(R_DEV, FALSE, user=user))
debugtxt = "<div id=\"dapp\"></div>"
return {"
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="vueui.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8"/>
<meta id="vueui:windowId" content="[windowid]"/>
<link rel="stylesheet" type="text/css" href="vueui.css"/>
[css_tag]
</head>
<body class="[get_theme_class()]">
<div id="header">
<header-[header]></header-[header]>
<header-handles></header-handles>
</div>
<div id="app">
Javascript file has failed to load. <a href="?src=\ref[src]&vueuiforceresource=1">Click here to force load resources</a>
@@ -160,6 +160,9 @@ main ui datum.
<script type="application/json" id="initialstate">
[generate_data_json()]
</script>
<script type="text/javascript">
window.__windowId__ = document.getElementById('vueui:windowId').getAttribute('content');
</script>
<script type="text/javascript" src="vueui.js"></script>
</html>
"}
@@ -178,6 +181,7 @@ main ui datum.
sdata["status"] = status
sdata["title"] = title
sdata["wtime"] = world.time
sdata["debug"] = user && check_rights(R_DEV, FALSE, user=user)
sdata["roundstart_hour"] = roundstart_hour
for(var/asset_name in assets)
var/asset = assets[asset_name]
@@ -247,6 +251,9 @@ main ui datum.
*/
/datum/vueui/Topic(href, href_list)
. = update_status(FALSE)
if(href_list["vueuiclose"])
close()
return
if(status < STATUS_INTERACTIVE || user != usr)
return
if(href_list["vueuiforceresource"])