rookeries
/
rookeries
1
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity

Fix up modal form look and feel.

This commit is contained in:
Dorian 2015-06-17 17:53:59 -04:00
parent 5775823b69
commit 17a00bc796
3 changed files with 105 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
dist/rookeries.js vendored
View File

@ -46503,6 +46503,36 @@ module.exports = JournalEntryActions;
},{"reflux":271}],295:[function(require,module,exports){ },{"reflux":271}],295:[function(require,module,exports){
/*
Rookeries client app - Route setup
@copyright (c) Copyright 2013-2015 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/
'use strict';
var AppRoutes, JournalMarkdownView, React, Router;
React = require('react');
Router = require('react-router');
JournalMarkdownView = require('./views/journal_markdown_viewer.cjsx');
AppRoutes = React.createElement(Router.Route, {
"handler": JournalMarkdownView
}, React.createElement(Router.Route, {
"name": 'pageFetch',
"path": 'doc/:id',
"handler": JournalMarkdownView
}));
module.exports = AppRoutes;
},{"./views/journal_markdown_viewer.cjsx":297,"react":270,"react-router":101}],296:[function(require,module,exports){
/* /*
Rookeries client - Journal entry store. Rookeries client - Journal entry store.
@ -46544,7 +46574,7 @@ module.exports = JournalEntryStore;
},{"../actions/journal_actions.coffee":294,"reflux":271,"superagent":291}],296:[function(require,module,exports){ },{"../actions/journal_actions.coffee":294,"reflux":271,"superagent":291}],297:[function(require,module,exports){
/* /*
Rookeries client - Markdown controller to view a journal entry. Rookeries client - Markdown controller to view a journal entry.
@ -46620,7 +46650,7 @@ module.exports = JournalMarkdownView;
},{"../actions/journal_actions.coffee":294,"../stores/journal_entry_store.coffee":295,"marked":2,"react":270,"react-router":101,"reflux":271}],297:[function(require,module,exports){ },{"../actions/journal_actions.coffee":294,"../stores/journal_entry_store.coffee":296,"marked":2,"react":270,"react-router":101,"reflux":271}],298:[function(require,module,exports){
/* /*
Rookeries client - Theme switcher. Rookeries client - Theme switcher.
@ -46679,7 +46709,7 @@ module.exports = ThemeManager;
},{}],298:[function(require,module,exports){ },{}],299:[function(require,module,exports){
/* /*
Rookeries client - Modal user login. Rookeries client - Modal user login.
@ -46689,16 +46719,20 @@ Rookeries client - Modal user login.
@author Dorian Pula [dorian.pula@amber-penguin-software.ca] @author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/ */
'use strict'; 'use strict';
var Button, FontAwesome, Modal, ModalTrigger, Panel, React, UserLoginModal, overlayTriggerInstance; var Alert, Button, FontAwesome, Input, Modal, ModalTrigger, Panel, React, UserLoginModal, UserLoginModalTrigger;
React = require('react'); React = require('react');
Alert = require('react-bootstrap').Alert;
Button = require('react-bootstrap').Button; Button = require('react-bootstrap').Button;
Panel = require('react-bootstrap').Panel; Input = require('react-bootstrap').Input;
Modal = require('react-bootstrap').Modal; Modal = require('react-bootstrap').Modal;
Panel = require('react-bootstrap').Panel;
ModalTrigger = require('react-bootstrap').ModalTrigger; ModalTrigger = require('react-bootstrap').ModalTrigger;
FontAwesome = require('react-fontawesome'); FontAwesome = require('react-fontawesome');
@ -46710,57 +46744,51 @@ UserLoginModal = React.createClass({
"title": 'Login', "title": 'Login',
"animation": false "animation": false
}), React.createElement("div", { }), React.createElement("div", {
"class": "modal-body" "className": "modal-body"
}, React.createElement("div", { }, React.createElement(Alert, {
"class": "error_message" "bsStyle": 'danger'
}, this.props.error_message), React.createElement("div", { }, this.props.error_message), React.createElement("form", {
"class": "row" "className": "form-horizontal"
}, React.createElement("label", { }, React.createElement(Input, {
"class": "control-label col-lg-offset-1 col-lg-2",
"for": "username"
}, "Username"), React.createElement("div", {
"class": "col-lg-8"
}, React.createElement("input", {
"class": "form-control",
"type": "text", "type": "text",
"id": "username", "id": "username",
"placeholder": "Username" "placeholder": "Username",
"label": "Username",
"labelClassName": "col-xs-2",
"wrapperClassName": "col-xs-10"
}), React.createElement(Input, {
"type": "text",
"id": "password",
"placeholder": "***",
"label": "Password",
"labelClassName": "col-xs-2",
"wrapperClassName": "col-xs-10"
}))), React.createElement("div", { }))), React.createElement("div", {
"class": "row" "className": "modal-footer"
}, React.createElement("label", {
"class": "control-label col-lg-2",
"for": "password"
}, "Password"), React.createElement("div", {
"class": "col-lg-8"
}, React.createElement("input", {
"class": "form-control",
"type": "password",
"id": "password"
})))), React.createElement("div", {
"class": "modal-footer"
}, React.createElement(Button, { }, React.createElement(Button, {
"bsStyle": "warning" "bsStyle": "warning",
"onClick": this.props.onRequestHide
}, "Cancel"), React.createElement(Button, null, "Login"))); }, "Cancel"), React.createElement(Button, null, "Login")));
} }
}); });
overlayTriggerInstance = React.createElement(ModalTrigger, React.__spread({}, this.props, { UserLoginModalTrigger = React.createElement(ModalTrigger, React.__spread({}, this.props, {
"modal": React.createElement(UserLoginModal, { "modal": React.createElement(UserLoginModal, {
"error_message": 'Just a test' "error_message": 'Just a test'
}) })
}), React.createElement("div", { }), React.createElement("div", {
"class": "text-center muted hoverable" "className": "text-center muted hoverable"
}, React.createElement(FontAwesome, { }, React.createElement(FontAwesome, {
"name": 'user' "name": 'user'
}), "\u00a0\nHello [user_login.username]!\n\u2002", React.createElement(FontAwesome, { }), "\u00a0\nHello [user_login.username]!\n\u2002", React.createElement(FontAwesome, {
"name": 'sign-in' "name": 'sign-in'
}), "\u00a0\nDo you want to [user_login.login_suggestion]?")); }), "\u00a0\nDo you want to [user_login.login_suggestion]?"));
module.exports = overlayTriggerInstance; module.exports = UserLoginModalTrigger;
},{"react":270,"react-bootstrap":61,"react-fontawesome":75}],299:[function(require,module,exports){ },{"react":270,"react-bootstrap":61,"react-fontawesome":75}],300:[function(require,module,exports){
/* /*
Rookeries client app Rookeries client app
@ -46770,41 +46798,28 @@ Rookeries client app
@author Dorian Pula [dorian.pula@amber-penguin-software.ca] @author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/ */
'use strict'; 'use strict';
var App, JournalMarkdownView, React, Route, Router, app_routes; var AppRoutes, JournalMarkdownView, React, Router, UserLoginModalTrigger;
React = require('react'); React = require('react');
Router = require('react-router');
AppRoutes = require('./routes.cjsx');
JournalMarkdownView = require('./views/journal_markdown_viewer.cjsx'); JournalMarkdownView = require('./views/journal_markdown_viewer.cjsx');
require('./views/user_login_modal.cjsx'); UserLoginModalTrigger = require('./views/user_login_modal.cjsx');
require('./views/theme_switcher.cjsx'); require('./views/theme_switcher.cjsx');
Router = require('react-router'); Router.run(AppRoutes, Router.HashLocation, (function(_this) {
Route = Router.Route;
app_routes = React.createElement(Route, {
"handler": App
}, React.createElement(Route, {
"name": 'pageFetch',
"path": 'doc/:id',
"handler": JournalMarkdownView
}));
App = React.createClass({
render: function() {
console.log('Render Route handler.');
return (React.createElement("h1", null, "App"), React.createElement(RouteHandler, null));
}
});
Router.run(app_routes, Router.HashLocation, (function(_this) {
return function(Root) { return function(Root) {
return React.render(React.createElement(Root, null), document.getElementById("markdown-target")); return React.render(React.createElement(Root, null), document.getElementById("markdown-target"));
}; };
})(this)); })(this));
React.render(UserLoginModalTrigger, document.getElementById('user-login-trigger'));
},{"./views/journal_markdown_viewer.cjsx":296,"./views/theme_switcher.cjsx":297,"./views/user_login_modal.cjsx":298,"react":270,"react-router":101}]},{},[299]);
},{"./routes.cjsx":295,"./views/journal_markdown_viewer.cjsx":297,"./views/theme_switcher.cjsx":298,"./views/user_login_modal.cjsx":299,"react":270,"react-router":101}]},{},[300]);

10
rookeries/app.cjsx
View File

@ -9,14 +9,14 @@ Rookeries client app
'use strict' 'use strict'
React = require('react') React = require('react')
Router = require('react-router')
JournalMarkdownView = require('./views/journal_markdown_viewer.cjsx')
require('./views/user_login_modal.cjsx')
require('./views/theme_switcher.cjsx')
AppRoutes = require('./routes.cjsx') AppRoutes = require('./routes.cjsx')
Router = require('react-router') JournalMarkdownView = require('./views/journal_markdown_viewer.cjsx')
UserLoginModalTrigger = require('./views/user_login_modal.cjsx')
require('./views/theme_switcher.cjsx')
Router.run(AppRoutes, Router.HashLocation, (Root) => Router.run(AppRoutes, Router.HashLocation, (Root) =>
React.render(<Root />, document.getElementById("markdown-target")) React.render(<Root />, document.getElementById("markdown-target"))
) )
React.render(UserLoginModalTrigger, document.getElementById('user-login-trigger'))

58
rookeries/views/user_login_modal.cjsx
View File

@ -9,49 +9,45 @@ Rookeries client - Modal user login.
'use strict' 'use strict'
React = require('react') React = require('react')
Alert = require('react-bootstrap').Alert
Button = require('react-bootstrap').Button Button = require('react-bootstrap').Button
Panel = require('react-bootstrap').Panel Input = require('react-bootstrap').Input
Modal = require('react-bootstrap').Modal Modal = require('react-bootstrap').Modal
Panel = require('react-bootstrap').Panel
ModalTrigger = require('react-bootstrap').ModalTrigger ModalTrigger = require('react-bootstrap').ModalTrigger
FontAwesome = require('react-fontawesome') FontAwesome = require('react-fontawesome')
UserLoginModal = React.createClass( UserLoginModal = React.createClass(
render: () -> render: () ->
console.log('Render UserLoginModal view.') console.log('Render UserLoginModal view.')
return( return(
<Modal {...@props} title='Login' animation={false}> <Modal {...@props} title='Login' animation={false}>
<div class="modal-body"> <div className="modal-body">
<div class="error_message">{ @props.error_message }</div> <Alert bsStyle='danger'>{ @props.error_message }</Alert>
<div class="row"> <form className="form-horizontal">
<label class="control-label col-lg-offset-1 col-lg-2" for="username">Username</label> <Input type="text" id="username" placeholder="Username" label="Username" labelClassName="col-xs-2" wrapperClassName="col-xs-10" />
<div class="col-lg-8"> <Input type="text" id="password" placeholder="***" label="Password" labelClassName="col-xs-2" wrapperClassName="col-xs-10" />
<input class="form-control" type="text" id="username" placeholder="Username" /> </form>
</div> </div>
</div>
<div class="row">
<label class="control-label col-lg-2" for="password">Password</label>
<div class="col-lg-8">
<input class="form-control" type="password" id="password" />
</div>
</div>
</div>
<div class="modal-footer"> <div className="modal-footer">
<Button bsStyle="warning">Cancel</Button> <Button bsStyle="warning" onClick={this.props.onRequestHide}>Cancel</Button>
<Button>Login</Button> <Button>Login</Button>
</div> </div>
</Modal> </Modal>
) )
) )
# TODO Add in switch font colours on theme switch: {@props.theme_switcher.icon_colour} # TODO Add in switch font colours on theme switch: {@props.theme_switcher.icon_colour}
overlayTriggerInstance = ( UserLoginModalTrigger = (
<ModalTrigger {...@props} modal={<UserLoginModal error_message='Just a test' />} > <ModalTrigger {...@props} modal={<UserLoginModal error_message='Just a test' />} >
<div class="text-center muted hoverable"> <div className="text-center muted hoverable">
<FontAwesome name='user' /> <FontAwesome name='user' />
&nbsp; &nbsp;
Hello [user_login.username]! Hello [user_login.username]!
@ -60,7 +56,7 @@ overlayTriggerInstance = (
&nbsp; &nbsp;
Do you want to [user_login.login_suggestion]? Do you want to [user_login.login_suggestion]?
</div> </div>
</ModalTrigger> </ModalTrigger>
) )
module.exports = overlayTriggerInstance module.exports = UserLoginModalTrigger