cyberpresidentvanellope/CHOMPStation2
1
0
Fork 0
mirror of https://github.com/CHOMPStation2/CHOMPStation2.git synced 2025-12-11 10:43:20 +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

128
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()
// the list of javascript scripts to use for this ui
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]
// the body content for this ui, do not change unless you know what you're doing
// the #mainTemplate div will contain the compiled "main" template html
var/content = "<div id='mainTemplate'></div>"
// the title of this ui
// the layout key for this ui (this is used on the frontend, leave it as "default" unless you know what you're doing)
var/layout_key = "default"
// 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)
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)
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 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 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 nwidth int the width 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
*/
/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
src_object = nsrc_object
ui_key = nui_key
window_id = "[ui_key]\ref[src_object]"
// Add the passed template as the 'main' template, this is required
add_template("main", ntemplate)
// add the passed template filename as the "main" template, this is required
add_template("main", ntemplate_filename)
if (ntitle)
title = ntitle
@@ -99,10 +98,10 @@ 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.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_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_helpers.js") // The NanoBaseHelpers JS, this is used to set up template helpers 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 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
/**
* Set the current status (also known as visibility) of this ui.
@@ -224,6 +223,7 @@ nanoui is used to open and update nano browser uis
/**
* 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")
*
@@ -234,6 +234,7 @@ nanoui is used to open and update nano browser uis
/**
* 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")
*
@@ -243,35 +244,36 @@ nanoui is used to open and update nano browser uis
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
* Each template needs a div in ui.content to contain the rendered content.
* 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.
* These must be added before the UI has been opened, adding after that will have no effect
*
* @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 file string The name of the template file from /nano/templates (e.g. "my_template.tmpl")
* @param key string The key which is used to reference this template in the frontend
* @param filename string The name of the template file from /nano/templates (e.g. "my_template.tmpl")
*
* @return nothing
*/
/datum/nanoui/proc/add_template(key, file)
templates[key] = file
/datum/nanoui/proc/add_template(key, filename)
templates[key] = filename
/**
* Set the HTML content of the UI
* This should only really be used to add more template divs (see the add_template() proc)
* Set the layout key for use in the frontend Javascript
* 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
*/
/datum/nanoui/proc/set_content(ncontent)
content = ncontent
/datum/nanoui/proc/set_layout_key(nlayout_key)
layout_key = lowertext(nlayout_key)
/**
* 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
*/
@@ -289,11 +291,16 @@ nanoui is used to open and update nano browser uis
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 = ""
for (var/filename in scripts)
@@ -301,21 +308,18 @@ nanoui is used to open and update nano browser uis
for (var/filename in stylesheets)
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
if (templatel_data.len > 0)
template_data_json = list2json(templatel_data)
if (templates.len > 0)
template_data_json = list2json(templates)
var/list/send_data = get_send_data(initial_data)
var/initial_data_json = list2json(send_data)
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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
@@ -332,43 +336,18 @@ nanoui is used to open and update nano browser uis
</script>
[head_content]
</head>
<body scroll=auto data-url-parameters='[url_parameters_json]' data-template-data='[template_data_json]' data-initial-data='[initial_data_json]'>
<div id='uiWrapper'>
[title ? "<div id='uiTitleWrapper'><div id='uiStatusIcon' class='icon24 uiStatusGood'></div><div id='uiTitle'>[title]</div><div id='uiTitleFluff'></div></div>" : ""]
<div id='uiContent'>
<div id='uiLoadingNotice'>Initiating...</div>
<noscript>
<div id='uiNoScript'>
<h2>JAVASCRIPT REQUIRED</h2>
<p>Your Internet Explorer's Javascript is disabled (or broken).<br/>
Enable Javascript and then open this UI again.</p>
</div>
</noscript>
"}
/**
* Return the HTML footer content for this UI
*
* @return string HTML footer content
*/
/datum/nanoui/proc/get_footer()
return {"
</div>
<body scroll=auto data-template-data='[template_data_json]' data-url-parameters='[url_parameters_json]' data-initial-data='[initial_data_json]'>
<div id='uiLayout'>
</div>
<noscript>
<div id='uiNoScript'>
<h2>JAVASCRIPT REQUIRED</h2>
<p>Your Internet Explorer's Javascript is disabled (or broken).<br/>
Enable Javascript and then open this UI again.</p>
</div>
</noscript>
</body>
</html>"}
/**
* Return the HTML for this UI
*
* @return string HTML for the UI
*/
/datum/nanoui/proc/get_html()
return {"
[get_header()]
[content]
[get_footer()]
</html>
"}
/**
@@ -376,7 +355,8 @@ nanoui is used to open and update nano browser uis
*
* @return nothing
*/
/datum/nanoui/proc/open()
/datum/nanoui/proc/open()
var/window_size = ""
if (width && 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;
}

361
nano/css/shared.css
View File

@@ -5,24 +5,43 @@ body {
color: #ffffff;
line-height: 170%;
font-family: Verdana, Geneva, sans-serif;
background: #272727 url(uiBackground.png) 50% 0 repeat-x;
background: #272727;
}
#uiNoScript {
position: fixed;
top: 50%;
left: 50%;
margin: -60px 0 0 -150px;
width: 280px;
height: 120px;
background: #ffffff;
border: 2px solid #ff0000;
color: #000000;
font-size: 10px;
font-weight: bold;
z-index: 9999;
padding: 0px 10px;
text-align: center;
}
hr {
background-color: #40628a;
height: 1px;
}
.link, .linkOn, .linkOff, .selected, .disabled {
float: left;
float: left;
min-width: 15px;
height: 16px;
text-align: center;
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;
cursor: default;
white-space: nowrap;
}
@@ -33,10 +52,12 @@ hr {
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;
@@ -44,25 +65,30 @@ a.white, a.white:link, a.white:visited, a.white:active {
border: 1px solid #161616;
padding: 1px 4px 1px 4px;
margin: 0 2px 0 0;
cursor:default;
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;
@@ -70,11 +96,13 @@ a.icon img, .linkOn.icon img, .linkOff.icon img, .selected.icon img, .disabled.i
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;
}
@@ -84,97 +112,37 @@ ul {
margin: 0;
list-style-type: none;
}
li {
padding: 0 0 2px 0;
}
img, a img {
border-style:none;
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 {
position: fixed;
top: 50%;
left: 50%;
margin: -60px 0 0 -150px;
width: 280px;
height: 120px;
background: #ffffff;
border: 2px solid #ff0000;
color: #000000;
font-size: 10px;
font-weight: bold;
z-index: 9999;
padding: 0px 10px;
text-align: center;
}
.white {
color: white;
@@ -185,10 +153,12 @@ h4 {
color: #4f7529;
font-weight: bold;
}
.average {
color: #cd6500;
font-weight: bold;
}
.bad {
color: #ee0000;
font-weight: bold;
@@ -200,17 +170,21 @@ h4 {
}
.redBackground {
background: #ea0000;
background: #ea0000;
}
.yellowBackground {
background: #cacc00;
background: #cacc00;
}
.highlight {
color: #8BA5C4;
}
.dark {
color: #272727;
}
.noticePlaceholder {
position: relative;
font-size: 12px;
@@ -219,6 +193,7 @@ h4 {
padding: 3px 4px 3px 4px;
margin: 4px 0 4px 0;
}
.notice {
position: relative;
background: url(uiNoticeBackground.jpg) 50% 50%;
@@ -229,9 +204,11 @@ h4 {
padding: 3px 4px 3px 4px;
margin: 4px 0 4px 0;
}
.notice.icon {
padding: 2px 4px 0 20px;
}
.notice img {
position: absolute;
top: 0;
@@ -240,37 +217,40 @@ h4 {
height: 16px;
}
div.notice {
clear: both;
}
.itemGroup {
border: 1px solid #e9c183;
background: #2c2c2c;
padding: 4px;
clear: both;
}
.item {
width: 100%;
margin: 4px 0 0 0;
background: #2c2c2c;
padding: 4px;
clear: both;
}
.item {
width: 100%;
margin: 4px 0 0 0;
clear: both;
}
.itemLabel {
float: left;
width: 30%;
color: #e9c183;
}
.itemContent {
float: left;
width: 69%;
}
.itemLabelNarrow {
float: left;
width: 20%;
color: #e9c183;
}
.itemLabelWide {
float: left;
width: 45%;
@@ -281,10 +261,12 @@ div.notice {
float: left;
width: 79%;
}
.itemContentSmall {
float: left;
width: 33%;
}
.itemContentMedium {
float: left;
width: 55%;
@@ -297,6 +279,7 @@ div.notice {
padding: 4px;
margin: 3px 0;
}
.statusDisplayRecords {
background: #000000;
color: #ffffff;
@@ -307,25 +290,28 @@ div.notice {
overflow-y: auto;
}
.statusLabel {
width: 138px;
float: left;
overflow: hidden;
color: #98B0C3;
}
.statusValue {
float: left;
}
.block {
padding: 8px;
margin: 10px 4px 4px 4px;
border: 1px solid #40628a;
background-color: #202020;
}
.block h3 {
padding: 0;
}
.displayBar {
position: relative;
width: 236px;
@@ -336,6 +322,7 @@ div.notice {
overflow: hidden;
background: #000000;
}
.displayBarText {
position: absolute;
top: -2px;
@@ -345,6 +332,7 @@ div.notice {
color: #ffffff;
font-weight: normal;
}
.displayBarFill {
width: 0%;
height: 100%;
@@ -352,58 +340,70 @@ div.notice {
overflow: hidden;
float: left;
}
.displayBarFill.alignRight {
float: right;
}
.displayBarFill.good {
color: #ffffff;
background: #4f7529;
}
.displayBarFill.average {
color: #ffffff;
background: #cd6500;
}
.displayBarFill.bad {
color: #ffffff;
background: #ee0000;
}
.displayBarFill.highlight {
color: #ffffff;
background: #8BA5C4;
}
.clearBoth {
clear: both;
}
.clearLeft {
clear: left;
}
.clearRight {
clear: right;
}
.line {
width: 100%;
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;
background: #999999;
border-color: #666666;
}
.fixedLeft {
width: 110px;
float: left;
}
.fixedLeftWide {
width: 165px;
float: left;
}
.fixedLeftWider{
.fixedLeftWider {
width: 220px;
float: left;
}
.fixedLeftWidest{
.fixedLeftWidest {
width: 250px;
float: left;
}
@@ -414,150 +414,131 @@ div.notice {
/* Used in PDA */
.wholeScreen
{
position: absolute
color: #517087;
font-size: 16px;
font-weight: bold;
text-align:center;
.wholeScreen {
position: absolute;
color: #517087;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.pdalink
{
.pdalink {
float: left;
white-space:nowrap;
white-space: nowrap;
}
/* DNA Modifier UI (dna_modifier.tmpl) */
.dnaBlock
{
.dnaBlock {
float: left;
width: 90px;
padding: 0 0 5px 0;
padding: 0 0 5px 0;
}
.dnaBlockNumber
{
font-family: Fixed, monospace;
float: left;
color: #ffffff;
background: #363636;
min-width: 20px;
.dnaBlockNumber {
font-family: Fixed, monospace;
float: left;
color: #ffffff;
background: #363636;
min-width: 20px;
height: 20px;
padding: 0;
text-align: center;
padding: 0;
text-align: center;
}
.dnaSubBlock
{
font-family: Fixed, monospace;
float: left;
.dnaSubBlock {
font-family: Fixed, monospace;
float: left;
padding: 0;
min-width: 16px;
height: 20px;
text-align: center;
}
.mask
{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(uiMaskBackground.png);
.mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(uiMaskBackground.png);
}
.maskContent
{
width: 100%;
height: 200px;
margin: 200px 0;
text-align: center;
.maskContent {
width: 100%;
height: 200px;
margin: 200px 0;
text-align: center;
}
/* Table stuffs for power monitor */
table.pmon
{
border:2px solid RoyalBlue;
table.pmon {
border: 2px solid RoyalBlue;
}
table.pmon td, table.pmon th
{
border-bottom:1px dotted black;
padding:0px 5px 0px 5px;
table.pmon td, table.pmon th {
border-bottom: 1px dotted black;
padding: 0px 5px 0px 5px;
}
/* Table Stuffs for manifest*/
th.command
{
background: #3333FF;
font-weight: bold;
color: #ffffff;
th.command {
background: #3333FF;
font-weight: bold;
color: #ffffff;
}
th.sec
{
background: #8e0000;
font-weight: bold;
color: #ffffff;
}
th.med
{
background: #006600;
font-weight: bold;
color: #ffffff;
}
th.eng
{
background: #b27300;
font-weight: bold;
color: #ffffff;
}
th.sci
{
background: #a65ba6;
font-weight: bold;
color: #ffffff;
}
th.civ
{
background: #a32800;
font-weight: bold;
color: #ffffff;
}
th.misc
{
background: #666666;
font-weight: bold;
color: #ffffff;
th.sec {
background: #8e0000;
font-weight: bold;
color: #ffffff;
}
th.med {
background: #006600;
font-weight: bold;
color: #ffffff;
}
th.eng {
background: #b27300;
font-weight: bold;
color: #ffffff;
}
th.sci {
background: #a65ba6;
font-weight: bold;
color: #ffffff;
}
th.civ {
background: #a32800;
font-weight: bold;
color: #ffffff;
}
th.misc {
background: #666666;
font-weight: bold;
color: #ffffff;
}
/* Damage colors for crew monitoring computer */
.burn
{
color: orange;
.burn {
color: orange;
}
.brute
{
color: red;
.brute {
color: red;
}
.toxin
{
color: green;
.toxin {
color: green;
}
.oxyloss
{
color: blue;
}
.oxyloss {
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
{
$("#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)
{

3
nano/js/nano_state_manager.js
View File

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

117
nano/js/nano_template.js
View File

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

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>