diff --git a/package.json b/package.json index 7a9c4f8..21ca34b 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "react-tween-state": "0.0.4", "socket.io-client": "1.3.3", "superagent": "1.1.0", - "utf8": "2.1.0" + "utf8": "2.1.0", + "nuka-carousel": "0.0.12" }, "devDependencies": { "babel-eslint": "2.0.2", diff --git a/src/scripts/components/board-preview.js b/src/scripts/components/board-preview.js index f97dce7..0e3c720 100644 --- a/src/scripts/components/board-preview.js +++ b/src/scripts/components/board-preview.js @@ -50,7 +50,7 @@ export default React.createClass({ showDialog(dialog) { if(!this.props.board.id.startsWith('dirty_')) { - this.setState({[`show${dialog}`]: !this.state[`show${dialog}`]}); + this.setState({ [`show${dialog}`]: !this.state[`show${dialog}`] }); } }, diff --git a/src/scripts/components/dialog/edit-board.js b/src/scripts/components/dialog/edit-board.js index 89935f5..5022243 100644 --- a/src/scripts/components/dialog/edit-board.js +++ b/src/scripts/components/dialog/edit-board.js @@ -41,10 +41,9 @@ export default React.createClass({ id: this.props.board.id, name: this.state.name, background: this.state.background, - customBackground: this.state.customBackground, + customBackground: this.state.customBackground } - if (!isNaN(size.width) && !isNaN(size.height)) { if (size.width < 1 || size.height < 1) { size.width = this.props.board.size.width; @@ -121,11 +120,11 @@ export default React.createClass({
+ placeholder="Board Width" + valueLink={widthValueLink} + type="number" + max="99" + min="1" />
@@ -135,13 +134,13 @@ export default React.createClass({
+ placeholder="Board Height" + valueLink={heightValueLink} + type="number" + max="99" + min="1" />
-
+
diff --git a/src/scripts/components/dialog/index.js b/src/scripts/components/dialog/index.js index 19a073e..e6a5a23 100644 --- a/src/scripts/components/dialog/index.js +++ b/src/scripts/components/dialog/index.js @@ -6,8 +6,11 @@ import Hammer from 'hammerjs'; */ export default React.createClass({ mixins: [ React.addons.PureRenderMixin ], - + //Since this component is used for the infolayer, infoView is true while it + //is active and dictates whether a form gets rendered within the dialog + //or not. propTypes: { + infoView: React.PropTypes.bool, className: React.PropTypes.string, onDismiss: React.PropTypes.func }, @@ -15,6 +18,7 @@ export default React.createClass({ getDefaultProps() { return { className: '', + infoView: false, onDismiss: () => {} } }, @@ -58,12 +62,20 @@ export default React.createClass({ }, renderDialog() { + let form = !this.props.infoView ? +
+ {this.props.children} +
: +
+ {this.props.children} +
+ ; + return (
-
- {this.props.children} -
+ {form}
); } diff --git a/src/scripts/components/dialog/text-box.js b/src/scripts/components/dialog/text-box.js new file mode 100644 index 0000000..9a590f3 --- /dev/null +++ b/src/scripts/components/dialog/text-box.js @@ -0,0 +1,51 @@ +import React from 'react'; + +/** + * + */ +// This is the textbox used in the infolayer. +const SingleBox = React.createClass({ + propTypes: { + content: React.PropTypes.string, + className: React.PropTypes.string + }, + + getDefaultProps() { + return { + content: 'Content', + className: '' + } + }, + + render() { + return ( +
+

{this.props.content}

+
+ ); + } +}); + +// The objects other than textboxes to be shown in the infolayer and +// the instances of SingleBoxes are passed here as props and mapped +export default React.createClass({ + propTypes: { + items: React.PropTypes.array, + objects: React.PropTypes.array + }, + + getDefaultProps() { + return { items: [ ], objects: [ ] } + }, + + render() { + return ( +
+ {this.props.objects} + {this.props.items.map((item, index) => { + return ; + })} +
+ ); + } +}); diff --git a/src/scripts/components/dialog/view-info.js b/src/scripts/components/dialog/view-info.js new file mode 100644 index 0000000..9c6118d --- /dev/null +++ b/src/scripts/components/dialog/view-info.js @@ -0,0 +1,111 @@ +import React from 'react/addons'; +import Carousel from 'nuka-carousel'; +import Dialog from '../../components/dialog'; +import TextBoxes from './text-box'; +import Dropdown from '../dropdown'; + +/** + * + */ + +export default React.createClass({ + mixins: [ Carousel.ControllerMixin ], + getInitialState(){ + return { currentSlide: null } + }, + + componentDidMount() { + this.el = document.getElementById('application'); + this.el.className = 'info-view-active'; + this.avatar = document.getElementById('avatar'); + }, + + componentWillUnmount() { + this.el.className = ''; + }, + + componentDidUpdate(){ + this.el.className = + `info-view-active slide-${this.state.carousels.carousel.state.currentSlide}`; + }, + + render() { + let dropitems = [ + { icon: 'user', content: 'Profile' }, + { icon: 'language', content: 'Localization' }, + { icon: 'bullhorn', content: 'Feedback' }, + { icon: 'sign-out', content: 'Logout' } + ]; + + /* + Second layer arrays represent the slides. First one of the + third layer arrays contain anything other than textbox-components + while the second ones contain the textboxes' props. + */ + let objects = [ + [ + [ ], + [ + { content: 'Return to workspace', className: 'pos-back' }, + { content: 'Edit board', className:'pos-edit' }, + { content: 'Share board', className:'pos-share' }, + { content: 'Export board', className:'pos-export' }, + { content: 'Make tickets snap to grid', className:'pos-magnet' }, + { content: 'Toggle board overview and navigate', className:'pos-minimap' }, + { content: 'Edit your profile', className:'pos-profile' }, + { content: 'Change operating language', className:'pos-localization' }, + { content: 'Send feedback to developers', className:'pos-feedback' }, + { content: 'Logout', className:'pos-logout' } + ] + ], + [ + [ , + ], + [ + { content: 'Double tap board to create a ticket.', className: 'pos-click' }, + { content: 'Double tap a ticket to edit it.', className:'pos-ticket' }, + { content: 'Select a color for your ticket.', className:'pos-color' }, + { content: 'Edit the contents of a ticket.', className:'pos-content' } + ] + ], + [ + [ ], + [ + { content: 'Create or edit the name of this board.', className: 'pos-boardname' }, + { content: 'Board preview.', className:'pos-boardpreview' }, + { content: 'Edit the background appearance of this board.', className:'pos-boardbg' }, + { content: 'Change the size of this board.', className:'pos-boardmeasures' } + ] + ], + [ + [ ], + [ + { content: 'Hit Share to get the URL of this board for sharing.', className: 'pos-format' } + ] + ], + [ + [ ], + [ + { content: 'Select an export format and hit Export to download the file.', className: 'pos-format' } + ] + ] + ]; + + return ( + + + + {objects.map((item) => { + return ( +
+ +
+ ); + })} + + + ); + } +}); diff --git a/src/scripts/components/dropdown.js b/src/scripts/components/dropdown.js index 8ec2f73..ede1172 100644 --- a/src/scripts/components/dropdown.js +++ b/src/scripts/components/dropdown.js @@ -38,7 +38,8 @@ const DropdownItem = React.createClass({ export default React.createClass({ propTypes: { show: React.PropTypes.bool.isRequired, - items: React.PropTypes.array + items: React.PropTypes.array, + className: React.PropTypes.string }, getDefaultProps() { @@ -53,7 +54,7 @@ export default React.createClass({ render() { return !this.props.show ? null : ( -