Hotfix/ux review after uat (#174)

* removed colour settings menu as requested from ux. * first and last times are not getting out of bounds * zoom control resets x as well * Default placeholders disappear when you click in the editable fields * removed delete button as per requested in the UX review * invalid current time labels removed as UX requested
digirati-co-uk · Oct 23, 2018 · 5b49888 · 5b49888
1 parent 7e3ac2d
commit 5b49888
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 27 deletions.
diff --git a/src/components/AudioImporter/AudioImporter.ManifestTemplate.js b/src/components/AudioImporter/AudioImporter.ManifestTemplate.js
@@ -3,10 +3,10 @@ import { getProjectSettings } from '../../utils/iiifSaver';
 
 const createNewManifest = (manifestDomain, audioUri, duration) => ({
   label: {
-    en: ['Unnamed manifest'],
+    en: [''],
   },
   summary: {
-    en: ['Description of manifest'],
+    en: [''],
   },
   type: 'Manifest',
   id: `${manifestDomain}/manifest`,
@@ -45,7 +45,7 @@ const createNewManifest = (manifestDomain, audioUri, duration) => ({
     {
       id: `${manifestDomain}/range/r0`,
       type: 'Range',
-      label: { en: ['Unnamed range'] },
+      label: { en: [''] },
       items: [
         {
           id: `${manifestDomain}/canvas/c1#t=0,${duration}`,

diff --git a/src/components/CurrentTimeIndicator/CurrentTimeIndicator.js b/src/components/CurrentTimeIndicator/CurrentTimeIndicator.js
@@ -35,7 +35,7 @@ class CurrentTimeIndicator extends Component {
   validateProps(props) {
     if (props.currentTime > props.runtime) {
       return this.setState({
-        error: 'Invalid time',
+        currentFormattedTime: formatDate(new Date(0), 'hh:mm:ss'),
       });
     }
 
@@ -73,7 +73,7 @@ class CurrentTimeIndicator extends Component {
     const date = new Date(time);
     if (date.toString() === 'Invalid Date') {
       return this.setState({
-        error: 'Invalid current time',
+        currentFormattedTime: formatDate(new Date(0), 'hh:mm:ss'),
       });
     }
 

diff --git a/src/components/MetadataDisplay/MetadataDisplay.js b/src/components/MetadataDisplay/MetadataDisplay.js
@@ -28,7 +28,7 @@ const MetadataDisplay = props => (
       >
         <Grid item>
           <Typography variant="title" component="h3">
-            {props.label}
+            {props.label || 'Unnamed range'}
           </Typography>
         </Grid>
         <Grid>
@@ -44,7 +44,7 @@ const MetadataDisplay = props => (
           whiteSpace: 'pre-line',
         }}
       >
-        {props.summary}
+        {props.summary || 'Range description'}
       </Typography>
     </CardContent>
   </Card>

diff --git a/src/components/MetadataEditor/MetadataEditor.js b/src/components/MetadataEditor/MetadataEditor.js
@@ -40,7 +40,7 @@ class MetadataEditor extends Component {
 
   static defaultProps = {
     isNew: true,
-    label: 'Unnamed Range',
+    label: '',
     summary: '',
     colour: 0,
   };
@@ -110,7 +110,7 @@ class MetadataEditor extends Component {
           InputLabelProps={{
             shrink: true,
           }}
-          placeholder="Placeholder"
+          placeholder="Unnamed range"
           fullWidth
           margin="normal"
           value={label}
@@ -123,7 +123,7 @@ class MetadataEditor extends Component {
           InputLabelProps={{
             shrink: true,
           }}
-          placeholder="Placeholder"
+          placeholder="Range description"
           fullWidth
           multiline={true}
           margin="normal"
@@ -176,9 +176,9 @@ class MetadataEditor extends Component {
               flex: 1,
             }}
           >
-            <Button disabled={!onDelete} onClick={onDelete}>
+            {/* <Button disabled={!onDelete} onClick={onDelete}>
               <Delete /> Delete
-            </Button>
+            </Button> */}
             <Button onClick={onCancel}>Cancel</Button>
             <PrimaryButton disabled={!this.props.onSave} onClick={this.onSave}>
               Save

diff --git a/src/components/ProjectMetadataDisplay/ProjectMetadataDisplay.js b/src/components/ProjectMetadataDisplay/ProjectMetadataDisplay.js
@@ -13,7 +13,7 @@ const ProjectMetadataDisplay = props => (
     >
       <Grid item xs={10}>
         <Typography variant="title" component="h3">
-          {props.manifestLabel}
+          {props.manifestLabel || 'Unnamed manifest'}
         </Typography>
       </Grid>
       <Grid item xs={2}>
@@ -29,7 +29,7 @@ const ProjectMetadataDisplay = props => (
         whiteSpace: 'pre-line',
       }}
     >
-      {props.manifestSummary}
+      {props.manifestSummary || 'Description of manifest'}
     </Typography>
     <hr />
     <Typography variant="body1" component="p">

diff --git a/src/components/ProjectMetadataEditor/ProjectMetadataEditor.js b/src/components/ProjectMetadataEditor/ProjectMetadataEditor.js
@@ -55,7 +55,7 @@ class ProjectMetadataEditor extends Component {
           InputLabelProps={{
             shrink: true,
           }}
-          placeholder="Placeholder"
+          placeholder="Unnamed manifest"
           fullWidth
           margin="normal"
           value={manifestLabel}
@@ -68,7 +68,7 @@ class ProjectMetadataEditor extends Component {
           InputLabelProps={{
             shrink: true,
           }}
-          placeholder="Placeholder"
+          placeholder="Description of manifest"
           fullWidth
           multiline={true}
           margin="normal"

diff --git a/src/components/SettingsPopoup/SettingsPopup.js b/src/components/SettingsPopoup/SettingsPopup.js
@@ -199,14 +199,14 @@ export default class SettingsPopup extends React.Component {
                       </FormGroup>
                     </FormControl>
                   </Grid>
-                  <Grid item>
+                  {/* TODO: phase 2... <Grid item>
                     <FormControl component="fieldset">
                       <FormLabel component="legend">
                         Bubble Level Colours
                       </FormLabel>
                       <FormGroup>TODO: Colour theme editor</FormGroup>
                     </FormControl>
-                  </Grid>
+                  </Grid> */}
                   <Grid item>
                     <FormControl component="fieldset">
                       <FormLabel component="legend">Audio Settings</FormLabel>

diff --git a/src/components/TimelineScrubber/TimelineScrubber.js b/src/components/TimelineScrubber/TimelineScrubber.js
@@ -102,7 +102,17 @@ class TimelineScrubber extends Component {
             x={this.timeToPercent(timePoint)}
           >
             {timePoint === timePoints[selectedPoint] || showTimes ? (
-              <span className="timeline-marker__tooltip">
+              <span
+                className="timeline-marker__tooltip"
+                style={{
+                  transform:
+                    timePointIndex === 0
+                      ? 'translate(0)'
+                      : timePointIndex === timePoints.length - 1
+                        ? 'translate(-100%)'
+                        : 'translate(-50%)',
+                }}
+              >
                 {this.timeToLabel(timePoint)}
               </span>
             ) : (

diff --git a/src/constants/range.js b/src/constants/range.js
@@ -7,13 +7,15 @@ export const RANGE = {
   DEPTH: 'depth',
   IS_SELECTED: 'isSelected',
 };
+
 export const DEFAULT_COLOURS = [
   '#A63993',
   '#7D3DB0',
   '#3E3D99',
   '#417AB0',
   '#40A6A2',
 ];
+
 export const DEFAULT_RANGES_STATE = {
   'id-0': {
     id: 'id-0',

diff --git a/src/containers/BubbleEditor/BubbleEditor.js b/src/containers/BubbleEditor/BubbleEditor.js
@@ -18,6 +18,7 @@ import {
 
 import { RANGE } from '../../constants/range';
 import { PROJECT } from '../../constants/project';
+import { VIEWSTATE } from '../../constants/viewState';
 import { selectRange, splitRangeAt, movePoint } from '../../actions/range';
 
 const isOSX = navigator.userAgent.indexOf('Mac OS X') !== -1;
@@ -34,7 +35,7 @@ class BubbleEditor extends React.Component {
       startX: 0,
       deltaX: 0,
       viewportX: 0,
-      viewportStartX: 0,
+      viewportStartX: -1,
     };
   }
 
@@ -164,25 +165,44 @@ class BubbleEditor extends React.Component {
   panEnd = ev => {
     document.body.removeEventListener('mousemove', this.panMove);
     document.body.removeEventListener('mouseup', this.panEnd);
+    if (this.state.viewportStartX !== -1) {
+      this.props.panToPosition(this.state.viewportX);
+    }
     this.setState({
       selectedPoint: -1,
-      viewportStartX: 0,
+      viewportStartX: -1,
     });
   };
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.x !== this.props.x) {
+      this.setState({
+        viewportX: nextProps.x,
+        viewportStartX: -1,
+      });
+    }
+  }
+
   render() {
     const _points = this.props.points;
     const {
       runTime,
       currentTime,
       zoom,
+      x,
       onUpdateTime,
       splitRange,
       bubbleHeight,
       bubbleStyle,
       blackAndWhiteMode,
     } = this.props;
-    const { dimensions, selectedPoint, deltaX, viewportX } = this.state;
+    const {
+      dimensions,
+      selectedPoint,
+      deltaX,
+      viewportX,
+      viewportStartX,
+    } = this.state;
 
     const timePoints = this.getTimePoints();
 
@@ -231,7 +251,7 @@ class BubbleEditor extends React.Component {
                   points={_points}
                   width={this.state.dimensions.width}
                   height={200}
-                  x={viewportX}
+                  x={viewportStartX !== -1 ? viewportX : x}
                   zoom={zoom}
                   bubbleHeight={bubbleHeight}
                   shape={bubbleStyle}
@@ -257,7 +277,7 @@ class BubbleEditor extends React.Component {
                   runTime={runTime}
                   currentTime={currentTime}
                   zoom={zoom}
-                  x={viewportX}
+                  x={viewportStartX !== -1 ? viewportX : x}
                   width={this.state.dimensions.width}
                   timePoints={timePoints}
                   onUpdateTime={onUpdateTime}
@@ -281,10 +301,11 @@ class BubbleEditor extends React.Component {
 }
 
 const mapStateProps = state => ({
-  currentTime: state.viewState.currentTime,
-  runTime: state.viewState.runTime,
+  currentTime: state.viewState[VIEWSTATE.CURRENT_TIME],
+  runTime: state.viewState[VIEWSTATE.RUNTIME],
   points: state.range,
-  zoom: state.viewState.zoom,
+  zoom: state.viewState[VIEWSTATE.ZOOM],
+  x: state.viewState[VIEWSTATE.X],
   bubbleHeight: state.project[PROJECT.BUBBLE_HEIGHT],
   bubbleStyle: state.project[PROJECT.BUBBLE_STYLE],
   showTimes: state.project[PROJECT.SHOW_TIMES],

diff --git a/src/reducers/viewState.js b/src/reducers/viewState.js
@@ -69,6 +69,9 @@ const viewState = (state = DEFAULT_VIEWSTATE_STATE, action) => {
         [VIEWSTATE.ZOOM]: {
           $set: 1.0,
         },
+        [VIEWSTATE.X]: {
+          $set: 0.0,
+        },
       });
     case PAN_TO_POSITION:
       return update(state, {