cyberpresidentvanellope/CHOMPStation2
1
0
Fork 0
mirror of https://github.com/CHOMPStation2/CHOMPStation2.git synced 2025-12-13 19:52:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Layout update for NanoUI.

Browse Source 
The layout HTML (which was mainly used for the title bar) is no longer hard coded in nanoui.dm.
Layouts are now dynamic and each consists of a template and stylesheet (CSS) file.
Multiple layouts can exist, they can be switched to using the set_layout_key proc. See the proc comments for more info.
Added "default" and "basic" layouts, "basic" has no title bar.
Moved image source assets (GIMP and Flash files) into a separate source folder so that they are not sent to the client.
This commit is contained in:
Mark Aherne
2014-07-15 01:08:06 +01:00
parent fd0ee4cf2f
commit 34516bded4
19 changed files with 376 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
code/modules/nano/nanoui.dm
View File

@@ -36,12 +36,11 @@ nanoui is used to open and update nano browser uis
var/list/stylesheets = list() var/list/stylesheets = list()
// the list of javascript scripts to use for this ui // the list of javascript scripts to use for this ui
var/list/scripts = list() var/list/scripts = list()
// the list of templates to use with this ui (usually just one) // a list of templates which can be used with this ui
var/templates[0] var/templates[0]
// the body content for this ui, do not change unless you know what you're doing // the layout key for this ui (this is used on the frontend, leave it as "default" unless you know what you're doing)
// the #mainTemplate div will contain the compiled "main" template html var/layout_key = "default"
var/content = "<div id='mainTemplate'></div>" // the default state to use for this ui (this is used on the frontend, leave it as "default" unless you know what you're doing)
// the title of this ui
var/state_key = "default" var/state_key = "default"
// initial data, containing the full data structure, must be sent to the ui (the data structure cannot be extended later on) // initial data, containing the full data structure, must be sent to the ui (the data structure cannot be extended later on)
var/list/initial_data[0] var/list/initial_data[0]
@@ -59,7 +58,7 @@ nanoui is used to open and update nano browser uis
* @param nuser /mob The mob who has opened/owns this ui * @param nuser /mob The mob who has opened/owns this ui
* @param nsrc_object /obj|/mob The obj or mob which this ui belongs to * @param nsrc_object /obj|/mob The obj or mob which this ui belongs to
* @param nui_key string A string key to use for this ui. Allows for multiple unique uis on one src_oject * @param nui_key string A string key to use for this ui. Allows for multiple unique uis on one src_oject
* @param ntemplate string The name of the template file from /nano/templates (e.g. "my_template.tmpl") * @param ntemplate string The filename of the template file from /nano/templates (e.g. "my_template.tmpl")
* @param ntitle string The title of this ui * @param ntitle string The title of this ui
* @param nwidth int the width of the ui window * @param nwidth int the width of the ui window
* @param nheight int the height of the ui window * @param nheight int the height of the ui window
@@ -67,14 +66,14 @@ nanoui is used to open and update nano browser uis
* *
* @return /nanoui new nanoui object * @return /nanoui new nanoui object
*/ */
/datum/nanoui/New(nuser, nsrc_object, nui_key, ntemplate, ntitle = 0, nwidth = 0, nheight = 0, var/atom/nref = null) /datum/nanoui/New(nuser, nsrc_object, nui_key, ntemplate_filename, ntitle = 0, nwidth = 0, nheight = 0, var/atom/nref = null)
user = nuser user = nuser
src_object = nsrc_object src_object = nsrc_object
ui_key = nui_key ui_key = nui_key
window_id = "[ui_key]\ref[src_object]" window_id = "[ui_key]\ref[src_object]"
// Add the passed template as the 'main' template, this is required // add the passed template filename as the "main" template, this is required
add_template("main", ntemplate) add_template("main", ntemplate_filename)
if (ntitle) if (ntitle)
title = ntitle title = ntitle
@@ -99,8 +98,8 @@ nanoui is used to open and update nano browser uis
add_script("nano_state_manager.js") // The NanoStateManager JS, it handles updates from the server and passes data to the current state add_script("nano_state_manager.js") // The NanoStateManager JS, it handles updates from the server and passes data to the current state
add_script("nano_state.js") // The NanoState JS, this is the base state which all states must inherit from add_script("nano_state.js") // The NanoState JS, this is the base state which all states must inherit from
add_script("nano_state_default.js") // The NanoStateDefault JS, this is the "default" state (used by all UIs by default), which inherits from NanoState add_script("nano_state_default.js") // The NanoStateDefault JS, this is the "default" state (used by all UIs by default), which inherits from NanoState
add_script("nano_base_callbacks.js") // The NanoBaseCallbacks JS, this is used to set up (before and after update) callbacks which are common to all templates add_script("nano_base_callbacks.js") // The NanoBaseCallbacks JS, this is used to set up (before and after update) callbacks which are common to all UIs
add_script("nano_base_helpers.js") // The NanoBaseHelpers JS, this is used to set up template helpers which are common to all templates add_script("nano_base_helpers.js") // The NanoBaseHelpers JS, this is used to set up template helpers which are common to all UIs
add_stylesheet("shared.css") // this CSS sheet is common to all UIs add_stylesheet("shared.css") // this CSS sheet is common to all UIs
add_stylesheet("icons.css") // this CSS sheet is common to all UIs add_stylesheet("icons.css") // this CSS sheet is common to all UIs
@@ -224,6 +223,7 @@ nanoui is used to open and update nano browser uis
/** /**
* Add a CSS stylesheet to this UI * Add a CSS stylesheet to this UI
* These must be added before the UI has been opened, adding after that will have no effect
* *
* @param file string The name of the CSS file from /nano/css (e.g. "my_style.css") * @param file string The name of the CSS file from /nano/css (e.g. "my_style.css")
* *
@@ -234,6 +234,7 @@ nanoui is used to open and update nano browser uis
/** /**
* Add a JavsScript script to this UI * Add a JavsScript script to this UI
* These must be added before the UI has been opened, adding after that will have no effect
* *
* @param file string The name of the JavaScript file from /nano/js (e.g. "my_script.js") * @param file string The name of the JavaScript file from /nano/js (e.g. "my_script.js")
* *
@@ -243,35 +244,36 @@ nanoui is used to open and update nano browser uis
scripts.Add(file) scripts.Add(file)
/** /**
* Add a template to this UI * Add a template for this UI
* Templates are combined with the data sent to the UI to create the rendered view * Templates are combined with the data sent to the UI to create the rendered view
* Each template needs a div in ui.content to contain the rendered content. * These must be added before the UI has been opened, adding after that will have no effect
* The div format is '<div id='<templateKey>Template'></div>' where <templateKey> is replaced with the templater's key.
* All UIs are set up by default to use a 'main' template, so only use this proc if you want to add advanced functionality.
* *
* @param key string The key name for this template, used to identify the div to render this template into ('<div id='<templateKey>Template'></div>') * @param key string The key which is used to reference this template in the frontend
* @param file string The name of the template file from /nano/templates (e.g. "my_template.tmpl") * @param filename string The name of the template file from /nano/templates (e.g. "my_template.tmpl")
* *
* @return nothing * @return nothing
*/ */
/datum/nanoui/proc/add_template(key, file) /datum/nanoui/proc/add_template(key, filename)
templates[key] = file templates[key] = filename
/** /**
* Set the HTML content of the UI * Set the layout key for use in the frontend Javascript
* This should only really be used to add more template divs (see the add_template() proc) * The layout key is the basic layout key for the page
* Two files are loaded on the client based on the layout key varable:
* -> a template in /nano/templates with the filename "layout_<layout_key>.tmpl
* -> a CSS stylesheet in /nano/css with the filename "layout_<layout_key>.css
* *
* @param ncontent string The new HTML content for this UI * @param nlayout string The layout key to use
* *
* @return nothing * @return nothing
*/ */
/datum/nanoui/proc/set_content(ncontent) /datum/nanoui/proc/set_layout_key(nlayout_key)
content = ncontent layout_key = lowertext(nlayout_key)
/** /**
* Set the state key for use in the frontend Javascript * Set the state key for use in the frontend Javascript
* *
* @param nstate_key string The new HTML content for this UI * @param nstate_key string The key of the state to use
* *
* @return nothing * @return nothing
*/ */
@@ -289,11 +291,16 @@ nanoui is used to open and update nano browser uis
on_close_logic = state on_close_logic = state
/** /**
* Return the HTML header content for this UI * Return the HTML for this UI
* *
* @return string HTML header content * @return string HTML for the UI
*/ */
/datum/nanoui/proc/get_header() /datum/nanoui/proc/get_html()
// before the UI opens, add the layout files based on the layout key
add_stylesheet("layout_[layout_key].css")
add_template("layout", "layout_[layout_key].tmpl")
var/head_content = "" var/head_content = ""
for (var/filename in scripts) for (var/filename in scripts)
@@ -302,20 +309,17 @@ nanoui is used to open and update nano browser uis
for (var/filename in stylesheets) for (var/filename in stylesheets)
head_content += "<link rel='stylesheet' type='text/css' href='[filename]'> " head_content += "<link rel='stylesheet' type='text/css' href='[filename]'> "
var/templatel_data[0]
for (var/key in templates)
templatel_data[key] = templates[key];
var/template_data_json = "{}" // An empty JSON object var/template_data_json = "{}" // An empty JSON object
if (templatel_data.len > 0) if (templates.len > 0)
template_data_json = list2json(templatel_data) template_data_json = list2json(templates)
var/list/send_data = get_send_data(initial_data) var/list/send_data = get_send_data(initial_data)
var/initial_data_json = list2json(send_data) var/initial_data_json = list2json(send_data)
var/url_parameters_json = list2json(list("src" = "\ref[src]")) var/url_parameters_json = list2json(list("src" = "\ref[src]"))
return {"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> return {"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head> <head>
@@ -332,11 +336,9 @@ nanoui is used to open and update nano browser uis
</script> </script>
[head_content] [head_content]
</head> </head>
<body scroll=auto data-url-parameters='[url_parameters_json]' data-template-data='[template_data_json]' data-initial-data='[initial_data_json]'> <body scroll=auto data-template-data='[template_data_json]' data-url-parameters='[url_parameters_json]' data-initial-data='[initial_data_json]'>
<div id='uiWrapper'> <div id='uiLayout'>
[title ? "<div id='uiTitleWrapper'><div id='uiStatusIcon' class='icon24 uiStatusGood'></div><div id='uiTitle'>[title]</div><div id='uiTitleFluff'></div></div>" : ""] </div>
<div id='uiContent'>
<div id='uiLoadingNotice'>Initiating...</div>
<noscript> <noscript>
<div id='uiNoScript'> <div id='uiNoScript'>
<h2>JAVASCRIPT REQUIRED</h2> <h2>JAVASCRIPT REQUIRED</h2>
@@ -344,31 +346,8 @@ nanoui is used to open and update nano browser uis
Enable Javascript and then open this UI again.</p> Enable Javascript and then open this UI again.</p>
</div> </div>
</noscript> </noscript>
"}
/**
* Return the HTML footer content for this UI
*
* @return string HTML footer content
*/
/datum/nanoui/proc/get_footer()
return {"
</div>
</div>
</body> </body>
</html>"} </html>
/**
* Return the HTML for this UI
*
* @return string HTML for the UI
*/
/datum/nanoui/proc/get_html()
return {"
[get_header()]
[content]
[get_footer()]
"} "}
/** /**
@@ -377,6 +356,7 @@ nanoui is used to open and update nano browser uis
* @return nothing * @return nothing
*/ */
/datum/nanoui/proc/open() /datum/nanoui/proc/open()
var/window_size = "" var/window_size = ""
if (width && height) if (width && height)
window_size = "size=[width]x[height];" window_size = "size=[width]x[height];"

21
nano/css/layout_basic.css Normal file
View File

@@ -0,0 +1,21 @@
body {
background: #272727 url(uiBasicBackground.png) 50% 0 repeat-x;
}
#uiContent {
clear: both;
padding: 8px;
}
#uiLoadingNotice {
position: relative;
background: url(uiNoticeBackground.jpg) 50% 50%;
color: #000000;
font-size: 14px;
font-style: italic;
font-weight: bold;
padding: 3px 4px 3px 4px;
margin: 4px 0 4px 0;
}

64
nano/css/layout_default.css Normal file
View File

@@ -0,0 +1,64 @@
body {
background: #272727 url(uiBackground.png) 50% 0 repeat-x;
}
#uiWrapper {
width: 100%;
height: 100%;
}
#uiTitleWrapper {
position: relative;
height: 30px;
}
#uiTitle {
position: absolute;
top: 6px;
left: 44px;
width: 66%;
overflow: hidden;
color: #E9C183;
font-size: 16px;
}
#uiTitle.icon {
padding: 6px 8px 6px 42px;
background-position: 2px 50%;
background-repeat: no-repeat;
}
#uiTitleFluff {
position: absolute;
top: 4px;
right: 12px;
width: 42px;
height: 24px;
background: url(uiTitleFluff.png) 50% 50% no-repeat;
}
#uiStatusIcon {
position: absolute;
top: 4px;
left: 12px;
width: 24px;
height: 24px;
}
#uiContent {
clear: both;
padding: 8px;
}
#uiLoadingNotice {
position: relative;
background: url(uiNoticeBackground.jpg) 50% 50%;
color: #000000;
font-size: 14px;
font-style: italic;
font-weight: bold;
padding: 3px 4px 3px 4px;
margin: 4px 0 4px 0;
}

397
nano/css/shared.css
View File

@@ -5,160 +5,9 @@ body {
color: #ffffff; color: #ffffff;
line-height: 170%; line-height: 170%;
font-family: Verdana, Geneva, sans-serif; font-family: Verdana, Geneva, sans-serif;
background: #272727 url(uiBackground.png) 50% 0 repeat-x; background: #272727;
}
hr {
background-color: #40628a;
height: 1px;
}
.link, .linkOn, .linkOff, .selected, .disabled {
float: left;
min-width: 15px;
height: 16px;
text-align: center;
color: #ffffff;
text-decoration: none;
background: #40628a;
border: 1px solid #161616;
padding: 0px 4px 4px 4px;
margin: 0 2px 2px 0;
cursor:default;
white-space: nowrap;
} }
.hasIcon {
padding: 0px 4px 4px 0px;
}
a:hover, .linkActive:hover {
background: #507aac;
}
.linkPending, .linkPending:hover {
color: #ffffff;
background: #507aac;
}
a.white, a.white:link, a.white:visited, a.white:active {
color: #40628a;
text-decoration: none;
background: #ffffff;
border: 1px solid #161616;
padding: 1px 4px 1px 4px;
margin: 0 2px 0 0;
cursor:default;
}
a.white:hover {
color: #ffffff;
background: #40628a;
}
.linkOn, a.linkOn:link, a.linkOn:visited, a.linkOn:active, a.linkOn:hover, .selected, a.selected:link, a.selected:visited, a.selected:active, a.selected:hover {
color: #ffffff;
background: #2f943c;
}
.linkOff, a.linkOff:link, a.linkOff:visited, a.linkOff:active, a.linkOff:hover, .disabled, a.disabled:link, a.disabled:visited, a.disabled:active, a.disabled:hover {
color: #ffffff;
background: #999999;
border-color: #666666;
}
a.icon, .linkOn.icon, .linkOff.icon, .selected.icon, .disabled.icon {
position: relative;
padding: 1px 4px 2px 20px;
}
a.icon img, .linkOn.icon img, .linkOff.icon img, .selected.icon img, .disabled.icon img {
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
}
.linkDanger, a.linkDanger:link, a.linkDanger:visited, a.linkDanger:active {
color: #ffffff;
background-color: #ff0000;
border-color: #aa0000;
}
.linkDanger:hover {
background-color: #ff6666;
}
ul {
padding: 4px 0 0 10px;
margin: 0;
list-style-type: none;
}
li {
padding: 0 0 2px 0;
}
img, a img {
border-style:none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 12px 0 6px 0;
color: #517087;
clear: both;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
h4 {
font-size: 12px;
}
#uiWrapper {
width: 100%;
height: 100%;
}
#uiTitleWrapper {
position: relative;
height: 30px;
}
#uiTitle {
position: absolute;
top: 6px;
left: 44px;
width: 66%;
overflow: hidden;
color: #E9C183;
font-size: 16px;
}
#uiTitle.icon {
padding: 6px 8px 6px 42px;
background-position: 2px 50%;
background-repeat: no-repeat;
}
#uiTitleFluff {
position: absolute;
top: 4px;
right: 12px;
width: 42px;
height: 24px;
background: url(uiTitleFluff.png) 50% 50% no-repeat;
}
#uiStatusIcon {
position: absolute;
top: 4px;
left: 12px;
width: 24px;
height: 24px;
}
#uiContent {
clear: both;
padding: 8px;
}
#uiLoadingNotice {
position: relative;
background: url(uiNoticeBackground.jpg) 50% 50%;
color: #000000;
font-size: 14px;
font-style: italic;
font-weight: bold;
padding: 3px 4px 3px 4px;
margin: 4px 0 4px 0;
}
#uiNoScript { #uiNoScript {
position: fixed; position: fixed;
top: 50%; top: 50%;
@@ -176,6 +25,125 @@ h4 {
text-align: center; text-align: center;
} }
hr {
background-color: #40628a;
height: 1px;
}
.link, .linkOn, .linkOff, .selected, .disabled {
float: left;
min-width: 15px;
height: 16px;
text-align: center;
color: #ffffff;
text-decoration: none;
background: #40628a;
border: 1px solid #161616;
padding: 0px 4px 4px 4px;
margin: 0 2px 2px 0;
cursor: default;
white-space: nowrap;
}
.hasIcon {
padding: 0px 4px 4px 0px;
}
a:hover, .linkActive:hover {
background: #507aac;
}
.linkPending, .linkPending:hover {
color: #ffffff;
background: #507aac;
}
a.white, a.white:link, a.white:visited, a.white:active {
color: #40628a;
text-decoration: none;
background: #ffffff;
border: 1px solid #161616;
padding: 1px 4px 1px 4px;
margin: 0 2px 0 0;
cursor: default;
}
a.white:hover {
color: #ffffff;
background: #40628a;
}
.linkOn, a.linkOn:link, a.linkOn:visited, a.linkOn:active, a.linkOn:hover, .selected, a.selected:link, a.selected:visited, a.selected:active, a.selected:hover {
color: #ffffff;
background: #2f943c;
}
.linkOff, a.linkOff:link, a.linkOff:visited, a.linkOff:active, a.linkOff:hover, .disabled, a.disabled:link, a.disabled:visited, a.disabled:active, a.disabled:hover {
color: #ffffff;
background: #999999;
border-color: #666666;
}
a.icon, .linkOn.icon, .linkOff.icon, .selected.icon, .disabled.icon {
position: relative;
padding: 1px 4px 2px 20px;
}
a.icon img, .linkOn.icon img, .linkOff.icon img, .selected.icon img, .disabled.icon img {
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
}
.linkDanger, a.linkDanger:link, a.linkDanger:visited, a.linkDanger:active {
color: #ffffff;
background-color: #ff0000;
border-color: #aa0000;
}
.linkDanger:hover {
background-color: #ff6666;
}
ul {
padding: 4px 0 0 10px;
margin: 0;
list-style-type: none;
}
li {
padding: 0 0 2px 0;
}
img, a img {
border-style: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 12px 0 6px 0;
color: #517087;
clear: both;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
h4 {
font-size: 12px;
}
.white { .white {
color: white; color: white;
font-weight: bold; font-weight: bold;
@@ -185,10 +153,12 @@ h4 {
color: #4f7529; color: #4f7529;
font-weight: bold; font-weight: bold;
} }
.average { .average {
color: #cd6500; color: #cd6500;
font-weight: bold; font-weight: bold;
} }
.bad { .bad {
color: #ee0000; color: #ee0000;
font-weight: bold; font-weight: bold;
@@ -202,15 +172,19 @@ h4 {
.redBackground { .redBackground {
background: #ea0000; background: #ea0000;
} }
.yellowBackground { .yellowBackground {
background: #cacc00; background: #cacc00;
} }
.highlight { .highlight {
color: #8BA5C4; color: #8BA5C4;
} }
.dark { .dark {
color: #272727; color: #272727;
} }
.noticePlaceholder { .noticePlaceholder {
position: relative; position: relative;
font-size: 12px; font-size: 12px;
@@ -219,6 +193,7 @@ h4 {
padding: 3px 4px 3px 4px; padding: 3px 4px 3px 4px;
margin: 4px 0 4px 0; margin: 4px 0 4px 0;
} }
.notice { .notice {
position: relative; position: relative;
background: url(uiNoticeBackground.jpg) 50% 50%; background: url(uiNoticeBackground.jpg) 50% 50%;
@@ -229,9 +204,11 @@ h4 {
padding: 3px 4px 3px 4px; padding: 3px 4px 3px 4px;
margin: 4px 0 4px 0; margin: 4px 0 4px 0;
} }
.notice.icon { .notice.icon {
padding: 2px 4px 0 20px; padding: 2px 4px 0 20px;
} }
.notice img { .notice img {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -240,37 +217,40 @@ h4 {
height: 16px; height: 16px;
} }
div.notice { div.notice {
clear: both; clear: both;
} }
.itemGroup { .itemGroup {
border: 1px solid #e9c183; border: 1px solid #e9c183;
background: #2c2c2c; background: #2c2c2c;
padding: 4px; padding: 4px;
clear: both; clear: both;
} }
.item { .item {
width: 100%; width: 100%;
margin: 4px 0 0 0; margin: 4px 0 0 0;
clear: both; clear: both;
} }
.itemLabel { .itemLabel {
float: left; float: left;
width: 30%; width: 30%;
color: #e9c183; color: #e9c183;
} }
.itemContent { .itemContent {
float: left; float: left;
width: 69%; width: 69%;
} }
.itemLabelNarrow { .itemLabelNarrow {
float: left; float: left;
width: 20%; width: 20%;
color: #e9c183; color: #e9c183;
} }
.itemLabelWide { .itemLabelWide {
float: left; float: left;
width: 45%; width: 45%;
@@ -281,10 +261,12 @@ div.notice {
float: left; float: left;
width: 79%; width: 79%;
} }
.itemContentSmall { .itemContentSmall {
float: left; float: left;
width: 33%; width: 33%;
} }
.itemContentMedium { .itemContentMedium {
float: left; float: left;
width: 55%; width: 55%;
@@ -297,6 +279,7 @@ div.notice {
padding: 4px; padding: 4px;
margin: 3px 0; margin: 3px 0;
} }
.statusDisplayRecords { .statusDisplayRecords {
background: #000000; background: #000000;
color: #ffffff; color: #ffffff;
@@ -307,25 +290,28 @@ div.notice {
overflow-y: auto; overflow-y: auto;
} }
.statusLabel { .statusLabel {
width: 138px; width: 138px;
float: left; float: left;
overflow: hidden; overflow: hidden;
color: #98B0C3; color: #98B0C3;
} }
.statusValue { .statusValue {
float: left; float: left;
} }
.block { .block {
padding: 8px; padding: 8px;
margin: 10px 4px 4px 4px; margin: 10px 4px 4px 4px;
border: 1px solid #40628a; border: 1px solid #40628a;
background-color: #202020; background-color: #202020;
} }
.block h3 { .block h3 {
padding: 0; padding: 0;
} }
.displayBar { .displayBar {
position: relative; position: relative;
width: 236px; width: 236px;
@@ -336,6 +322,7 @@ div.notice {
overflow: hidden; overflow: hidden;
background: #000000; background: #000000;
} }
.displayBarText { .displayBarText {
position: absolute; position: absolute;
top: -2px; top: -2px;
@@ -345,6 +332,7 @@ div.notice {
color: #ffffff; color: #ffffff;
font-weight: normal; font-weight: normal;
} }
.displayBarFill { .displayBarFill {
width: 0%; width: 0%;
height: 100%; height: 100%;
@@ -352,58 +340,70 @@ div.notice {
overflow: hidden; overflow: hidden;
float: left; float: left;
} }
.displayBarFill.alignRight { .displayBarFill.alignRight {
float: right; float: right;
} }
.displayBarFill.good { .displayBarFill.good {
color: #ffffff; color: #ffffff;
background: #4f7529; background: #4f7529;
} }
.displayBarFill.average { .displayBarFill.average {
color: #ffffff; color: #ffffff;
background: #cd6500; background: #cd6500;
} }
.displayBarFill.bad { .displayBarFill.bad {
color: #ffffff; color: #ffffff;
background: #ee0000; background: #ee0000;
} }
.displayBarFill.highlight { .displayBarFill.highlight {
color: #ffffff; color: #ffffff;
background: #8BA5C4; background: #8BA5C4;
} }
.clearBoth { .clearBoth {
clear: both; clear: both;
} }
.clearLeft { .clearLeft {
clear: left; clear: left;
} }
.clearRight { .clearRight {
clear: right; clear: right;
} }
.line { .line {
width: 100%; width: 100%;
clear: both; clear: both;
} }
.inactive, , a.inactive:link, a.inactive:visited, a.inactive:active, a.inactive:hover {
.inactive, a.inactive:link, a.inactive:visited, a.inactive:active, a.inactive:hover {
color: #ffffff; color: #ffffff;
background: #999999; background: #999999;
border-color: #666666; border-color: #666666;
} }
.fixedLeft { .fixedLeft {
width: 110px; width: 110px;
float: left; float: left;
} }
.fixedLeftWide { .fixedLeftWide {
width: 165px; width: 165px;
float: left; float: left;
} }
.fixedLeftWider{ .fixedLeftWider {
width: 220px; width: 220px;
float: left; float: left;
} }
.fixedLeftWidest{ .fixedLeftWidest {
width: 250px; width: 250px;
float: left; float: left;
} }
@@ -414,33 +414,28 @@ div.notice {
/* Used in PDA */ /* Used in PDA */
.wholeScreen {
.wholeScreen position: absolute;
{
position: absolute
color: #517087; color: #517087;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align:center; text-align: center;
} }
.pdalink .pdalink {
{
float: left; float: left;
white-space:nowrap; white-space: nowrap;
} }
/* DNA Modifier UI (dna_modifier.tmpl) */ /* DNA Modifier UI (dna_modifier.tmpl) */
.dnaBlock .dnaBlock {
{
float: left; float: left;
width: 90px; width: 90px;
padding: 0 0 5px 0; padding: 0 0 5px 0;
} }
.dnaBlockNumber .dnaBlockNumber {
{
font-family: Fixed, monospace; font-family: Fixed, monospace;
float: left; float: left;
color: #ffffff; color: #ffffff;
@@ -451,8 +446,7 @@ div.notice {
text-align: center; text-align: center;
} }
.dnaSubBlock .dnaSubBlock {
{
font-family: Fixed, monospace; font-family: Fixed, monospace;
float: left; float: left;
padding: 0; padding: 0;
@@ -461,8 +455,7 @@ div.notice {
text-align: center; text-align: center;
} }
.mask .mask {
{
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
@@ -471,8 +464,7 @@ div.notice {
background: url(uiMaskBackground.png); background: url(uiMaskBackground.png);
} }
.maskContent .maskContent {
{
width: 100%; width: 100%;
height: 200px; height: 200px;
margin: 200px 0; margin: 200px 0;
@@ -480,84 +472,73 @@ div.notice {
} }
/* Table stuffs for power monitor */ /* Table stuffs for power monitor */
table.pmon table.pmon {
{ border: 2px solid RoyalBlue;
border:2px solid RoyalBlue;
} }
table.pmon td, table.pmon th table.pmon td, table.pmon th {
{ border-bottom: 1px dotted black;
border-bottom:1px dotted black; padding: 0px 5px 0px 5px;
padding:0px 5px 0px 5px;
} }
/* Table Stuffs for manifest*/ /* Table Stuffs for manifest*/
th.command th.command {
{
background: #3333FF; background: #3333FF;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
th.sec th.sec {
{
background: #8e0000; background: #8e0000;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
th.med
{ th.med {
background: #006600; background: #006600;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
th.eng
{ th.eng {
background: #b27300; background: #b27300;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
th.sci
{ th.sci {
background: #a65ba6; background: #a65ba6;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
th.civ
{ th.civ {
background: #a32800; background: #a32800;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
th.misc
{ th.misc {
background: #666666; background: #666666;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
} }
/* Damage colors for crew monitoring computer */ /* Damage colors for crew monitoring computer */
.burn .burn {
{
color: orange; color: orange;
} }
.brute .brute {
{
color: red; color: red;
} }
.toxin .toxin {
{
color: green; color: green;
} }
.oxyloss .oxyloss {
{
color: blue; color: blue;
} }

0
nano/NTLogoRevised.fla → nano/images/source/NTLogoRevised.fla
View File

0
nano/images/icon-eye.xcf → nano/images/source/icon-eye.xcf
View File

0
nano/images/uiBackground-Syndicate.xcf → nano/images/source/uiBackground-Syndicate.xcf
View File

0
nano/uiBackground.fla → nano/images/source/uiBackground.fla
View File

0
nano/images/uiBackground.xcf → nano/images/source/uiBackground.xcf
View File

BIN
nano/images/source/uiBasicBackground.xcf Normal file
View File

Binary file not shown.

0
nano/images/uiIcons24.xcf → nano/images/source/uiIcons24.xcf
View File

0
nano/images/uiNoticeBackground.xcf → nano/images/source/uiNoticeBackground.xcf
View File

0
nano/images/uiTitleBackground.xcf → nano/images/source/uiTitleBackground.xcf
View File

BIN
nano/images/uiBasicBackground.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

3
nano/js/nano_state.js
View File

@@ -45,7 +45,8 @@ NanoStateClass.prototype.onUpdate = function (data) {
try try
{ {
$("#mainTemplate").html(NanoTemplate.parse('main', data)); // render the 'mail' template to the #mainTemplate div $("#uiLayout").html(NanoTemplate.parse('layout', data)); // render the 'mail' template to the #mainTemplate div
$("#uiContent").html(NanoTemplate.parse('main', data)); // render the 'mail' template to the #mainTemplate div
} }
catch(error) catch(error)
{ {

3
nano/js/nano_state_manager.js
View File

@@ -25,8 +25,6 @@ NanoStateManager = function ()
// this function sets up the templates and base functionality // this function sets up the templates and base functionality
var init = function () var init = function ()
{ {
$('#uiLoadingNotice').html('Loading...');
// We store initialData and templateData in the body tag, it's as good a place as any // We store initialData and templateData in the body tag, it's as good a place as any
_data = $('body').data('initialData'); _data = $('body').data('initialData');
@@ -47,7 +45,6 @@ NanoStateManager = function ()
doUpdate(_data); doUpdate(_data);
_isInitialised = true; _isInitialised = true;
$('#uiLoadingNotice').hide();
}); });
}; };

53
nano/js/nano_template.js
View File

@@ -1,76 +1,73 @@
var NanoTemplate = function () { var NanoTemplate = function () {
var _templateData = {};
var _templates = {}; var _templates = {};
var _compiledTemplates = {}; var _compiledTemplates = {};
var _helpers = {}; var _helpers = {};
var init = function () { var init = function () {
// We store initialData and templateData in the body tag, it's as good a place as any // We store templateData in the body tag, it's as good a place as any
var templateData = $('body').data('templateData'); _templateData = $('body').data('templateData');
if (templateData == null) if (_templateData == null)
{ {
alert('Error: Template data did not load correctly.'); alert('Error: Template data did not load correctly.');
} }
loadNextTemplate();
};
var loadNextTemplate = function () {
// we count the number of templates for this ui so that we know when they've all been rendered // we count the number of templates for this ui so that we know when they've all been rendered
var templateCount = 0; var templateCount = Object.size(_templateData);
for (var key in templateData)
{
if (templateData.hasOwnProperty(key))
{
templateCount++;
}
}
if (!templateCount) if (!templateCount)
{ {
alert('ERROR: No templates listed!'); $(document).trigger('templatesLoaded');
return;
} }
// load markup for each template and register it // load markup for each template and register it
for (var key in templateData) for (var key in _templateData)
{ {
if (!templateData.hasOwnProperty(key)) if (!_templateData.hasOwnProperty(key))
{ {
continue; continue;
} }
$.when($.ajax({ $.when($.ajax({
url: templateData[key], url: _templateData[key],
cache: false, cache: false,
dataType: 'text' dataType: 'text'
})) }))
.done(function(templateMarkup) { .done(function(templateMarkup) {
//templateMarkup = templateMarkup.replace(/ +\) *\}\}/g, ')}}');
templateMarkup += '<div class="clearBoth"></div>'; templateMarkup += '<div class="clearBoth"></div>';
try try
{ {
NanoTemplate.addTemplate(key, templateMarkup) NanoTemplate.addTemplate(key, templateMarkup);
templateCount--;
if (templateCount <= 0)
{
$(document).trigger('templatesLoaded');
}
} }
catch(error) catch(error)
{ {
alert('ERROR: An error occurred while loading the UI: ' + error.message); alert('ERROR: An error occurred while loading the UI: ' + error.message);
return; return;
} }
delete _templateData[key];
loadNextTemplate();
}) })
.fail(function () { .fail(function () {
alert('ERROR: Loading template ' + key + '(' + templateData[key] + ') failed!'); alert('ERROR: Loading template ' + key + '(' + _templateData[key] + ') failed!');
});; });
return;
}
} }
};
var compileTemplates = function () { var compileTemplates = function () {

3
nano/templates/layout_basic.tmpl Normal file
View File

@@ -0,0 +1,3 @@
<div id='uiContent'>
<div id='uiLoadingNotice'>Initiating...</div>
</div>

4
nano/templates/layout_default.tmpl Normal file
View File

@@ -0,0 +1,4 @@
<div id='uiTitleWrapper'><div id='uiStatusIcon' class='icon24 uiStatusGood'></div><div id='uiTitle'>{{:config.title}}</div><div id='uiTitleFluff'></div></div>
<div id='uiContent'>
<div id='uiLoadingNotice'>Initiating...</div>
</div>