Merge pull request #884 from ibrand/reset_button

Reset button

Author: outoftime

.eslintrc

@@ -50,7 +50,7 @@
         ],
         "complexity": [
           2,
-          {"max": 26}
+          {"max": 27}
         ],
         "computed-property-spacing": [
             2,

src/actions/index.js

@@ -24,6 +24,7 @@ import {
   stopDragColumnDivider,
   notificationTriggered,
   userDismissedNotification,
+  refreshPreview,
 } from './ui';
 
 import {
@@ -77,4 +78,5 @@ export {
   gistExportDisplayed,
   gistExportNotDisplayed,
   applicationLoaded,
+  refreshPreview,
 };

src/actions/ui.js

@@ -37,3 +37,8 @@ export const userDismissedNotification = createAction(
   'USER_DISMISSED_NOTIFICATION',
   type => ({type}),
 );
+
+export const refreshPreview = createAction(
+  'REFRESH_PREVIEW',
+  timestamp => ({timestamp}),
+);

src/components/Output.jsx

@@ -25,8 +25,10 @@ class Output extends React.Component {
     return (
       <Preview
         isValid={this.props.validationState === 'passed'}
+        lastRefreshTimestamp={this.props.lastRefreshTimestamp}
         project={this.props.project}
         onClearRuntimeErrors={this.props.onClearRuntimeErrors}
+        onRefreshClick={this.props.onRefreshClick}
         onRuntimeError={this.props.onRuntimeError}
       />
     );
@@ -99,6 +101,7 @@ Output.propTypes = {
   errors: PropTypes.object.isRequired,
   isDraggingColumnDivider: PropTypes.bool.isRequired,
   isHidden: PropTypes.bool.isRequired,
+  lastRefreshTimestamp: PropTypes.number,
   project: PropTypes.object,
   runtimeErrors: PropTypes.array.isRequired,
   style: PropTypes.object.isRequired,
@@ -107,10 +110,12 @@ Output.propTypes = {
   onErrorClick: PropTypes.func.isRequired,
   onHide: PropTypes.func.isRequired,
   onRef: PropTypes.func.isRequired,
+  onRefreshClick: PropTypes.func.isRequired,
   onRuntimeError: PropTypes.func.isRequired,
 };
 
 Output.defaultProps = {
+  lastRefreshTimestamp: null,
   project: null,
 };
 

src/components/Preview.jsx

@@ -18,7 +18,6 @@ class Preview extends React.Component {
     if (!this.props.isValid) {
       return '';
     }
-
     const project = this.props.project;
 
     if (project === undefined) {
@@ -32,6 +31,7 @@ class Preview extends React.Component {
         propagateErrorsToParent: isLivePreview,
         breakLoops: isLivePreview,
         nonBlockingAlertsAndPrompts: isLivePreview,
+        lastRefreshTimestamp: isLivePreview && this.props.lastRefreshTimestamp,
       },
     );
   }
@@ -58,10 +58,14 @@ class Preview extends React.Component {
           {u__hidden: !this.props.isValid},
         )}
       >
-        <div
-          className="preview__pop-out-button"
+        <span
+          className="preview__button preview__button_reset"
+          onClick={this.props.onRefreshClick}
+        >&#xf021;</span>
+        <span
+          className="preview__button preview__button_pop-out"
           onClick={this._handlePopOutClick}
-        />
+        >&#xf08e;</span>
         <PreviewFrame
           src={this._generateDocument(true)}
           onFrameWillRefresh={this.props.onClearRuntimeErrors}
@@ -74,9 +78,15 @@ class Preview extends React.Component {
 
 Preview.propTypes = {
   isValid: PropTypes.bool.isRequired,
+  lastRefreshTimestamp: PropTypes.number,
   project: PropTypes.object.isRequired,
   onClearRuntimeErrors: PropTypes.func.isRequired,
+  onRefreshClick: PropTypes.func.isRequired,
   onRuntimeError: PropTypes.func.isRequired,
 };
 
+Preview.defaultProps = {
+  lastRefreshTimestamp: null,
+};
+
 export default Preview;

src/components/Workspace.jsx

@@ -47,6 +47,7 @@ import {
   userDismissedNotification,
   exportGist,
   applicationLoaded,
+  refreshPreview,
 } from '../actions';
 
 import {getCurrentProject, isPristineProject} from '../util/projectUtils';
@@ -109,6 +110,7 @@ class Workspace extends React.Component {
       '_handleExportGist',
       '_storeDividerRef',
       '_storeColumnRef',
+      '_handleRefreshClick',
     );
     this.columnRefs = [null, null];
   }
@@ -203,6 +205,10 @@ class Workspace extends React.Component {
     this.props.dispatch(clearRuntimeErrors());
   }
 
+  _handleRefreshClick() {
+    this.props.dispatch(refreshPreview(Date.now()));
+  }
+
   _getOverallValidationState() {
     const errorStates = map(values(this.props.errors), 'state');
 
@@ -234,6 +240,7 @@ class Workspace extends React.Component {
         errors={errors}
         isDraggingColumnDivider={isDraggingColumnDivider}
         isHidden={includes(hiddenUIComponents, 'output')}
+        lastRefreshTimestamp={this.props.ui.lastRefreshTimestamp}
         project={currentProject}
         runtimeErrors={runtimeErrors}
         style={{flex: rowsFlex[1]}}
@@ -245,6 +252,7 @@ class Workspace extends React.Component {
             'output')
         }
         onRef={partial(this._storeColumnRef, 1)}
+        onRefreshClick={this._handleRefreshClick}
         onRuntimeError={this._handleRuntimeError}
       />
     );

src/css/application.css

@@ -501,22 +501,30 @@ body {
   flex: 1 0 100%;
 }
 
-.preview__pop-out-button {
-  background: url(../images/popout.png);
+.preview__button {
+  font-family: 'FontAwesome';
   width: 16px;
   height: 18px;
   position: absolute;
-  right: 10px;
-  top: 10px;
   cursor: pointer;
   opacity: 0.25;
   z-index: 1;
 }
 
-.preview__pop-out-button:hover {
+.preview__button:hover {
   opacity: 0.5;
 }
 
+.preview__button_pop-out {
+  right: 10px;
+  top: 11px;
+}
+
+.preview__button_reset {
+  right: 35px;
+  top: 10px;
+}
+
 /** @define error-list */
 
 .error-list {

src/reducers/ui.js

@@ -25,7 +25,8 @@ const defaultState = new Immutable.Map().
     new Immutable.Map().
       set('isOpen', false).
       set('activeSubmenu', null),
-  );
+  ).
+  set('lastRefreshTimestamp', null);
 
 function addNotification(state, type, severity, payload = {}) {
   return state.update('notifications', notifications =>
@@ -161,6 +162,9 @@ export default function ui(stateIn, action) {
       }
       return addNotification(state, 'gist-export-error', 'error');
 
+    case 'REFRESH_PREVIEW':
+      return state.set('lastRefreshTimestamp', action.payload.timestamp);
+
     default:
       return state;
   }

src/util/generatePreview.js

@@ -82,6 +82,9 @@ class PreviewGenerator {
     if (options.nonBlockingAlertsAndPrompts) {
       this._addAlertAndPromptHandling();
     }
+    if (options.lastRefreshTimestamp) {
+      this._addRefreshTimestamp(options.lastRefreshTimestamp);
+    }
 
     this._addJavascript(pick(options, 'breakLoops'));
   }
@@ -121,6 +124,12 @@ class PreviewGenerator {
     this._previewHead.appendChild(styleTag);
   }
 
+  _addRefreshTimestamp(timestamp) {
+    const dateString = `Last refresh on: ${String(new Date(timestamp))}`;
+    const comment = this.previewDocument.createComment(dateString);
+    this.previewBody.append(comment);
+  }
+
   _addJavascript({breakLoops = false}) {
     let source = `\n${sourceDelimiter}\n${this._project.sources.javascript}`;
     if (breakLoops) {
@@ -129,7 +138,6 @@ class PreviewGenerator {
     const scriptTag = this.previewDocument.createElement('script');
     scriptTag.innerHTML = source;
     this.previewBody.appendChild(scriptTag);
-
     return this.previewDocument.documentElement.outerHTML;
   }
 

test/unit/reducers/ui.js

@@ -17,6 +17,7 @@ import {
   editorFocusedRequestedLine,
   notificationTriggered,
   userDismissedNotification,
+  refreshPreview,
 } from '../../../src/actions/ui';
 import {
   gistExportNotDisplayed,
@@ -36,6 +37,7 @@ const initialState = Immutable.fromJS({
     isOpen: false,
     activeSubmenu: null,
   },
+  lastRefreshTimestamp: null,
 });
 
 function withNotification(type, severity, payload = {}) {
@@ -237,3 +239,10 @@ test('userDismissedNotification', reducerTest(
   partial(userDismissedNotification, 'some-error'),
   initialState,
 ));
+
+test('refreshPreview', reducerTest(
+  reducer,
+  initialState,
+  partial(refreshPreview, 1),
+  initialState.set('lastRefreshTimestamp', 1),
+));