Fix up modal form look and feel.
This commit is contained in:
parent
5775823b69
commit
17a00bc796
|
|
@ -46503,6 +46503,36 @@ module.exports = JournalEntryActions;
|
|||
|
||||
},{"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.
|
||||
|
||||
|
|
@ -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.
|
||||
|
|
@ -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.
|
||||
|
|
@ -46679,7 +46709,7 @@ module.exports = ThemeManager;
|
|||
|
||||
|
||||
|
||||
},{}],298:[function(require,module,exports){
|
||||
},{}],299:[function(require,module,exports){
|
||||
|
||||
/*
|
||||
Rookeries client - Modal user login.
|
||||
|
|
@ -46689,16 +46719,20 @@ Rookeries client - Modal user login.
|
|||
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
|
||||
*/
|
||||
'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');
|
||||
|
||||
Alert = require('react-bootstrap').Alert;
|
||||
|
||||
Button = require('react-bootstrap').Button;
|
||||
|
||||
Panel = require('react-bootstrap').Panel;
|
||||
Input = require('react-bootstrap').Input;
|
||||
|
||||
Modal = require('react-bootstrap').Modal;
|
||||
|
||||
Panel = require('react-bootstrap').Panel;
|
||||
|
||||
ModalTrigger = require('react-bootstrap').ModalTrigger;
|
||||
|
||||
FontAwesome = require('react-fontawesome');
|
||||
|
|
@ -46710,57 +46744,51 @@ UserLoginModal = React.createClass({
|
|||
"title": 'Login',
|
||||
"animation": false
|
||||
}), React.createElement("div", {
|
||||
"class": "modal-body"
|
||||
}, React.createElement("div", {
|
||||
"class": "error_message"
|
||||
}, this.props.error_message), React.createElement("div", {
|
||||
"class": "row"
|
||||
}, React.createElement("label", {
|
||||
"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",
|
||||
"className": "modal-body"
|
||||
}, React.createElement(Alert, {
|
||||
"bsStyle": 'danger'
|
||||
}, this.props.error_message), React.createElement("form", {
|
||||
"className": "form-horizontal"
|
||||
}, React.createElement(Input, {
|
||||
"type": "text",
|
||||
"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", {
|
||||
"class": "row"
|
||||
}, 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"
|
||||
"className": "modal-footer"
|
||||
}, React.createElement(Button, {
|
||||
"bsStyle": "warning"
|
||||
"bsStyle": "warning",
|
||||
"onClick": this.props.onRequestHide
|
||||
}, "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, {
|
||||
"error_message": 'Just a test'
|
||||
})
|
||||
}), React.createElement("div", {
|
||||
"class": "text-center muted hoverable"
|
||||
"className": "text-center muted hoverable"
|
||||
}, React.createElement(FontAwesome, {
|
||||
"name": 'user'
|
||||
}), "\u00a0\nHello [user_login.username]!\n\u2002", React.createElement(FontAwesome, {
|
||||
"name": 'sign-in'
|
||||
}), "\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
|
||||
|
|
@ -46770,41 +46798,28 @@ Rookeries client app
|
|||
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
|
||||
*/
|
||||
'use strict';
|
||||
var App, JournalMarkdownView, React, Route, Router, app_routes;
|
||||
var AppRoutes, JournalMarkdownView, React, Router, UserLoginModalTrigger;
|
||||
|
||||
React = require('react');
|
||||
|
||||
Router = require('react-router');
|
||||
|
||||
AppRoutes = require('./routes.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');
|
||||
|
||||
Router = require('react-router');
|
||||
|
||||
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) {
|
||||
Router.run(AppRoutes, Router.HashLocation, (function(_this) {
|
||||
return function(Root) {
|
||||
return React.render(React.createElement(Root, null), document.getElementById("markdown-target"));
|
||||
};
|
||||
})(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]);
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ Rookeries client app
|
|||
'use strict'
|
||||
|
||||
React = require('react')
|
||||
|
||||
JournalMarkdownView = require('./views/journal_markdown_viewer.cjsx')
|
||||
require('./views/user_login_modal.cjsx')
|
||||
require('./views/theme_switcher.cjsx')
|
||||
Router = require('react-router')
|
||||
|
||||
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) =>
|
||||
React.render(<Root />, document.getElementById("markdown-target"))
|
||||
)
|
||||
React.render(UserLoginModalTrigger, document.getElementById('user-login-trigger'))
|
||||
|
|
|
|||
|
|
@ -9,10 +9,14 @@ Rookeries client - Modal user login.
|
|||
'use strict'
|
||||
|
||||
React = require('react')
|
||||
|
||||
Alert = require('react-bootstrap').Alert
|
||||
Button = require('react-bootstrap').Button
|
||||
Panel = require('react-bootstrap').Panel
|
||||
Input = require('react-bootstrap').Input
|
||||
Modal = require('react-bootstrap').Modal
|
||||
Panel = require('react-bootstrap').Panel
|
||||
ModalTrigger = require('react-bootstrap').ModalTrigger
|
||||
|
||||
FontAwesome = require('react-fontawesome')
|
||||
|
||||
UserLoginModal = React.createClass(
|
||||
|
|
@ -22,24 +26,16 @@ UserLoginModal = React.createClass(
|
|||
|
||||
<Modal {...@props} title='Login' animation={false}>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="error_message">{ @props.error_message }</div>
|
||||
<div class="row">
|
||||
<label class="control-label col-lg-offset-1 col-lg-2" for="username">Username</label>
|
||||
<div class="col-lg-8">
|
||||
<input class="form-control" type="text" id="username" placeholder="Username" />
|
||||
</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 className="modal-body">
|
||||
<Alert bsStyle='danger'>{ @props.error_message }</Alert>
|
||||
<form className="form-horizontal">
|
||||
<Input type="text" id="username" placeholder="Username" label="Username" labelClassName="col-xs-2" wrapperClassName="col-xs-10" />
|
||||
<Input type="text" id="password" placeholder="***" label="Password" labelClassName="col-xs-2" wrapperClassName="col-xs-10" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<Button bsStyle="warning">Cancel</Button>
|
||||
<div className="modal-footer">
|
||||
<Button bsStyle="warning" onClick={this.props.onRequestHide}>Cancel</Button>
|
||||
<Button>Login</Button>
|
||||
</div>
|
||||
|
||||
|
|
@ -49,9 +45,9 @@ UserLoginModal = React.createClass(
|
|||
|
||||
|
||||
# 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' />} >
|
||||
<div class="text-center muted hoverable">
|
||||
<div className="text-center muted hoverable">
|
||||
<FontAwesome name='user' />
|
||||
|
||||
Hello [user_login.username]!
|
||||
|
|
@ -63,4 +59,4 @@ overlayTriggerInstance = (
|
|||
</ModalTrigger>
|
||||
)
|
||||
|
||||
module.exports = overlayTriggerInstance
|
||||
module.exports = UserLoginModalTrigger
|
||||
|
|
|
|||
Loading…
Reference in New Issue