Desktop Apps Nav Bar Update (#741)

- Move nav bar from desktop app/player header to be next to location bar. - Consistent nav in desktop app and player - Nav buttons reset to disabled when webview is initialized. - Ensure autopilot apis are not called in replay mode (and in player) - Make location bar corners rounded in desktop app when no browser dropdown is shown.
Rhizome-Conifer · Aug 21, 2019 · 4ea2647 · 4ea2647
1 parent b9d8fe7
commit 4ea2647
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 225 deletions.
diff --git a/frontend/src/components/controls/RecordURLBar/index.js b/frontend/src/components/controls/RecordURLBar/index.js
@@ -84,15 +84,17 @@ class RecordURLBar extends Component {
       <div className="main-bar">
         <form className={classNames('form-group-recorder-url', { 'start-recording': isNew, 'content-form': !isNew, 'remote-archive': isPatch || isExtract })}>
           <div className="input-group containerized">
-            <div className="input-group-btn rb-dropdown">
-              {
-                canAdmin &&
-                  <RemoteBrowserSelect
-                    active
-                    autopilotRunning={autopilotRunning}
-                    params={params} />
-              }
-            </div>
+            {
+              !__DESKTOP__ && canAdmin &&
+                <div className="input-group-btn rb-dropdown">
+                  {
+                    <RemoteBrowserSelect
+                      active
+                      autopilotRunning={autopilotRunning}
+                      params={params} />
+                  }
+                </div>
+            }
             {
               /* {% if not browser %}autofocus{% endif %} */
               <input type="text" disabled={autopilotRunning} onChange={this.handleChange} onKeyPress={this.handleSubmit} className="url-input-recorder form-control" name="url" value={url} style={{ height: '3.3rem' }} autoFocus required />

diff --git a/frontend/src/components/controls/ReplayUI/index.js b/frontend/src/components/controls/ReplayUI/index.js
@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 
 import { ModeSelector, RecordingTools, SizeCounter } from 'containers';
 
 import { ReplayURLBar, RecordURLBar } from 'components/controls';
-import { InfoIcon } from 'components/icons';
+import { InfoIcon, PlayerArrowLeftIcon, PlayerArrowRightIcon, RefreshIcon } from 'components/icons';
 
 import './style.scss';
 
@@ -14,6 +15,8 @@ class ReplayUI extends Component {
   static propTypes = {
     activeBrowser: PropTypes.string,
     autopilotRunning: PropTypes.bool,
+    canGoBackward: PropTypes.bool,
+    canGoForward: PropTypes.bool,
     params: PropTypes.object,
     sidebarExpanded: PropTypes.bool,
     timestamp: PropTypes.string,
@@ -31,11 +34,48 @@ class ReplayUI extends Component {
     this.props.toggle(!this.props.sidebarExpanded);
   }
 
+  triggerBack = () => {
+    const { canGoBackward } = this.props;
+
+    if (canGoBackward) {
+      window.dispatchEvent(new Event('wr-go-back'));
+    }
+  }
+
+  triggerForward = () => {
+    const { canGoForward } = this.props;
+
+    if (canGoForward) {
+      window.dispatchEvent(new Event('wr-go-forward'));
+    }
+  }
+
+  triggerRefresh = () => {
+    window.dispatchEvent(new Event('wr-refresh'));
+  }
+
   render() {
     const { canAdmin, currMode, isMobile } = this.context;
+    const { canGoBackward, canGoForward } = this.props;
 
     const isWrite = ['extract', 'extract_only', 'patch', 'record', 'live'].includes(currMode);
 
+    let backClass;
+    let fwdClass;
+    let refreshClass;
+
+    if (__DESKTOP__) {
+      backClass = classNames('arrow', {
+        inactive: !canGoBackward
+      });
+      fwdClass = classNames('arrow', {
+        inactive: !canGoForward
+      });
+      refreshClass = classNames('arrow', {
+        inactive: false
+      });
+    }
+
     return (
       <div role="presentation" className="container-fluid wr-controls navbar-default">
         {
@@ -50,6 +90,21 @@ class ReplayUI extends Component {
             <ModeSelector />
         }
 
+        {
+          __DESKTOP__ &&
+            <div className="browser-nav">
+              <button onClick={this.triggerBack} disabled={!canGoBackward} className={backClass} title="Click to go back" aria-label="navigate back" type="button">
+                <PlayerArrowLeftIcon />
+              </button>
+              <button onClick={this.triggerForward} disabled={!canGoForward} className={fwdClass} title="Click to go forward" aria-label="navigate forward" type="button">
+                <PlayerArrowRightIcon />
+              </button>
+              <button onClick={this.triggerRefresh} disabled={false} className={refreshClass} title="Refresh inner window" aria-label="Refresh inner window" type="button">
+                <RefreshIcon />
+              </button>
+            </div>
+        }
+
         {
           isWrite ?
             <RecordURLBar {...this.props} /> :

diff --git a/frontend/src/components/controls/ReplayUI/style.scss b/frontend/src/components/controls/ReplayUI/style.scss
@@ -1,3 +1,5 @@
+@import 'src/vars';
+
 .wr-controls {
     display: flex;
     align-items: center;
@@ -31,6 +33,48 @@
     }
 }
 
+.browser-nav {
+    display: flex;
+    align-items: center;
+    margin-right: 1.5rem;
+
+    button {
+      background-color: transparent;
+      background-repeat: no-repeat;
+      border: none;
+      color: #000;
+
+      &.arrow {
+        transition: background $quickShift ease-in-out;
+        border-radius: .4rem;
+        padding: .1rem .2rem;
+
+        &:not(:last-of-type) {
+          margin-right: .2rem;
+        }
+
+        svg path {
+          fill: $gray600;
+        }
+
+        &.inactive {
+          path {
+            fill: $gray500;
+          }
+        }
+
+        svg {
+          padding: .2rem;
+          vertical-align: middle;
+        }
+
+        &:not(.inactive):hover {
+          background: $gray300;
+        }
+      }
+    }
+}
+
 .iframe-container {
     position: relative;
     flex-grow: 1;

diff --git a/frontend/src/components/controls/ReplayURLBar/style.scss b/frontend/src/components/controls/ReplayURLBar/style.scss
@@ -27,14 +27,19 @@
         border-bottom-right-radius: 2.7rem;
     }
 
-   .btn {
+    .btn, .form-control:first-child {
         border-top-left-radius: 2.7rem;
         border-bottom-left-radius: 2.7rem;
-   }
+    }
 
-   & > form > .input-group {
-    width: 100%;
-   }
+    .rb-dropdown + .wr-app-url .form-control:first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    & > form > .input-group {
+        width: 100%;
+    }
 }
 
 .wr-app-url {
@@ -57,11 +62,6 @@
     }
 }
 
-.rb-dropdown + .wr-app-url .form-control {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
 .wr-replay-info {
     display: flex;
     display: -ms-flexbox;
@@ -93,4 +93,4 @@
        }
     }
 
-}
+}
diff --git a/frontend/src/components/desktop/Webview/index.js b/frontend/src/components/desktop/Webview/index.js
@@ -61,6 +61,10 @@ class Webview extends Component {
     window.addEventListener('wr-go-forward', this.goForward);
     window.addEventListener('wr-refresh', this.refresh);
 
+    // ensure nav buttons disabled when new webview loads
+    dispatch(setBrowserHistory('canGoBackward', false));
+    dispatch(setBrowserHistory('canGoForward', false));
+
     this.webviewHandle.addEventListener('did-navigate-in-page', (event) => {
       if (event.isMainFrame) {
         dispatch(setMethod('history'));
@@ -155,6 +159,7 @@ class Webview extends Component {
 
   handleIPCEvent = (evt) => {
     const { canGoBackward, canGoForward, dispatch } = this.props;
+    const { currMode } = this.context;
     const state = evt.args[0];
 
     // set back & forward availability
@@ -172,6 +177,12 @@ class Webview extends Component {
 
       case 'load':
         this.setState({ loading: false });
+
+        // no autopilot on replay
+        if (currMode === 'replay-coll') {
+          break;
+        }
+
         if (state.newPage) {
           this.addNewPage(state, true);
         }
@@ -180,7 +191,6 @@ class Webview extends Component {
           dispatch(autopilotReset());
           dispatch(autopilotCheck(state.url));
         } else if (state.readyState === 'complete') {
-          // todo: enable autopilot start button
           dispatch(autopilotReady());
         }
         break;

diff --git a/frontend/src/components/player/PlayerNavUI/index.js b/frontend/src/components/player/PlayerNavUI/index.js
@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 
 import { openFile } from 'helpers/playerUtils';
 
-import { PlayerArrowLeftIcon, PlayerArrowRightIcon, PlayerCloseIcon, RefreshIcon, HelpIcon } from 'components/icons';
+import { PlayerCloseIcon, HelpIcon } from 'components/icons';
 
 import './style.scss';
 
@@ -15,39 +15,11 @@ class PlayerNavUI extends Component {
 
   static propTypes = {
     collectionLoaded: PropTypes.bool,
-    canGoBackward: PropTypes.bool,
-    canGoForward: PropTypes.bool,
     history: PropTypes.object,
     route: PropTypes.object,
     source: PropTypes.string
   };
 
-  triggerBack = () => {
-    const { canGoBackward, history, route } = this.props;
-    const isReplay = route && route.name.indexOf('replay') !== -1;
-
-    if (isReplay && canGoBackward) {
-      window.dispatchEvent(new Event('wr-go-back'));
-    } else if (history.canGo(-1)) {
-      history.goBack();
-    }
-  }
-
-  triggerForward = () => {
-    const { canGoForward, history, route } = this.props;
-    const isReplay = route && route.name.indexOf('replay') !== -1;
-
-    if (isReplay && canGoForward) {
-      window.dispatchEvent(new Event('wr-go-forward'));
-    } else if (history.canGo(1)) {
-      history.goForward();
-    }
-  }
-
-  triggerRefresh = () => {
-    window.dispatchEvent(new Event('wr-refresh'));
-  }
-
   sendOpenFile = () => {
     openFile(this.props.history);
   }
@@ -57,25 +29,13 @@ class PlayerNavUI extends Component {
   }
 
   render() {
-    const { canGoForward, collectionLoaded, history, route, source } = this.props;
+    const { collectionLoaded, history, route, source } = this.props;
 
     const indexUrl = collectionLoaded ? '/local/collection' : '/';
     const isLanding = route && route.name === 'landing';
     const isReplay = route && route.name.indexOf('replay') !== -1;
     const isHelp = route && route.name === 'help';
 
-    const canGoBack = history.canGo(-1);
-
-    const backClass = classNames('arrow', {
-      inactive: !canGoBack
-    });
-    const fwdClass = classNames('arrow', {
-      inactive: isReplay ? !canGoForward : !history.canGo(1)
-    });
-    const refreshClass = classNames('arrow', {
-      inactive: !isReplay
-    });
-
     const format = source && (source.startsWith('dat://') ? `${source.substr(0, 30)}...` : basename(source));
 
     return (
@@ -94,17 +54,6 @@ class PlayerNavUI extends Component {
                   <img className="wrLogoImg" src={require('shared/images/logo.svg')} alt="webrecorder logo" /><br />
                 </Link>
 
-                <div className="browser-nav">
-                  <button id="back" onClick={this.triggerBack} disabled={!canGoBack} className={backClass} title="Click to go back" aria-label="navigate back" type="button">
-                    <PlayerArrowLeftIcon />
-                  </button>
-                  <button id="forward" onClick={this.triggerForward} disabled={isReplay ? !canGoForward : !history.canGo(1)} className={fwdClass} title="Click to go forward" aria-label="navigate forward" type="button">
-                    <PlayerArrowRightIcon />
-                  </button>
-                  <button id="refresh" onClick={this.triggerRefresh} disabled={!isReplay} className={refreshClass} title="Refresh replay window" type="button">
-                    <RefreshIcon />
-                  </button>
-                </div>
                 {
                   source &&
                     <div className="source" title={source}>