change style of action mode toolbar

appium · Aug 8, 2017 · 2010586 · 2010586
1 parent 6a6a037
commit 2010586
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 48 deletions.
diff --git a/app/renderer/components/Inspector/Actions.js b/app/renderer/components/Inspector/Actions.js
diff --git a/app/renderer/components/Inspector/Inspector.css b/app/renderer/components/Inspector/Inspector.css
@@ -269,12 +269,16 @@
 }
 
  .innerScreenshotContainer {
-    display: flex; 
+    display: flex;
     flex-direction: column;
     height: 100%;
  }
 
  .innerScreenshotContainer .screenshotActionsPanel {
     margin-bottom: 2px;
     margin: 0 auto 2px auto;
- }
+ }
+
+ .action-controls {
+    margin-right: 20px;
+ }
diff --git a/app/renderer/components/Inspector/Inspector.js b/app/renderer/components/Inspector/Inspector.js
@@ -37,10 +37,16 @@ export default class Inspector extends Component {
     this.props.getSavedActionFramework();
   }
 
+  screenshotInteractionChange (mode) {
+    const {selectScreenshotInteractionMode, clearSwipeAction} = this.props;
+    clearSwipeAction(); // When the action changes, reset the swipe action
+    selectScreenshotInteractionMode(mode);
+  }
+
   render () {
     const {screenshot, screenshotError, selectedElement = {},
       applyClientMethod, quitSession, isRecording, showRecord, startRecording,
-      pauseRecording, showLocatorTestModal} = this.props;
+      pauseRecording, showLocatorTestModal, screenshotInteractionMode} = this.props;
     const {path} = selectedElement;
 
     let main = <div className={InspectorStyles['inspector-main']}>
@@ -74,7 +80,28 @@ export default class Inspector extends Component {
       </div>
     </div>;
 
+    let actionControls = <div className={InspectorStyles['action-controls']}>
+      <ButtonGroup size="large" value={screenshotInteractionMode}>
+        <Tooltip title="Select Elements">
+          <Button icon='select' onClick={() => {this.screenshotInteractionChange('select');}}
+            type={screenshotInteractionMode === 'select' ? 'primary' : 'default'}
+          />
+        </Tooltip>
+        <Tooltip title="Swipe By Coordinates">
+          <Button icon='swap-right' onClick={() => {this.screenshotInteractionChange('swipe');}}
+            type={screenshotInteractionMode === 'swipe' ? 'primary' : 'default'}
+          />
+        </Tooltip>
+        <Tooltip title="Tap By Coordinates">
+          <Button icon='scan' onClick={() => {this.screenshotInteractionChange('tap');}}
+            type={screenshotInteractionMode === 'tap' ? 'primary' : 'default'}
+          />
+        </Tooltip>
+      </ButtonGroup>
+    </div>;
+
     let controls = <div className={InspectorStyles['inspector-toolbar']}>
+      {actionControls}
       <ButtonGroup size="large">
         <Tooltip title="Back">
           <Button id='btnGoBack' icon='arrow-left' onClick={() => applyClientMethod({methodName: 'back'})}/>

diff --git a/app/renderer/components/Inspector/Screenshot.js b/app/renderer/components/Inspector/Screenshot.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { debounce } from 'lodash';
 import HighlighterRects from './HighlighterRects';
-import Actions from './Actions';
-import { Spin } from 'antd';
+import { Spin, Tooltip } from 'antd';
 import B from 'bluebird';
 import styles from './Inspector.css';
 import { parseCoordinates } from './shared';
@@ -37,7 +36,7 @@ export default class Screenshot extends Component {
   }
 
   async handleScreenshotClick () {
-    const {screenshotInteractionMode, applyClientMethod, 
+    const {screenshotInteractionMode, applyClientMethod,
       swipeStart, swipeEnd, setSwipeStart, setSwipeEnd} = this.props;
     const {x, y} = this.state;
 
@@ -102,7 +101,7 @@ export default class Screenshot extends Component {
   }
 
   render () {
-    const {screenshot, methodCallInProgress, screenshotInteractionMode, 
+    const {screenshot, methodCallInProgress, screenshotInteractionMode,
       swipeStart, swipeEnd} = this.props;
     const {scaleRatio, x, y} = this.state;
 
@@ -112,14 +111,22 @@ export default class Screenshot extends Component {
       screenshotStyle.cursor = 'crosshair';
     }
 
+    let swipeInstructions = null;
+    if (screenshotInteractionMode === 'swipe' && (!swipeStart || !swipeEnd)) {
+      if (!swipeStart) {
+        swipeInstructions = "Click swipe start point";
+      } else if (!swipeEnd) {
+        swipeInstructions = "Click swipe end point";
+      }
+    }
+
+    const screenImg = <img src={`data:image/gif;base64,${screenshot}`} id="screenshot" />;
+
     // Show the screenshot and highlighter rects. Show loading indicator if a method call is in progress.
     return <Spin size='large' spinning={!!methodCallInProgress}>
       <div className={styles.innerScreenshotContainer}>
-        <div className={styles.screenshotActionsPanel}>
-          <Actions {...this.props} />
-        </div>
         <div ref={(containerEl) => { this.containerEl = containerEl; }}
-          style={screenshotStyle} 
+          style={screenshotStyle}
           onClick={this.handleScreenshotClick.bind(this)}
           onMouseMove={this.handleMouseMove.bind(this)}
           onMouseOut={this.handleMouseOut.bind(this)}
@@ -128,17 +135,14 @@ export default class Screenshot extends Component {
             <p>X: {x}</p>
             <p>Y: {y}</p>
           </div>}
-          <img src={`data:image/gif;base64,${screenshot}`} id="screenshot" />
+          {swipeInstructions && <Tooltip visible={true} placement="top" title={swipeInstructions}>{screenImg}</Tooltip>}
+          {!swipeInstructions && screenImg}
           {screenshotInteractionMode === 'select' && this.containerEl && <HighlighterRects {...this.props} containerEl={this.containerEl} />}
-          {screenshotInteractionMode === 'swipe' && <div>
-            {(!swipeStart || !swipeEnd) && <div className={styles.swipeInstructions}>
-              {!swipeStart && <p>Click swipe start</p>}
-              {swipeStart && !swipeEnd && <p>Click swipe end</p>}
-            </div>}
+          {screenshotInteractionMode === 'swipe' &&  
             <svg className={styles.swipeSvg}>
-              {swipeStart && !swipeEnd && <circle 
-                cx={swipeStart.x / scaleRatio} 
-                cy={swipeStart.y / scaleRatio} 
+              {swipeStart && !swipeEnd && <circle
+                cx={swipeStart.x / scaleRatio}
+                cy={swipeStart.y / scaleRatio}
               />}
               {swipeStart && swipeEnd && <line
                 x1={swipeStart.x / scaleRatio}
@@ -147,7 +151,7 @@ export default class Screenshot extends Component {
                 y2={swipeEnd.y / scaleRatio}
               />}
             </svg>
-          </div>}
+          }
         </div>
       </div>
     </Spin>;