polish edit activity ux

- add "new script" button to blank landing page - add animated spinner when loading data
monome · Sep 1, 2021 · 74eaaf4 · 74eaaf4
1 parent bff94d9
commit 74eaaf4
Show file tree

Hide file tree

Showing 8 changed files with 312 additions and 30 deletions.
diff --git a/web/package.json b/web/package.json
@@ -19,6 +19,7 @@
     "react-redux": "^6.0.0",
     "react-router": "^5.1.2",
     "react-scripts": "1.0.17",
+    "react-spinners-kit": "^1.9.1",
     "react-split-pane": "^0.1.74",
     "react-tooltip": "^3.5.1",
     "react-treebeard": "^2.1.0",

diff --git a/web/src/bound-edit-activity.js b/web/src/bound-edit-activity.js
@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { push as pushHistory } from 'connected-react-router'
+import { push as pushHistory } from 'connected-react-router';
 import EditActivity from './edit-activity';
-import { MATRON_COMPONENT } from './constants';
+import { MATRON_COMPONENT, UNTITLED_SCRIPT, USER_DATA_PATH } from './constants';
 import { nodeForResource } from './model/listing';
-import api from './api';
-import { resourceToEditPath } from './url-utils'
+import api, { DUST_CODE_RESOURCE } from './api';
+import { resourceToEditPath } from './url-utils';
 
 import {
   rootList,
@@ -21,6 +21,7 @@ import {
   toolInvoke,
   explorerActiveNode,
   explorerToggleNode,
+  explorerRevealNodeByURL,
   directoryCreate,
 } from './model/edit-actions';
 
@@ -122,11 +123,9 @@ const mapDispatchToProps = dispatch => ({
   scriptRun: resource => {
     const file = api.fileFromResource(resource);
     if (file) {
-      if (file.includes("/lib/") ||
-          file.includes("/data/") ||
-          file.includes("/audio/")) {
-        console.log("files under /lib/, /data/, and /audio/ cannot be run as a script")
-        return undefined
+      if (file.includes('/lib/') || file.includes('/data/') || file.includes('/audio/')) {
+        console.log('files under /lib/, /data/, and /audio/ cannot be run as a script');
+        return undefined;
       }
       const cmd = `norns.script.load("${file}")`;
       dispatch(replSend(MATRON_COMPONENT, cmd));
@@ -135,7 +134,7 @@ const mapDispatchToProps = dispatch => ({
     }
   },
   scriptClear: () => {
-    const cmd = "norns.script.clear()";
+    const cmd = 'norns.script.clear()';
     dispatch(replSend(MATRON_COMPONENT, cmd));
   },
   selectionEval: code => {
@@ -187,6 +186,12 @@ const mapDispatchToProps = dispatch => ({
     dispatch(toggleCategory(name));
   },
 
+  // editor
+  editorScriptNew: () => {
+    dispatch(scriptNew(DUST_CODE_RESOURCE, undefined, UNTITLED_SCRIPT, USER_DATA_PATH));
+    dispatch(explorerRevealNodeByURL(DUST_CODE_RESOURCE));
+  },
+
   // config
   editorConfig: resource => {
     dispatch(editorConfig(resource));

diff --git a/web/src/constants.js b/web/src/constants.js
@@ -1,6 +1,6 @@
 import { Set } from 'immutable';
 
-export const UNTITLED_SCRIPT = 'UNTITLED_SCRIPT';
+export const UNTITLED_SCRIPT = 'untitled.lua';
 
 export const MATRON_COMPONENT = 'matron';
 export const CRONE_COMPONENT = 'crone';

diff --git a/web/src/edit-activity.css b/web/src/edit-activity.css
@@ -28,6 +28,28 @@
     display: flex;
 }
 
+.spinner-pane {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.landing-pane {
+    color: #979797;
+    background-color: #F9F9F9;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.landing-pane > .message {
+    color: #757575;
+    font-style: italic;
+    text-transform: lowercase;
+}
+
 /* sytling for react-split-pane */
 
 .Resizer {

diff --git a/web/src/edit-activity.js b/web/src/edit-activity.js
@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import SplitPane from 'react-split-pane';
 import ReactAudioPlayer from 'react-audio-player';
+import { ImpulseSpinner } from 'react-spinners-kit';
 import Explorer from './explorer';
 import Editor from './editor';
 import ToolBar from './tool-bar';
 import IconButton from './icon-button';
 import { ICONS } from './svg-icons';
 import { commandService } from './services';
 import OS from './utils';
-import { bufferIsEditable } from './model/edit-helpers';
-import { bufferIsAudio } from './model/edit-helpers';
+import { bufferIsEditable, bufferIsAudio } from './model/edit-helpers';
 import ReplActivity from './bound-repl-activity';
 
 import './edit-activity.css';
@@ -214,7 +214,7 @@ class EditActivity extends Component {
 
   isAudio = buffer => {
     return buffer && bufferIsAudio(buffer);
-  }
+  };
 
   render() {
     const activeBuffer = this.props.activeBuffer;
@@ -263,18 +263,28 @@ class EditActivity extends Component {
 
     const listener = (
       <div className="listener-pane">
-        <ReactAudioPlayer
-          className="listener-container"
-          src={activeBuffer}
-          autoPlay
-          controls
-        />
+        <ReactAudioPlayer className="listener-container" src={activeBuffer} autoPlay controls />
       </div>
     );
 
     const loading = (
-      // TODO: this should be a loading indicator instead of a blank frame
-      <div className="spinner-pane"></div>
+      <div className="spinner-pane">
+        <ImpulseSpinner frontColor="#979797" backColor="#F1F1F1" loading />
+      </div>
+    );
+
+    const landing = (
+      <div className="landing-pane">
+        <span className="message">new script</span>
+        <IconButton
+          action={() => this.props.editorScriptNew()}
+          tooltipMessage="new script"
+          tooltipPosition="bottom"
+          icon={ICONS.plus}
+          color="hsl(0, 0%, 59%)"
+          size="24"
+        />
+      </div>
     );
 
     const sidebarSplitStyle = {
@@ -285,11 +295,15 @@ class EditActivity extends Component {
 
     const explorerStyle = {
       height: this.props.height,
-    }
+    };
 
+    // MAINT: this is ugly, ideally there would be states in the model which
+    // correspond to each pane and the whole component refactored
     let element = loading;
     if (buffer) {
       element = canListen ? listener : editor;
+    } else if (!activeBuffer) {
+      element = landing;
     }
 
     return (

diff --git a/web/src/model/edit-actions.js b/web/src/model/edit-actions.js
@@ -38,6 +38,7 @@ export const TOOL_INVOKE = 'TOOL_INVOKE';
 
 export const EXPLORER_TOGGLE_NODE = 'EXPLORER_TOGGLE_NODE';
 export const EXPLORER_ACTIVE_NODE = 'EXPLORER_ACTIVE_NODE';
+export const EXPLORER_REVEAL_NODE_BY_URL = 'EXPLORER_REVEAL_NODE_BY_URL';
 
 //
 // sync actions
@@ -172,6 +173,11 @@ export const explorerToggleNode = (node, toggled) => ({
   toggled,
 });
 
+export const explorerRevealNodeByURL = url => ({
+  type: EXPLORER_REVEAL_NODE_BY_URL,
+  url,
+});
+
 //
 // async actions
 //

diff --git a/web/src/model/edit-reducers.js b/web/src/model/edit-reducers.js
@@ -32,15 +32,14 @@ import {
   TOOL_INVOKE,
   EXPLORER_ACTIVE_NODE,
   EXPLORER_TOGGLE_NODE,
+  EXPLORER_REVEAL_NODE_BY_URL,
   scriptNew,
 } from './edit-actions';
 
-import {
-  bufferIsEditable
-} from './edit-helpers';
+import { bufferIsEditable } from './edit-helpers';
 
-import api from '../api';
-import { DUST_CODE_RESOURCE } from '../api';
+import api, { DUST_CODE_RESOURCE } from '../api';
+import { UNTITLED_SCRIPT } from '../constants';
 
 /*
 
@@ -93,7 +92,7 @@ const handleScriptNew = (action, state) => {
     }
   }
 
-  const newName = generateNodeName(siblings, action.name || 'untitled.lua');
+  const newName = generateNodeName(siblings, action.name || UNTITLED_SCRIPT);
 
   let newResource;
   if (siblingIsDir) {
@@ -336,6 +335,9 @@ const edit = (state = initialEditState, action) => {
       }
       return { ...state, expandedNodes: state.expandedNodes.delete(action.node.url) };
 
+    case EXPLORER_REVEAL_NODE_BY_URL:
+      return { ...state, expandedNodes: state.expandedNodes.add(action.url) };
+
     default:
       return state;
   }