NanoUI Upgrades: FontAwesome, Bower, Minified CSS

This commit is contained in:
Tigercat2000
2016-01-05 07:41:10 -08:00
parent 67f704d235
commit ef5c90e120
14 changed files with 97 additions and 1338 deletions
+3 -3
View File
@@ -382,9 +382,9 @@ nanoui is used to open and update nano browser uis
</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>
<h1>Javascript Required</h1>
<p>Javascript is required in order to use this NanoUI interface.</p>
<p>Please enable Javascript in Internet Explorer, and restart your game.</p>
</div>
</noscript>
</body>
+15 -2
View File
@@ -5,6 +5,7 @@ s =
# Project Paths
input =
fonts: "**/*.{eot,woff2}"
scripts:
lib: "scripts/libraries"
main: "scripts/nano"
@@ -18,6 +19,7 @@ output =
css: "nanoui.css"
### Pacakages ###
bower = require "main-bower-files"
del = require "del"
gulp = require "gulp"
merge = require "merge-stream"
@@ -38,11 +40,15 @@ glob = (path) ->
"#{path}/*"
### Tasks ###
gulp.task "default", ["scripts", "styles"]
gulp.task "default", ["fonts", "scripts", "styles"]
gulp.task "clean", ->
del glob output.dir
gulp.task "fonts", ["clean"], ->
gulp.src bower input.fonts
.pipe gulp.dest output.dir
gulp.task "scripts", ["clean"], ->
lib = gulp.src glob input.scripts.lib
.pipe g.concat(output.scripts.lib)
@@ -57,7 +63,10 @@ gulp.task "scripts", ["clean"], ->
merge lib, main
gulp.task "styles", ["clean"], ->
gulp.src glob input.styles
lib = gulp.src bower "**/*.css"
.pipe g.replace("../fonts/", "")
main = gulp.src glob input.styles
.pipe g.filter(["*.less", "!_*.less"])
.pipe g.less()
.pipe g.postcss([
@@ -67,5 +76,9 @@ gulp.task "styles", ["clean"], ->
p.rgba({oldie: true}),
p.plsfilters({oldIE: true})
])
combined = merge lib, main
combined
.pipe g.if(s.min, g.cssnano({discardComments: {removeAll: true}}), g.csscomb())
.pipe g.concat(output.css)
.pipe gulp.dest output.dir
+3 -2
View File
@@ -63,9 +63,10 @@ environment.
You will first need to install the primary prerequisite of NanoUI, [Node.js](https://nodejs.org).
Node.js is used to obtain all of the remaining prerequisites to compile NanoUI. This is
done by running the following two commands.
- `npm install -g gulp`
done by running the following commands.
- `npm install -g gulp bower`
- `npm install`
- `bower install`
### Running Gulp
NanoUI is built using the `gulp` task automation system. This system uses the contents
Binary file not shown.
Binary file not shown.
+1 -1
View File
File diff suppressed because one or more lines are too long
+2 -1258
View File
File diff suppressed because one or more lines are too long
+16
View File
@@ -0,0 +1,16 @@
{
"name": "nanoui",
"license": "AGPLv3",
"private": true,
"dependencies": {
"font-awesome": "~4.5.0"
},
"overrides": {
"font-awesome": {
"main": [
"css/font-awesome.css",
"fonts/*"
]
}
}
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

+1 -3
View File
@@ -39,12 +39,10 @@ body {
background: url(uiTitleFluff.png) 50% 50% no-repeat;
}
#uiStatusIcon {
.statusicon {
position: absolute;
top: 4px;
left: 12px;
width: 24px;
height: 24px;
}
#uiMapWrapper {
+1 -1
View File
@@ -1,4 +1,4 @@
<div id='uiTitleWrapper' unselectable="on"><div id='uiStatusIcon' class='icon24 uiStatusGood' unselectable="on"></div><div id='uiTitleText' unselectable="on">{{:config.title}}</div><div id='uiTitleFluff' unselectable="on"></div></div>
<div id='uiTitleWrapper' unselectable="on"><i class="statusicon fa fa-eye fa-2x" unselectable="on"></i><div id='uiTitleText' unselectable="on">{{:config.title}}</div><div id='uiTitleFluff' unselectable="on"></div></div>
<div id='uiMapWrapper' class="hidden" unselectable="on">
<div id='uiMapHeader' unselectable="on">
{{:helper.link('Hide Map', 'close', {'showMap' : 0})}}
+6 -1
View File
@@ -4,17 +4,22 @@
"dependencies": {
"autoprefixer": "^6.2.2",
"del": "^2.2.0",
"font-awesome": "^4.5.0",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-coffee": "^2.3.1",
"gulp-concat": "^2.6.0",
"gulp-csscomb": "^3.0.6",
"gulp-cssnano": "^2.0.0",
"gulp-filter": "^3.0.1",
"gulp-if": "^2.0.0",
"gulp-less": "^3.0.5",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^6.0.1",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"merge-stream": "^1.0.0",
"main-bower-files": "^2.9.0",
"pleeease-filters": "^2.0.0",
"postcss-color-rgba-fallback": "git+https://github.com/postcss/postcss-color-rgba-fallback",
"postcss-filter-gradient": "^0.2.1",
+49 -46
View File
@@ -1,39 +1,42 @@
// NanoBaseCallbacks is where the base callbacks (common to all templates) are stored
NanoBaseCallbacks = function ()
{
// _canClick is used to disable clicks for a short period after each click (to avoid mis-clicks)
var _canClick = true;
var _baseBeforeUpdateCallbacks = {}
var _baseAfterUpdateCallbacks = {
// this callback is triggered after new data is processed
// it updates the status/visibility icon and adds click event handling to buttons/links
status: function (updateData) {
var uiStatusClass;
if (updateData['config']['status'] == 2)
{
uiStatusClass = 'icon24 uiStatusGood';
$('.linkActive').removeClass('inactive');
}
else if (updateData['config']['status'] == 1)
{
uiStatusClass = 'icon24 uiStatusAverage';
$('.linkActive').addClass('inactive');
}
else
{
uiStatusClass = 'icon24 uiStatusBad'
$('.linkActive').addClass('inactive');
}
$('#uiStatusIcon').attr('class', uiStatusClass);
// _canClick is used to disable clicks for a short period after each click (to avoid mis-clicks)
var _canClick = true;
var _baseBeforeUpdateCallbacks = {}
var _baseAfterUpdateCallbacks = {
// this callback is triggered after new data is processed
// it updates the status/visibility icon and adds click event handling to buttons/links
status: function (updateData) {
var uiStatusClass;
if (updateData['config']['status'] == 2)
{
uiStatusClass = 'good';
$('.linkActive').removeClass('inactive');
}
else if (updateData['config']['status'] == 1)
{
uiStatusClass = 'average';
$('.linkActive').addClass('inactive');
}
else
{
uiStatusClass = 'bad'
$('.linkActive').addClass('inactive');
}
$('.statusicon').each( function(i, obj) {
obj.className = obj.className.replace(/good|bad|average/g, "");
obj.classList.add(uiStatusClass);
});
$('.linkActive').stopTime('linkPending');
$('.linkActive').removeClass('linkPending');
$('.linkActive').stopTime('linkPending');
$('.linkActive').removeClass('linkPending');
$('.linkActive')
$('.linkActive')
.off('click')
.on('click', function (event) {
.on('click', function (event) {
event.preventDefault();
var href = $(this).data('href');
if (href != null && _canClick)
@@ -53,7 +56,7 @@ NanoBaseCallbacks = function ()
});
return updateData;
},
},
nanomap: function (updateData) {
$('.mapIcon')
.off('mouseenter mouseleave')
@@ -92,21 +95,21 @@ NanoBaseCallbacks = function ()
return updateData;
}
};
};
return {
addCallbacks: function () {
NanoStateManager.addBeforeUpdateCallbacks(_baseBeforeUpdateCallbacks);
NanoStateManager.addAfterUpdateCallbacks(_baseAfterUpdateCallbacks);
},
removeCallbacks: function () {
for (var callbackKey in _baseBeforeUpdateCallbacks)
{
if (_baseBeforeUpdateCallbacks.hasOwnProperty(callbackKey))
{
NanoStateManager.removeBeforeUpdateCallback(callbackKey);
}
}
return {
addCallbacks: function () {
NanoStateManager.addBeforeUpdateCallbacks(_baseBeforeUpdateCallbacks);
NanoStateManager.addAfterUpdateCallbacks(_baseAfterUpdateCallbacks);
},
removeCallbacks: function () {
for (var callbackKey in _baseBeforeUpdateCallbacks)
{
if (_baseBeforeUpdateCallbacks.hasOwnProperty(callbackKey))
{
NanoStateManager.removeBeforeUpdateCallback(callbackKey);
}
}
for (var callbackKey in _baseAfterUpdateCallbacks)
{
if (_baseAfterUpdateCallbacks.hasOwnProperty(callbackKey))
@@ -115,7 +118,7 @@ NanoBaseCallbacks = function ()
}
}
}
};
};
} ();
-21
View File
@@ -1,27 +1,6 @@
/* Icons
----------------------------------*/
.icon24
{
width: 24px;
height: 24px;
}
.icon24.uiStatusGood
{
background: url(uiIcons24.png) 0 0 no-repeat;
}
.icon24.uiStatusAverage
{
background: url(uiIcons24.png) 0 -24px no-repeat;
}
.icon24.uiStatusBad
{
background: url(uiIcons24.png) 0 -48px no-repeat;
}
/* states and images */
.uiLinkPendingIcon {
display: none;