mirror of
https://github.com/ParadiseSS13/Paradise.git
synced 2026-08-22 19:47:22 +01:00
NanoUI Upgrades: FontAwesome, Bower, Minified CSS
This commit is contained in:
@@ -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
@@ -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
@@ -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
File diff suppressed because one or more lines are too long
+2
-1258
File diff suppressed because one or more lines are too long
@@ -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 |
@@ -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,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
@@ -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",
|
||||
|
||||
@@ -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 ()
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
} ();
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user