Dashboard: rename Done to Cancel, add Save to Image Editor (#3033)

* Rename Done button to Cancel everywhere

* Add Save button to the top bar of the FileEditor

* Remove Save button from Image Editor toolbar

* fix locale

packages/@uppy/dashboard/src/components/EditorPanel.js

@@ -22,7 +22,14 @@ function EditorPanel (props) {
           type="button"
           onClick={props.hideAllPanels}
         >
-          {props.i18n('done')}
+          {props.i18n('cancel')}
+        </button>
+        <button
+          className="uppy-DashboardContent-save"
+          type="button"
+          onClick={props.saveFileEditor}
+        >
+          {props.i18n('save')}
         </button>
       </div>
       <div className="uppy-DashboardContent-panelBody">

packages/@uppy/dashboard/src/components/FileCard/index.js

@@ -113,9 +113,9 @@ class FileCard extends Component {
             className="uppy-DashboardContent-back"
             type="button"
             title={this.props.i18n('finishEditingFile')}
-            onClick={this.handleSave}
+            onClick={this.handleCancel}
           >
-            {this.props.i18n('done')}
+            {this.props.i18n('cancel')}
           </button>
         </div>
 

packages/@uppy/dashboard/src/components/PickerPanelContent.js

@@ -23,7 +23,7 @@ function PickerPanelContent (props) {
           type="button"
           onClick={props.hideAllPanels}
         >
-          {props.i18n('done')}
+          {props.i18n('cancel')}
         </button>
       </div>
       <div className="uppy-DashboardContent-panelBody">

packages/@uppy/dashboard/src/index.js

@@ -61,13 +61,13 @@ module.exports = class Dashboard extends Plugin {
         copyLinkToClipboardFallback: 'Copy the URL below',
         copyLink: 'Copy link',
         fileSource: 'File source: %{name}',
-        done: 'Done',
         back: 'Back',
         addMore: 'Add more',
         removeFile: 'Remove file',
         editFile: 'Edit file',
         editing: 'Editing %{file}',
         finishEditingFile: 'Finish editing file',
+        save: 'Save',
         saveChanges: 'Save changes',
         cancel: 'Cancel',
         myDevice: 'My Device',
@@ -282,6 +282,17 @@ module.exports = class Dashboard extends Plugin {
     })
   }
 
+  saveFileEditor = () => {
+    const { targets } = this.getPluginState()
+    const editors = this._getEditors(targets)
+
+    editors.forEach((editor) => {
+      this.uppy.getPlugin(editor.id).save()
+    })
+
+    this.hideAllPanels()
+  }
+
   openModal = () => {
     const { promise, resolve } = createPromise()
     // save scroll position
@@ -959,6 +970,7 @@ module.exports = class Dashboard extends Plugin {
       direction: this.opts.direction,
       activePickerPanel: pluginState.activePickerPanel,
       showFileEditor: pluginState.showFileEditor,
+      saveFileEditor: this.saveFileEditor,
       disableAllFocusableElements: this.disableAllFocusableElements,
       animateOpenClose: this.opts.animateOpenClose,
       isClosing: pluginState.isClosing,

packages/@uppy/dashboard/src/style.scss

@@ -549,7 +549,8 @@
     }
   }
 
-  .uppy-DashboardContent-back {
+  .uppy-DashboardContent-back,
+  .uppy-DashboardContent-save {
     @include reset-button;
     @include highlight-focus;
     border-radius: 3px;

packages/@uppy/image-editor/src/Editor.js

@@ -8,11 +8,14 @@ module.exports = class Editor extends Component {
   }
 
   componentDidMount () {
+    const { opts, storeCropperInstance } = this.props
     this.cropper = new Cropper(
       this.imgElement,
-      this.props.opts.cropperOptions
+      opts.cropperOptions
     )
-    if (this.props.opts.actions.granularRotate) {
+    storeCropperInstance(this.cropper)
+
+    if (opts.actions.granularRotate) {
       this.imgElement.addEventListener('crop', (ev) => {
         const rotationAngle = ev.detail.rotate
         this.setState({
@@ -28,15 +31,6 @@ module.exports = class Editor extends Component {
     this.cropper.destroy()
   }
 
-  save = () => {
-    this.cropper.getCroppedCanvas()
-      .toBlob(
-        (blob) => this.props.save(blob),
-        this.props.currentImage.type,
-        this.props.opts.quality
-      )
-  }
-
   renderRevert () {
     return (
       <button
@@ -237,20 +231,6 @@ module.exports = class Editor extends Component {
         </div>
 
         <div className="uppy-ImageCropper-controls">
-          <button
-            type="button"
-            className="uppy-u-reset uppy-c-btn"
-            aria-label={i18n('save')}
-            data-microtip-position="top"
-            role="tooltip"
-            onClick={() => this.save()}
-          >
-            <svg aria-hidden="true" className="uppy-c-icon" width="24" height="24" viewBox="0 0 24 24">
-              <path d="M0 0h24v24H0z" fill="none" />
-              <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-            </svg>
-          </button>
-
           {actions.revert && this.renderRevert()}
           {actions.rotate && this.renderRotate()}
           {actions.granularRotate && this.renderGranularRotate()}

packages/@uppy/image-editor/src/index.js

@@ -14,7 +14,6 @@ module.exports = class ImageEditor extends Plugin {
 
     this.defaultLocale = {
       strings: {
-        save: 'Save',
         revert: 'Revert',
         rotate: 'Rotate',
         zoomIn: 'Zoom in',
@@ -91,21 +90,35 @@ module.exports = class ImageEditor extends Plugin {
     return false
   }
 
-  save = (blob) => {
+  save = () => {
+    const saveBlobCallback = (blob) => {
+      const { currentImage } = this.getPluginState()
+
+      this.uppy.setFileState(currentImage.id, {
+        data: blob,
+        size: blob.size,
+        preview: null,
+      })
+
+      const updatedFile = this.uppy.getFile(currentImage.id)
+      this.uppy.emit('thumbnail:request', updatedFile)
+      this.setPluginState({
+        currentImage: updatedFile,
+      })
+      this.uppy.emit('file-editor:complete', updatedFile)
+    }
+
     const { currentImage } = this.getPluginState()
 
-    this.uppy.setFileState(currentImage.id, {
-      data: blob,
-      size: blob.size,
-      preview: null,
-    })
+    this.cropper.getCroppedCanvas().toBlob(
+      saveBlobCallback,
+      currentImage.type,
+      this.opts.quality
+    )
+  }
 
-    const updatedFile = this.uppy.getFile(currentImage.id)
-    this.uppy.emit('thumbnail:request', updatedFile)
-    this.setPluginState({
-      currentImage: updatedFile,
-    })
-    this.uppy.emit('file-editor:complete', updatedFile)
+  storeCropperInstance = (cropper) => {
+    this.cropper = cropper
   }
 
   selectFile = (file) => {
@@ -139,6 +152,7 @@ module.exports = class ImageEditor extends Plugin {
     return (
       <Editor
         currentImage={currentImage}
+        storeCropperInstance={this.storeCropperInstance}
         save={this.save}
         opts={this.opts}
         i18n={this.i18n}

packages/@uppy/screen-capture/src/index.js

@@ -40,7 +40,7 @@ module.exports = class ScreenCapture extends Plugin {
       strings: {
         startCapturing: 'Begin screen capturing',
         stopCapturing: 'Stop screen capturing',
-        submitRecordedFile: 'Submit captured video',
+        submitRecordedFile: 'Submit recorded file',
         streamActive: 'Stream active',
         streamPassive: 'Stream passive',
         micDisabled: 'Microphone access denied by user',