diff --git a/src/js/app/index.js b/src/js/app/index.js index ff1ba727..cb4bd5f1 100644 --- a/src/js/app/index.js +++ b/src/js/app/index.js @@ -1,10 +1,12 @@ var _ = require('underscore'); var Backbone = require('backbone'); +var React = require('react'); var util = require('../util'); var intl = require('../intl'); var LocaleStore = require('../stores/LocaleStore'); var LocaleActions = require('../actions/LocaleActions'); +var Dialog = require('../react_views/TestView.jsx').Dialog; /** * Globals @@ -214,6 +216,12 @@ var initDemo = function(sandbox) { "levels" ]; } + if (params.hasOwnProperty('STARTREACT')) { + React.render( + React.createElement(Dialog, {}), + document.getElementById(params['STARTREACT']) + ); + } if (commands) { sandbox.mainVis.customEvents.on('gitEngineReady', function() { eventBaton.trigger('commandSubmitted', commands.join('')); diff --git a/src/js/react_views/TestView.jsx b/src/js/react_views/TestView.jsx index 8a230ed0..89593fc0 100644 --- a/src/js/react_views/TestView.jsx +++ b/src/js/react_views/TestView.jsx @@ -1,11 +1,71 @@ var React = require('react'); -var MyComponent = React.createClass({ +var reactUtil = require('../util/reactUtil'); +var keyMirror = require('react/lib/keyMirror'); + +var STATUSES = keyMirror({ + IN_QUEUE: null, + PROCESSING: null, + FINISHED: null +}); + +var STATUS_TO_CLASS = {}; +STATUS_TO_CLASS[STATUSES.IN_QUEUE] = 'inqueue'; +STATUS_TO_CLASS[STATUSES.PROCESSING] = 'processing'; +STATUS_TO_CLASS[STATUSES.FINISHED] = 'finished'; + +var CommandView = React.createClass({ + + getInitialState: function() { + return { + status: STATUSES.IN_QUEUE, + rawStr: 'git commit', + resultType: '', + result: '', + formattedWarnings: '' + }; + }, + render: function() { + var commandClass = reactUtil.joinClasses([ + STATUS_TO_CLASS[this.state.status], + 'commandLine', + 'transitionBackground' + ]); + + // TODO add 0px 5px margin to icons + return ( -

Howdy

+
+

+ {'$'} + {' ' + this.state.rawStr} + + + + + + +

+ +
+ {this.state.result} +
+ +
+ {this.state.formattedWarnings} +
+
); } }); -module.exports = MyComponent; +var Dialog = React.createClass({ + render: function() { + return ( + + ); + } +}); + +exports.Dialog = Dialog; diff --git a/src/js/util/reactUtil.js b/src/js/util/reactUtil.js new file mode 100644 index 00000000..1d58a100 --- /dev/null +++ b/src/js/util/reactUtil.js @@ -0,0 +1,5 @@ +var joinClasses = function(classes) { + return classes.join(' '); +}; + +exports.joinClasses = joinClasses; diff --git a/src/style/main.css b/src/style/main.css index bb636711..90205df0 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -443,6 +443,10 @@ div.controls div.box.flex1 div.plus { /* Command Line */ +div.reactCommandView p.commandLine i { + margin: 0 5px; +} + p.commandLine, div.commandLineResult { opacity: 1; @@ -482,6 +486,12 @@ p.commandLine span.icons i:first-child { margin-left: 5px; } +div.reactCommandView p.commandLine span.icons i:first-child { + margin-left: 4px; + position: relative; + left: 1px; +} + p.commandLine span.icons i { opacity: 0; } diff --git a/src/template.index.html b/src/template.index.html index 7d5902be..92351dbc 100644 --- a/src/template.index.html +++ b/src/template.index.html @@ -473,6 +473,8 @@ +
+