✨ Chrome tab execute button

samdenty · Jan 11, 2018 · e0368d8 · e0368d8
1 parent 173fbae
commit e0368d8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/interface/src/components/ChromeTabs.jsx b/interface/src/components/ChromeTabs.jsx
@@ -11,7 +11,7 @@ class ChromeTabs extends Component {
   }
   render() {
     const { width, height } = this.state.dimensions
-    const { onClose } = this.props
+    const { onClose, onExecute } = this.props
 
     return (
       <div className="chrome-tabs">
@@ -36,7 +36,8 @@ class ChromeTabs extends Component {
                     favicon={tab.window.favicon}
                     active={tab.window.active}
                     width={this.state.tabWidth}
-                    onClose={onClose} />
+                    onClose={onClose}
+                    onExecute={onExecute} />
                 ) : ''
               })}
             </div>
@@ -50,7 +51,7 @@ class ChromeTabs extends Component {
 
 class ChromeTab extends Component {
   render() {
-    const { onClose, order, width, height, title, active, favicon } = this.props
+    const { onClose, onExecute, order, width, height, title, active, favicon } = this.props
     return(
       <div
         className={`chrome-tab${active ? ' chrome-tab-current' : ''}`}
@@ -111,6 +112,7 @@ class ChromeTab extends Component {
           }}
         />
         <div className="chrome-tab-title">{title}</div>
+        <div className="chrome-tab-execute" title="" onClick={() => onExecute(order)} />
         <div className="chrome-tab-close" title="" onClick={() => onClose(order)} />
       </div>
     )

diff --git a/interface/src/scss/main.scss b/interface/src/scss/main.scss
@@ -355,10 +355,11 @@ pre {
       font-size: 1.2em;
       margin-top: 0.5em;
       margin-left: 0.4em;
-      max-width: calc(100% - 5em);
+      max-width: calc(100% - 6.7em);
       pointer-events: none;
     }
-    .chrome-tab-close {
+    .chrome-tab-close,
+    .chrome-tab-execute {
       position: absolute;
       width: 1.4em;
       height: 1.4em;
@@ -388,6 +389,20 @@ pre {
         background: #e25c4b;
       }
     }
+    .chrome-tab-execute {
+      right: 3em;
+      background: transparent !important;
+      opacity: 0.5;
+      &::before {
+        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#fff' d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'></path></svg>") !important;
+      }
+      &:hover {
+        opacity: 0.9;
+        &:active {
+          opacity: 1;
+        }
+      }
+    }
   } // .react-monaco-editor-container {
   // }
 }

diff --git a/interface/src/sidebar.jsx b/interface/src/sidebar.jsx
@@ -1765,10 +1765,14 @@ class Inject extends Component {
 
   closeSession = id => {
     let { token, client } = this.state.selectedClient
-
     this.execute(token, client.sessions[id].id, 'window.close()')
   }
 
+  executeSession = id => {
+    let { token, client } = this.state.selectedClient
+    this.execute(token, client.sessions[id].id, this.state.code)
+  }
+
   switchClient = (token) => {
     let { socket, project } = this.props
 
@@ -1834,7 +1838,7 @@ class Inject extends Component {
         </div>
         <div className="inject-editor-container">
           {this.state.selectedClient && this.state.selectedClient.client && this.state.selectedClient.client.sessions &&
-            <ChromeTabs tabs={this.state.selectedClient.client.sessions} onClose={this.closeSession} />
+            <ChromeTabs tabs={this.state.selectedClient.client.sessions} onClose={this.closeSession} onExecute={this.executeSession} />
           }
           <MonacoEditor
             language="javascript"