move some styling into react

Author: Bjvanminnen

apps/src/applab/ApplabVisualizationColumn.jsx

@@ -1,25 +1,48 @@
+var Radium = require('radium');
 var Visualization = require('./Visualization');
 var GameButtons = require('../templates/GameButtons');
 var CompletionButton = require('./CompletionButton');
 var PlaySpaceHeader = require('./PlaySpaceHeader');
 var BelowVisualization = require('../templates/BelowVisualization');
+var ProtectedStatefulDiv = require('../templates/ProtectedStatefulDiv');
+var commonStyles = require('../commonStyles');
+var applabConstants = require('./constants');
 var connect = require('react-redux').connect;
 
+
+var styles = {
+  nonResponsive: {
+    maxWidth: applabConstants.APP_WIDTH,
+  }
+};
+
 /**
  * Equivalent of visualizationColumn.html.ejs. Initially only supporting
  * portions used by App Lab
  */
 var ApplabVisualizationColumn = React.createClass({
   propTypes: {
     isReadOnlyWorkspace: React.PropTypes.bool.isRequired,
+    hideSource: React.PropTypes.bool.isRequired,
+    isEmbedView: React.PropTypes.bool.isRequired,
+
     isEditingProject: React.PropTypes.bool.isRequired,
     screenIds: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
     onScreenCreate: React.PropTypes.func.isRequired,
   },
 
   render: function () {
+    var classes = '';
+    if (this.props.visualizationHasPadding) {
+      classes += 'with_padding';
+    }
+
+    var vizColStyle = [
+      (this.props.isEmbedView || this.props.hideSource) && styles.nonResponsive
+    ];
+
     return (
-      <div id="visualizationColumn">
+      <div id="visualizationColumn" className={classes} style={vizColStyle}>
         {!this.props.isReadOnlyWorkspace && <PlaySpaceHeader
             isEditingProject={this.props.isEditingProject}
             screenIds={this.props.screenIds}
@@ -33,10 +56,12 @@ var ApplabVisualizationColumn = React.createClass({
       </div>
     );
   }
-})
-;
+});
 module.exports = connect(function propsFromStore(state) {
   return {
     isReadOnlyWorkspace: state.level.isReadOnlyWorkspace,
+    visualizationHasPadding: state.level.visualizationHasPadding,
+    hideSource: state.level.hideSource,
+    isEmbedView: state.level.isEmbedView
   };
-})(ApplabVisualizationColumn);
+})(Radium(ApplabVisualizationColumn));

apps/src/applab/Visualization.jsx

@@ -1,14 +1,45 @@
+var Radium = require('radium');
 var applabConstants = require('./constants');
 var commonStyles = require('../commonStyles');
 var ProtectedStatefulDiv = require('../templates/ProtectedStatefulDiv');
+var connect = require('react-redux').connect;
+
+var styles = {
+  nonResponsive: {
+    width: applabConstants.APP_WIDTH,
+    height: applabConstants.APP_HEIGHT - applabConstants.FOOTER_HEIGHT
+  },
+  share: {
+    // overrides nonReponsive
+    height: applabConstants.APP_HEIGHT
+  }
+};
+
 
 var Visualization = React.createClass({
+  propTypes: {
+    visualizationHasPadding: React.PropTypes.bool.isRequired,
+    hideSource: React.PropTypes.bool.isRequired,
+    isEmbedView: React.PropTypes.bool.isRequired,
+  },
+
   render: function () {
     var appWidth = applabConstants.APP_WIDTH;
     var appHeight = applabConstants.APP_HEIGHT - applabConstants.FOOTER_HEIGHT;
+
+    var classes = '';
+    if (this.props.visualizationHasPadding) {
+      classes += 'with_padding';
+    }
+
+    var vizStyle = [
+      (this.props.isEmbedView || this.props.hideSource) && styles.nonResponsive,
+      this.props.isShareView && styles.share
+    ];
+
     return (
       <ProtectedStatefulDiv>
-        <div id="visualization">
+        <div id="visualization" className={classes} style={vizStyle}>
           <div id="divApplab" className="appModern" tabIndex="1"/>
           <div id="designModeViz" className="appModern" style={commonStyles.hidden}/>
           <svg version="1.1"
@@ -25,4 +56,10 @@ var Visualization = React.createClass({
   }
 });
 
-module.exports = Visualization;
+module.exports = connect(function propsFromStore(state) {
+  return {
+    visualizationHasPadding: state.level.visualizationHasPadding,
+    hideSource: state.level.hideSource,
+    isEmbedView: state.level.isEmbedView
+  };
+})(Radium(Visualization));

apps/src/applab/applab.js

@@ -787,22 +787,6 @@ Applab.init = function (config) {
   var onMount = function () {
     studioApp.init(config);
 
-    var viz = document.getElementById('visualization');
-    var vizCol = document.getElementById('visualizationColumn');
-
-    if (!config.noPadding) {
-      viz.className += " with_padding";
-      vizCol.className += " with_padding";
-    }
-
-    if (Applab.reduxStore.getState().level.isEmbedView || config.hideSource) {
-      // no responsive styles active in embed or hideSource mode, so set sizes:
-      viz.style.width = Applab.appWidth + 'px';
-      viz.style.height = (shouldRenderFooter() ? Applab.appHeight : Applab.footerlessAppHeight) + 'px';
-      // Use offsetWidth of viz so we can include any possible border width:
-      vizCol.style.maxWidth = viz.offsetWidth + 'px';
-    }
-
     if (debuggerUi) {
       debuggerUi.initializeAfterDomCreated({
         defaultStepSpeed: config.level.sliderSpeed
@@ -876,6 +860,8 @@ Applab.init = function (config) {
   Applab.reduxStore.dispatch(setInitialLevelProps({
     assetUrl: studioApp.assetUrl,
     channelId: config.channel,
+    visualizationHasPadding: !config.noPadding,
+    hideSource: !!config.hideSource,
     isDesignModeHidden: !!config.level.hideDesignMode,
     isEmbedView: !!config.embed,
     isReadOnlyWorkspace: !!config.readonlyWorkspace,

apps/src/applab/reducers.js

@@ -36,6 +36,8 @@ function level(state, action) {
       var allowedKeys = [
         'assetUrl',
         'channelId',
+        'visualizationHasPadding',
+        'hideSource',
         'isDesignModeHidden',
         'isEmbedView',
         'isReadOnlyWorkspace',