getguesstimate · mmcdermott · May 31, 2016 · May 31, 2016 · May 31, 2016 · May 31, 2016
diff --git a/src/components/lib/FlowGrid/FlowGrid.jsx b/src/components/lib/FlowGrid/FlowGrid.jsx
@@ -124,8 +124,7 @@ export default class FlowGrid extends Component{
       } else if (e.keyCode == '67') {
         this.props.onCopy()
       } else if (e.keyCode == '88') {
-        this.props.onCopy()
-        this._handleRemoveSelectedItems()
+        this.props.onCut()
       } else if (e.keyCode == '90' && !e.shiftKey) {
         this.props.onUndo()
         e.preventDefault()

diff --git a/src/components/spaces/canvas/index.js b/src/components/spaces/canvas/index.js
@@ -9,7 +9,7 @@ import Metric from 'gComponents/metrics/card/index'
 import {denormalizedSpaceSelector} from '../denormalized-space-selector'
 
 import {addMetric, changeMetric, removeMetrics} from 'gModules/metrics/actions'
-import {copy, paste} from 'gModules/copied/actions'
+import * as copiedActions from 'gModules/copied/actions'
 import {changeSelect, deSelect} from 'gModules/selected_cell/actions'
 import {selectRegion, deSelectRegion} from 'gModules/selected_region/actions'
 import {runSimulations, deleteSimulations} from 'gModules/simulations/actions'
@@ -105,14 +105,6 @@ export default class Canvas extends Component{
     this.props.dispatch(deSelectRegion())
   }
 
-  _handleCopy() {
-    this.props.dispatch(copy(this.props.denormalizedSpace.id))
-  }
-
-  _handlePaste() {
-    this.props.dispatch(paste(this.props.denormalizedSpace.id))
-  }
-
   _handleAddMetric(location) {
     this.props.dispatch(addMetric({space: this.props.spaceId, location: location, isNew: true}))
   }
@@ -209,8 +201,9 @@ export default class Canvas extends Component{
           onAddItem={this._handleAddMetric.bind(this)}
           onMoveItem={this._handleMoveMetric.bind(this)}
           onRemoveItems={(ids) => {this.props.dispatch(removeMetrics(ids))}}
-          onCopy={this._handleCopy.bind(this)}
-          onPaste={this._handlePaste.bind(this)}
+          onCopy={this.props.onCopy}
+          onPaste={this.props.onPaste}
+          onCut={this.props.onCut}
           showGridLines={showGridLines}
           canvasState={this.props.canvasState}
         />

diff --git a/src/components/spaces/show/Toolbar/index.js b/src/components/spaces/show/Toolbar/index.js
@@ -0,0 +1,112 @@
+import React, {Component} from 'react'
+
+import Icon from 'react-fa'
+import ReactTooltip from 'react-tooltip'
+
+import CanvasViewForm from '../canvasViewForm'
+import DropDown, {DropDownListElement} from 'gComponents/utility/drop-down/index'
+import {PrivacyToggle} from '../privacy-toggle/index'
+import {SpaceName} from '../spaceName'
+import e from 'gEngine/engine'
+import './style.css'
+
+const ProgressMessage = ({actionState}) => (
+  <div className='saveMessage'>
+    {actionState == 'SAVING' && 'Saving...'}
+    {actionState == 'COPYING' && 'Copying...'}
+    {actionState == 'CREATING' && 'Creating a new model...'}
+    {actionState == 'ERROR' &&
+      <div className='ui red horizontal label'>
+        ERROR SAVING
+      </div>
+    }
+    {actionState == 'ERROR_COPYING' &&
+      <div className='ui red horizontal label'>
+        ERROR COPYING
+      </div>
+    }
+    {actionState == 'ERROR_CREATING' &&
+      <div className='ui red horizontal label'>
+        ERROR CREATING NEW MODEL
+      </div>
+    }
+    {actionState == 'SAVED' && 'All changes saved'}
+    {actionState == 'COPIED' && 'Successfully copied'}
+    {actionState == 'CREATED' && 'New model created'}
+    {actionState == 'CONFLICT' &&
+      <div className='ui red horizontal label'>
+        {"Model has changed since your last save. Refresh and try again later."}
+      </div>
+    }
+  </div>
+)
+
+const SpaceHeader = ({
+  editableByMe,
+  actionState,
+  isLoggedIn,
+  onCopyModel,
+  onCopyMetrics,
+  onPasteMetrics,
+  onCutMetrics,
+  onDestroy,
+  onUndo,
+  canUndo,
+  onRedo,
+  canRedo
+}) => {
+  const ReactTooltipParams = {class: 'small-tooltip', delayShow: 0, delayHide: 0, place: 'bottom', effect: 'solid'}
+
+  return (
+    <div className='SpaceShowToolbar container-fluid'>
+      <div className='row'>
+        <div className='col-md-10'>
+          <ReactTooltip {...ReactTooltipParams} id='cut-button'>Cut Nodes (ctrl-x)</ReactTooltip>
+          <ReactTooltip {...ReactTooltipParams} id='copy-button'>Copy Nodes (ctrl-c)</ReactTooltip>
+          <ReactTooltip {...ReactTooltipParams} id='paste-button'>Paste Nodes (ctrl-p)</ReactTooltip>
+          <ReactTooltip {...ReactTooltipParams} id='undo-button'>Undo (ctrl-z)</ReactTooltip>
+          <ReactTooltip {...ReactTooltipParams} id='redo-button'>Redo (ctrl-shift-z)</ReactTooltip>
+
+          { isLoggedIn &&
+            <DropDown
+                headerText={'Model Actions'}
+                openLink={<a className='header-actions-button'>File</a>}
+                position='right'
+            >
+              <ul>
+                <DropDownListElement icon={'copy'} header='Copy Model' onMouseDown={onCopyModel}/>
+                {editableByMe &&
+                  <DropDownListElement icon={'warning'} header='Delete Model' onMouseDown={onDestroy}/>
+                }
+              </ul>
+            </DropDown>
+          }
+
+          <CanvasViewForm/>
+
+          <div className='header-actions-button-border'/>
+          <a onClick={onCutMetrics} className={`header-actions-button`} data-tip data-for='cut-button'>
+            <Icon name='cut'/>
+          </a>
+          <a onClick={onCopyMetrics} className={`header-actions-button`} data-tip data-for='copy-button'>
+            <Icon name='copy'/>
+          </a>
+          <a onClick={onPasteMetrics} className={`header-actions-button`} data-tip data-for='paste-button'>
+            <Icon name='paste'/>
+          </a>
+          <div className='header-actions-button-border'/>
+          <a onClick={onUndo} className={`header-actions-button ${canUndo ? '' : 'disabled'}`} data-tip data-for='undo-button'>
+            <Icon name='undo'/>
+          </a>
+          <a onClick={onRedo} className={`header-actions-button ${canRedo ? '' : 'disabled'}`} data-tip data-for='redo-button'>
+            <Icon name='repeat'/>
+          </a>
+
+          <ProgressMessage actionState={actionState}/>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SpaceHeader
diff --git a/src/components/spaces/show/Toolbar/style.css b/src/components/spaces/show/Toolbar/style.css
@@ -0,0 +1,72 @@
+.SpaceShowToolbar {
+  width: 100%;
+  background: rgba(219, 221, 222, 0.69);
+  float: left;
+  border-bottom: 1px solid rgba(37, 128, 167, 0.38);
+}
+
+.SpaceShowToolbar .saveMessage{
+  color: #09273A;
+  margin-left: 26px;
+  float: left;
+  margin-top: 8px;
+  font-size: 1.1em;
+}
+
+.SpaceShowToolbar .header-actions-button {
+  cursor: pointer;
+  float: left;
+  padding: 0.3em 0.55em;
+  font-size: 1.1em;
+  color: rgb(18,46,64);
+  border-radius: 1px;
+  margin: 0.2em 0.2em;
+}
+
+.SpaceShowToolbar .header-actions-button-border {
+  float: left;
+  width: 2px;
+  background: rgb(115, 168, 190);
+  height: 34px;
+  margin: 0 3px;
+}
+
+.SpaceShowToolbar .header-actions-button:hover {
+  background-color: rgba(255,255,255,0.3);
+}
+
+.SpaceShowToolbar .header-actions-button:active {
+  background-color: rgba(255,255,255,0.5);
+}
+
+.SpaceShowToolbar .header-actions-button.disabled {
+  opacity: 0.4;
+}
+
+.SpaceShowToolbar .header-actions-button.disabled:hover {
+  background-color: rgba(255,255,255,0.2);
+}
+
+.SpaceShowToolbar .ui.buttons {
+  float: left;
+  margin-right: 8px;
+}
+
+.SpaceShowToolbar a.space-header-action {
+  color: white;
+  padding: 0.5em 0.95em;
+  border-radius: 3px;
+  font-weight: 300;
+  margin-right: 10px;
+  background-color: rgba(0,0,0,0);
+  transition: background-color 0.3s;
+  font-size: 1.2em;
+  float:left;
+}
+
+.SpaceShowToolbar a.space-header-action:hover{
+  color: white;
+  background-color: rgba(0,0,0,0.2);
+  cursor: pointer;
+}
+
diff --git a/src/components/spaces/show/canvasViewForm.js b/src/components/spaces/show/canvasViewForm.js
@@ -80,7 +80,7 @@ export default class CanvasViewForm extends Component {
     return (
       <DropDown
           headerText={'View Options'}
-          openLink={<a className='relative space-header-action'>View Options</a>}
+          openLink={<a className='header-actions-button'>View</a>}
           position='right'
       >
 

diff --git a/src/components/spaces/show/header.js b/src/components/spaces/show/header.js
@@ -12,54 +12,17 @@ import e from 'gEngine/engine'
 
 import './header.css'
 
-const ProgressMessage = ({actionState}) => (
-  <div className='saveMessage'>
-    {actionState == 'SAVING' && 'Saving...'}
-    {actionState == 'COPYING' && 'Copying...'}
-    {actionState == 'CREATING' && 'Creating a new model...'}
-    {actionState == 'ERROR' &&
-      <div className='ui red horizontal label'>
-        ERROR SAVING
-      </div>
-    }
-    {actionState == 'ERROR_COPYING' &&
-      <div className='ui red horizontal label'>
-        ERROR COPYING
-      </div>
-    }
-    {actionState == 'ERROR_CREATING' &&
-      <div className='ui red horizontal label'>
-        ERROR CREATING NEW MODEL
-      </div>
-    }
-    {actionState == 'SAVED' && 'All changes saved'}
-    {actionState == 'COPIED' && 'Successfully copied'}
-    {actionState == 'CREATED' && 'New model created'}
-    {actionState == 'CONFLICT' && 
-      <div className='ui red horizontal label'>
-        {"Model has changed since your last save. Refresh and try again later."}
-      </div>
-    }
-  </div>
-)
-
 const SpaceHeader = ({
   canBePrivate,
   name,
+  space,
   isPrivate,
   editableByMe,
   actionState,
   isLoggedIn,
-  onSave,
-  onCopy,
-  onDestroy,
   onPublicSelect,
   onPrivateSelect,
-  onSaveName,
-  onUndo,
-  canUndo,
-  onRedo,
-  canRedo
+  onSaveName
 }) => {
   let privacy_header = (<span><Icon name='globe'/> Public</span>)
   if (isPrivate) {
@@ -68,61 +31,43 @@ const SpaceHeader = ({
   const ReactTooltipParams = {class: 'small-tooltip', delayShow: 0, delayHide: 0, place: 'bottom', effect: 'solid'}
 
   return (
-    <div className='header'>
-      <ReactTooltip {...ReactTooltipParams} id='undo-button'>Undo (ctrl-z)</ReactTooltip>
-      <ReactTooltip {...ReactTooltipParams} id='redo-button'>Redo (ctrl-shift-z)</ReactTooltip>
-
-      <div className='header-name'>
-        <SpaceName
-            name={name}
-            editableByMe={editableByMe}
-            onSave={onSaveName}
-        />
-      </div>
-
-      <div className='header-actions'>
-        {editableByMe &&
-          <div className='ui buttons tiny'>
-            <button onClick={onUndo} className={`ui icon button ${canUndo ? '' : 'disabled'}`} data-tip data-for='undo-button'>
-              <Icon name='undo'/>
-            </button>
-            <button onClick={onRedo} className={`ui icon button ${canRedo ? '' : 'disabled'}`} data-tip data-for='redo-button'>
-              <Icon name='repeat'/>
-            </button>
+    <div className='container-fluid'>
+      <div className='row header'>
+        <div className='col-sm-8'>
+          <div className='header-name'>
+            <SpaceName
+                name={name}
+                editableByMe={editableByMe}
+                onSave={onSaveName}
+            />
           </div>
-        }
+        </div>
 
-        <CanvasViewForm/>
+        <div className='col-sm-4'>
 
-        {editableByMe &&
-          <DropDown
-              headerText={'Model Actions'}
-              openLink={<a className='space-header-action'>Model Actions</a>}
-              position='right'
-          >
-            <ul>
-              <DropDownListElement icon={'warning'} header='Delete Model' onMouseDown={onDestroy}/>
-            </ul>
-          </DropDown>
-        }
+            {!!space.organization &&
+              <a className='ui image label' href={`/organizations/${space.organization.id}`}>
+                <img src={space.organization.picture}/>
+                {space.organization.name}
+              </a>
+            }
+            {!space.organization && space.user && !space.editableByMe &&
+              <a className='ui image label' href={`/users/${space.user.id}`}>
+                <img src={space.user.picture}/>
+                {space.user.name}
+              </a>
+            }
 
-        {editableByMe &&
-          <PrivacyToggle
-            headerText={'Privacy Options'}
-            openLink={<a className='space-header-action'>{privacy_header}</a>}
-            position='right'
-            isPrivateSelectionInvalid={!canBePrivate}
-            isPrivate={isPrivate}
-            onPublicSelect={onPublicSelect}
-            onPrivateSelect={onPrivateSelect}
-          />
-        }
-        { isLoggedIn &&
-          <div onMouseDown={onCopy} className='copy-button'>
-            <a className='space-header-action'><Icon name='copy'/> Copy</a>
+              <PrivacyToggle
+                headerText={'Privacy Options'}
+                openLink={<a className='space-header-action'>{privacy_header}</a>}
+                position='left'
+                isPrivateSelectionInvalid={!canBePrivate}
+                isPrivate={isPrivate}
+                onPublicSelect={onPublicSelect}
+                onPrivateSelect={onPrivateSelect}
+              />
           </div>
-        }
-        <ProgressMessage actionState={actionState}/>
       </div>
     </div>
   )