Desktop Update 2 (#742)

* Adjustments for desktop UI * Various updates: - Add new preview icon in mode selector - Remove caret from collection manager button - Add recording form to collection list - Misc layout changes for desktop * Minor css tweaks * Add header to desktop settings * Add preview to new capture page, mode selector tweak * fixes for desktop: - ensure new nav buttons work in live mode - clear cookies on each load in replay mode * cacheing impeovements: add cacheing for proxy mode: - if an embedded resource, 200 response, and no 'no-store', add 'cache-control' header to cache during the session - desktop app will clear cache on new session, remote browser will use new browser * Update mode selector, remove automation features, tweak width * Update autopilot lock to effect webview * misc fixes: - ensure x-requested-with header sent for upload PUT xhr request - ensure success check does not cause exception * Don't 404 on collection creation error * Minor css fixes * Link help to github readme * Preview mode selector copy fix * Copy fixes * Open help link in native browser * Swap empty anchor for button * bump version to 4.8.0
Rhizome-Conifer · Aug 29, 2019 · eb79871 · eb79871
1 parent 4ea2647
commit eb79871
Show file tree

Hide file tree

Showing 37 changed files with 345 additions and 180 deletions.
diff --git a/frontend/src/client.js b/frontend/src/client.js
@@ -42,7 +42,7 @@ const renderApp = (renderProps) => {
 // render app
 renderApp({ routes: __PLAYER__ ? require('./playerRoutes') : baseRoute, client });
 
-if (module.hot && !__PLAYER__) {
+if (module.hot && !__DESKTOP__) {
   module.hot.accept('./baseRoute', () => {
     const nextRoutes = require('./baseRoute');
 

diff --git a/frontend/src/components/collection/CollectionHeaderUI/index.js b/frontend/src/components/collection/CollectionHeaderUI/index.js
@@ -188,21 +188,6 @@ class CollectionHeaderUI extends Component {
                   <MenuItem onClick={this.newSession}>New Session</MenuItem>
                   <MenuItem divider />
                   <MenuItem onClick={this.togglePublicView}>Cover</MenuItem>
-
-                  {
-                    newFeatures &&
-                      <MenuItem divider />
-                  }
-
-                  {
-                    newFeatures &&
-                      <MenuItem onClick={this.props.toggleAutomationModal}>Automation <sup>beta</sup></MenuItem>
-                  }
-
-                  {
-                    newFeatures && this.props.active &&
-                      <MenuItem onClick={this.stopAutomation}>Stop Automation</MenuItem>
-                  }
                   <MenuItem divider />
                   <MenuItem onClick={this.manageCollection}>Manage Sessions</MenuItem>
                   {
@@ -272,7 +257,7 @@ class CollectionHeaderUI extends Component {
           <div className="access-row">
             <Link to={getCollectionLink(collection)}>Collection Cover</Link>
             {
-              !isAnon && canAdmin &&
+              !isAnon && canAdmin && !__DESKTOP__ &&
                 <PublicSwitch
                   callback={this.setPublic}
                   isPublic={isPublic}

diff --git a/frontend/src/components/collection/CollectionListUI/CollectionItem.js b/frontend/src/components/collection/CollectionListUI/CollectionItem.js
@@ -74,9 +74,12 @@ class CollectionItem extends PureComponent {
             {
               canAdmin &&
                 <React.Fragment>
-                  <span className={classNames('visibility-button', { 'is-public': collection.get('public') })}>
-                    { collection.get('public') ? 'PUBLIC' : 'PRIVATE' }
-                  </span>
+                  {
+                    !__DESKTOP__ &&
+                      <span className={classNames('visibility-button', { 'is-public': collection.get('public') })}>
+                        { collection.get('public') ? 'PUBLIC' : 'PRIVATE' }
+                      </span>
+                  }
                   <DeleteCollection collection={collection}>
                     <TrashIcon />
                     <Tooltip placement="top" className="in" id="tooltip-top">

diff --git a/frontend/src/components/collection/CollectionListUI/index.js b/frontend/src/components/collection/CollectionListUI/index.js
@@ -1,18 +1,21 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
+import classNames from 'classnames';
 import { fromJS } from 'immutable';
 import { Button, Col, Row } from 'react-bootstrap';
 
 import { stopPropagation } from 'helpers/utils';
 
+import { StandaloneRecorder } from 'containers';
+
 import HttpStatus from 'components/HttpStatus';
 import InlineEditor from 'components/InlineEditor';
 import RedirectWithStatus from 'components/RedirectWithStatus';
 import WYSIWYG from 'components/WYSIWYG';
 import { NewCollection } from 'components/siteComponents';
 import { Upload } from 'containers';
-import { LinkIcon, UploadIcon, UserIcon } from 'components/icons';
+import { LinkIcon, UploadIcon } from 'components/icons';
 
 import CollectionItem from './CollectionItem';
 import './style.scss';
@@ -87,7 +90,7 @@ class CollectionListUI extends Component {
     const userLink = user.get('display_url') && (!user.get('display_url').match(/^[a-zA-Z]+:\/\//) ? `http://${user.get('display_url')}` : user.get('display_url'));
 
 
-    if (collections.get('error')) {
+    if (collections.get('error') && !collections.get('creatingCollection')) {
       return (
         <HttpStatus>
           {collections.getIn(['error', 'error_message'])}
@@ -104,49 +107,59 @@ class CollectionListUI extends Component {
         <Helmet>
           <title>{`${displayName}'s Collections`}</title>
         </Helmet>
+        <Row className="collection-start-form">
+          <Col xs={12} sm={__DESKTOP__ ? 10 : 9} smOffset={__DESKTOP__ ? 1 : 0}>
+            <h4>New Capture</h4>
+            <StandaloneRecorder />
+          </Col>
+        </Row>
         <Row>
-          <Col xs={12} sm={3} className="collection-description">
-            <InlineEditor
-              canAdmin={canAdmin}
-              initial={displayName}
-              onSave={this.editName}
-              readOnly={isAnon || !canAdmin}
-              success={this.props.edited}>
-              <h2>{displayName}</h2>
-            </InlineEditor>
-            <p className="collection-username"><span className="glyphicon glyphicon-user right-buffer-sm" />{ userParam }</p>
-            {
-              (user.get('display_url') || canAdmin) &&
+          {
+            !__DESKTOP__ &&
+              <Col xs={12} sm={3} className="collection-description">
                 <InlineEditor
                   canAdmin={canAdmin}
-                  initial={user.get('display_url') || 'Add website...'}
-                  placeholder="Add website..."
-                  onSave={this.editURL}
+                  initial={displayName}
+                  onSave={this.editName}
                   readOnly={isAnon || !canAdmin}
                   success={this.props.edited}>
-                  <div className="user-link">
-                    <a target="_blank" onClick={stopPropagation} href={userLink}><LinkIcon />
-                      <span>{user.get('display_url') || 'Add website...'}</span>
-                    </a>
-                  </div>
+                  <h2>{displayName}</h2>
                 </InlineEditor>
-            }
-            <WYSIWYG
-              key={user.get('id')}
-              initial={user.get('desc') || ''}
-              onSave={this.updateUser}
-              placeholder="Add a description..."
-              clickToEdit
-              readOnly={isAnon || !canAdmin}
-              success={this.props.edited} />
-          </Col>
-          <Col xs={12} sm={9} className="wr-coll-meta">
+                <p className="collection-username"><span className="glyphicon glyphicon-user right-buffer-sm" />{ userParam }</p>
+                {
+                  (user.get('display_url') || canAdmin) &&
+                    <InlineEditor
+                      canAdmin={canAdmin}
+                      initial={user.get('display_url') || 'Add website...'}
+                      placeholder="Add website..."
+                      onSave={this.editURL}
+                      readOnly={isAnon || !canAdmin}
+                      success={this.props.edited}>
+                      <div className="user-link">
+                        <a target="_blank" onClick={stopPropagation} href={userLink}><LinkIcon />
+                          <span>{user.get('display_url') || 'Add website...'}</span>
+                        </a>
+                      </div>
+                    </InlineEditor>
+                }
+                <WYSIWYG
+                  key={user.get('id')}
+                  initial={user.get('desc') || ''}
+                  onSave={this.updateUser}
+                  placeholder="Add a description..."
+                  clickToEdit
+                  readOnly={isAnon || !canAdmin}
+                  success={this.props.edited} />
+              </Col>
+          }
+          <Col xs={12} sm={__DESKTOP__ ? 10 : 9} smOffset={__DESKTOP__ ? 1 : 0} className="wr-coll-meta">
 
             <Row>
-              <Col xs={12} className="collections-index-nav">
+              <Col xs={12} className={classNames('collections-index-nav', { desktop: __DESKTOP__ })}>
                 {
                   !isAnon && canAdmin &&
                     <React.Fragment>
+                      { __DESKTOP__ && <h4>My Collections</h4> }
                       <Button onClick={this.toggle} className="rounded">
                         <span className="glyphicon glyphicon-plus glyphicon-button" /> New Collection
                       </Button>

diff --git a/frontend/src/components/collection/CollectionListUI/style.scss b/frontend/src/components/collection/CollectionListUI/style.scss
@@ -8,6 +8,28 @@
     }
 }
 
+.collection-start-form {
+    margin-top: 3.5rem;
+
+    & > h4 {
+        padding-left: 1.5rem;
+    }
+
+    .start-recording-homepage > div {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    &:after {
+        content: '';
+        display: block;
+        width: 100%;
+        border: solid .1rem $black;
+        border-width: 0 0 .1rem 0;
+        padding-top: 5rem;
+    }
+}
+
 .collection-time {
     font-size:1.2rem;
     color: $gray550;
@@ -31,6 +53,20 @@ a.collection-title:hover {
 .collections-index-nav {
     margin: 1rem 0;
 
+    h4 {
+        display: inline-block;
+    }
+
+    &.desktop {
+        button {
+            float: right;
+        }
+    }
+
+    button + button {
+        margin-right: .5rem;
+    }
+
     .btn-default:hover {
         background: rgba(0,0,0,0);
     }

diff --git a/frontend/src/components/collection/ListsUI/index.js b/frontend/src/components/collection/ListsUI/index.js
@@ -235,7 +235,7 @@ class ListsUI extends Component {
                     <div className={classNames('wrapper', { editable: canAdmin })}>
                       <span className="title" title="All pages"><AllPagesIcon /> Pages ({collection.get('pages').size})</span>
                       {
-                        canAdmin &&
+                        canAdmin && !__DESKTOP__ &&
                           <VisibilityLamp
                             callback={this.toggleIndexVisibility}
                             collPublic={collection.get('public')}

diff --git a/frontend/src/components/controls/ModeSelectorUI/index.js b/frontend/src/components/controls/ModeSelectorUI/index.js
@@ -140,8 +140,8 @@ class ModeSelectorUI extends PureComponent {
 
     switch(currMode) {
       case 'live':
-        modeMessage = 'Preparing Cookies';
-        modeMarkup = <span className="btn-content"><span role="img" aria-label="Cookie icon">🍪</span><span className="hidden-xs">{ modeMessage }</span></span>;
+        modeMessage = 'Previewing';
+        modeMarkup = <span className="btn-content"><span className="preview-mode" aria-label="Preview icon" /><span className="hidden-xs">{ modeMessage }</span></span>;
         break;
       case 'record':
         modeMessage = 'Capturing';
@@ -185,21 +185,12 @@ class ModeSelectorUI extends PureComponent {
               {
                 isLive &&
                   <div className="wr-modes">
-                    <ul className={classNames('row wr-mode')} onClick={this.onStop} role="button" title="Finish preparing cookies and return to landing page">
-                      <li className="col-xs-3">
-                        <span className="wr-mode-icon" role="img" aria-label="Cookie icon">🍪</span>
-                      </li>
-                      <li className="col-xs-9">
-                        <h5>Finish Preparing Cookies</h5>
-                      </li>
-                    </ul>
-
-                    <ul className={classNames('row wr-mode')} onClick={this.onRecord} role="button" title="Stop cookie prepare mode and begin capturing">
+                    <ul className={classNames('row wr-mode')} onClick={this.onRecord} role="button" title="Stop preview mode and begin capturing">
                       <li className="col-xs-3">
                         <span className="glyphicon glyphicon-dot-sm glyphicon-recording-status wr-mode-icon" aria-hidden="true" />
                       </li>
                       <li className="col-xs-9">
-                        <h5>Finish and Start Capture</h5>
+                        <h5>Start Capture</h5>
                       </li>
                     </ul>
                   </div>

diff --git a/frontend/src/components/controls/ModeSelectorUI/style.scss b/frontend/src/components/controls/ModeSelectorUI/style.scss
@@ -4,6 +4,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    .wr-mode-message .preview-mode {
+        width: 1rem;
+        height: 1rem;
+        margin-right: .5rem;
+    }
 }
 
 
@@ -118,6 +124,15 @@
     }
 }
 
+.preview-mode {
+    display: inline-block;
+    border: solid .1rem $warning;
+    width: 1.7rem;
+    height: 1.7rem;
+    border-radius: 50%;
+}
+
+
 .wr-mode {
     position: relative;