Merge pull request aframevr#173 from fernandojsg/transformsToolbar

Add transforms toolbar and make panel titles much smaller

Author: fernandojsg

package.json

@@ -24,6 +24,7 @@
     "babel-plugin-transform-class-properties": "^6.10.2",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
+    "classnames": "^2.2.5",
     "css-loader": "^0.23.1",
     "eslint": "^2.9.x",
     "eslint-config-standard": "^5.3.1",

src/components/Main.js

@@ -7,6 +7,7 @@ import AttributesSidebar from './attributes/AttributesSidebar';
 import {MenuWidget} from './menu/Menu';
 import ModalTextures from './modals/ModalTextures';
 import SceneGraph from './SceneGraph';
+import ToolBar from './ToolBar';
 
 import "../css/main.css";
 import "../css/dark.css";
@@ -76,9 +77,10 @@ export default class Main extends React.Component {
       <div>
         <div id="editor" className={this.state.editorEnabled ? '' : 'hidden'}>
           <ModalTextures ref="modaltextures" isOpen={textureDialogOpened} onClose={this.onModalTextureOnClose}/>
+          <ToolBar/>
           <MenuWidget/>
           <div id="sidebar-left">
-            <div className="tab">SCENEGRAPH</div>
+            <div className="sidebar-title">scenegraph</div>
             <SceneGraph scene={scene}/>
           </div>
           <AttributesSidebar/>

src/components/ToolBar.js

@@ -0,0 +1,58 @@
+var React = require('react');
+var Events = require('../lib/Events.js');
+var classNames = require('classnames');
+
+var TransformButtons = [
+  {value: 'translate', icon: 'fa-arrows'},
+  {value: 'rotate', icon: 'fa-repeat'},
+  {value: 'scale', icon: 'fa-expand'}
+];
+
+export default class ToolBar extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {selectedTransform: 'translate', localSpace: false};
+  }
+
+  changeTransformMode = mode => {
+    this.setState({selectedTransform: mode});
+    Events.emit('transformModeChanged', mode);
+  }
+
+  onLocalChange = e => {
+    var local = e.target.checked;
+    this.setState({localSpace: local});
+    Events.emit('spaceChanged', local ? 'local' : 'world');
+  }
+
+  renderTransformButtons = () => {
+    return TransformButtons.map(function (option) {
+      var selected = option.value === this.state.selectedTransform;
+      var classes = classNames({
+        button: true,
+        fa: true,
+        [option.icon]: true,
+        active: selected
+      });
+
+      return <a href='#' title={option.value}
+        onClick={this.changeTransformMode.bind(this, option.value)}
+        className={classes}></a>;
+    }.bind(this));
+  }
+
+  render () {
+    return (
+      <div className='toolbar'>
+        {this.renderTransformButtons()}
+        <span className='local-transform'>
+          <input id='local' type='checkbox'
+            checked={this.state.localSpace || this.state.selectedTransform === 'scale'}
+            disabled={this.state.selectedTransform === 'scale'}
+            onChange={this.onLocalChange}/>
+          <label htmlFor='local'>local</label>
+        </span>
+      </div>
+    );
+  }
+}

src/components/attributes/AttributesSidebar.js

@@ -15,14 +15,7 @@ export default class AttributesSidebar extends React.Component {
   render() {
     return (
       <div id="sidebar">
-        <div className="tab collapsible">
-          <span>ATTRIBUTES</span>
-          <div className="dropdown menu hide">
-            <div className="dropdown-content">
-              <a href="#" onClick={this.deleteComponent}>Collapse all</a>
-            </div>
-          </div>
-        </div>
+        <div className="sidebar-title">attributes</div>
         <AttributesPanel/>
       </div>
     );

src/css/dark.css

@@ -235,29 +235,6 @@ input.number:focus {
     background-color: #111;
   }
 
-#toolbar {
-  position: absolute;
-  left: 0;
-  right: 330px;
-  bottom: 0;
-  height: 32px;
-  background-color: #111;
-  color: #333;
-}
-
-  #toolbar * {
-    vertical-align: middle;
-  }
-
-  #toolbar .Panel {
-    padding: 4px;
-    color: #888;
-  }
-
-  #toolbar button {
-    margin-right: 6px;
-  }
-
 .aframe-logo {
   background-color: #424242;
   margin-right: 10px;
@@ -768,6 +745,58 @@ code, pre {
   font-weight: 500;
 }
 
+.sidebar-title {
+  color: #1faaf2;
+  text-align: center;
+  background-color: #323232;
+  padding: 2px;
+  border-top: 2px solid #1faaf2;
+  font-size: 10px;
+}
+
+.toolbar {
+  position: absolute;
+  right: 330px;
+  top: 34px;
+  height: 32px;
+  background-color: #262626;
+  color: #333;
+}
+
+.toolbar * {
+  vertical-align: middle;
+  padding: 8px;
+  margin-left: 0px;
+  /*margin-top: 7px;*/
+}
+
+
+.toolbar a.button {
+  margin: 0 6px 0 0;
+}
+
+.toolbar .active {
+  background-color: #1faaf2;
+  color: #fff;
+}
+
+.toolbar .active:hover {
+  color: #fff !important;
+}
+
+.local-transform {
+  padding-left: 10px;
+}
+
+.local-transform label {
+  color: #AAA;
+  padding-left: 5px;
+}
+
+.local-transform a.button {
+  padding-top: 0px;
+}
+
 .outliner {
   color: #868686;
   background: #2b2b2b;