Add ui connection alert

This commit is contained in:
Tyler Renelle 2012-06-20 20:47:08 -04:00
parent 699fc9ab1b
commit aafcfbbb69
6 changed files with 62 additions and 2 deletions

View file

@ -1,7 +1,7 @@
derby = require('derby')
{get, view, ready} = derby.createApp module
derby.use require('derby-ui-boot')
#derby.use(require('../../ui'))
derby.use(require('../../ui'))
## ROUTES ##

15
styles/ui.styl Normal file
View file

@ -0,0 +1,15 @@
.connection {
position: absolute;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 0;
z-index: 99;
}
.connection > .alert {
border-top: 0;
border-radius: 0 0 4px 4px;
padding-right: 14px;
display: inline-block;
}

View file

@ -0,0 +1,15 @@
<connectionAlert:>
<div class="connection">
{#unless connected}
<p class="alert">
{#if canConnect}
Offline
{#unless :self.hideReconnect}
&ndash; <a x-bind="click:connect">Reconnect</a>
{/}
{else}
Unable to reconnect &ndash; <a x-bind="click:reload">Reload</a>
{/}
</p>
{/}
</div>

View file

@ -0,0 +1,15 @@
exports.create = function(model) {
this.connect = function() {
// Hide the reconnect link for a second after clicking it
model.set('hideReconnect', true)
setTimeout(function() {
model.set('hideReconnect', false)
}, 1000)
model.socket.socket.connect()
}
this.reload = function() {
window.location.reload()
}
}

14
ui/index.js Normal file
View file

@ -0,0 +1,14 @@
var config = {
filename: __filename
, styles: '../styles/ui'
, scripts: {
connectionAlert: require('./connectionAlert')
}
};
module.exports = ui
ui.decorate = 'derby'
function ui(derby, options) {
derby.createLibrary(config, options)
}

View file

@ -2,7 +2,8 @@
HabitRPG
<Header:>
<app:alert>
<body>
<ui:connectionAlert>
<taskList: nonvoid>
<div class="{{{type}}}s">