Download Item Removal Confirmation

Fixes #2604

app/renderer/components/downloadItem.js

@@ -21,6 +21,8 @@ class DownloadItem extends ImmutableComponent {
     this.onResumeDownload = this.onDownloadActionPerformed.bind(this, RESUME)
     this.onCancelDownload = this.onDownloadActionPerformed.bind(this, CANCEL)
     this.onClearDownload = this.onClearDownload.bind(this)
+    this.onShowDeleteConfirmation = this.onShowDeleteConfirmation.bind(this)
+    this.onHideDeleteConfirmation = this.onHideDeleteConfirmation.bind(this)
     this.onDeleteDownload = this.onDeleteDownload.bind(this)
     this.onRedownload = this.onRedownload.bind(this)
     this.onCopyLinkToClipboard = this.onCopyLinkToClipboard.bind(this)
@@ -34,6 +36,12 @@ class DownloadItem extends ImmutableComponent {
   onClearDownload () {
     appActions.downloadCleared(this.props.downloadId)
   }
+  onShowDeleteConfirmation () {
+    appActions.showDownloadDeleteConfirmation()
+  }
+  onHideDeleteConfirmation () {
+    appActions.hideDownloadDeleteConfirmation()
+  }
   onDeleteDownload () {
     appActions.downloadDeleted(this.props.downloadId)
   }
@@ -74,10 +82,17 @@ class DownloadItem extends ImmutableComponent {
     return <span
       onContextMenu={contextMenus.onDownloadsToolbarContextMenu.bind(null, this.props.downloadId, this.props.download)}
       onDoubleClick={this.onOpenDownload}
+      onMouseLeave={this.onHideDeleteConfirmation}
       className={cx({
         downloadItem: true,
+        deleteConfirmationVisible: this.props.downloadDeleteConfirmationVisible,
         [this.props.download.get('state')]: true
       })}>
+      {
+        this.props.downloadDeleteConfirmationVisible
+        ? <div className='deleteConfirmation'>Delete?<Button l10nId='ok' className='primaryButton confirmDeleteButton' onClick={this.onDeleteDownload} /></div>
+        : null
+      }
       <div className='downloadActions'>
         {
           downloadUtil.shouldAllowPause(this.props.download)
@@ -111,7 +126,7 @@ class DownloadItem extends ImmutableComponent {
         }
         {
           downloadUtil.shouldAllowDelete(this.props.download)
-          ? <Button className='deleteButton' l10nId='downloadDelete' iconClass='fa-trash-o' onClick={this.onDeleteDownload} />
+          ? <Button className='deleteButton' l10nId='downloadDelete' iconClass='fa-trash-o' onClick={this.onShowDeleteConfirmation} />
           : null
         }
         {

app/renderer/components/downloadsBar.js

@@ -35,6 +35,7 @@ class DownloadsBar extends ImmutableComponent {
             .map((download, downloadId) =>
               <DownloadItem download={download}
                 windowWidth={this.props.windowWidth}
+                downloadDeleteConfirmationVisible={this.props.downloadDeleteConfirmationVisible}
                 downloadId={downloadId}
                 downloadsSize={this.props.downloads.size} />)
         }

docs/appActions.md

@@ -620,6 +620,18 @@ Dispatches a message when a download is being redownloaded
 
 
 
+### showDownloadDeleteConfirmation() 
+
+Shows delete confirmation bar in download item panel
+
+
+
+### hideDownloadDeleteConfirmation() 
+
+Hides delete confirmation bar in download item panel
+
+
+
 ### clipboardTextCopied(text) 
 
 Dispatches a message when text is updated to the clipboard

js/actions/appActions.js

@@ -767,6 +767,24 @@ const appActions = {
     })
   },
 
+  /**
+   * Shows delete confirmation bar in download item panel
+   */
+  showDownloadDeleteConfirmation: function () {
+    AppDispatcher.dispatch({
+      actionType: appConstants.APP_SHOW_DOWNLOAD_DELETE_CONFIRMATION
+    })
+  },
+
+  /**
+   * Hides delete confirmation bar in download item panel
+   */
+  hideDownloadDeleteConfirmation: function () {
+    AppDispatcher.dispatch({
+      actionType: appConstants.APP_HIDE_DOWNLOAD_DELETE_CONFIRMATION
+    })
+  },
+
   /**
    * Dispatches a message when text is updated to the clipboard
    * @param {string} text - clipboard text which is copied

js/components/main.js

@@ -1297,6 +1297,7 @@ class Main extends ImmutableComponent {
         this.props.windowState.getIn(['ui', 'downloadsToolbar', 'isVisible']) && this.props.appState.get('downloads') && this.props.appState.get('downloads').size > 0
         ? <DownloadsBar
           windowWidth={window.innerWidth}
+          downloadDeleteConfirmationVisible={this.props.appState.get('downloadDeleteConfirmationVisible')}
           downloads={this.props.appState.get('downloads')} />
         : null
       }

js/constants/appConstants.js

@@ -78,6 +78,8 @@ const appConstants = {
   APP_DOWNLOAD_DELETED: _,
   APP_DOWNLOAD_CLEARED: _,
   APP_DOWNLOAD_REDOWNLOADED: _,
+  APP_SHOW_DOWNLOAD_DELETE_CONFIRMATION: _,
+  APP_HIDE_DOWNLOAD_DELETE_CONFIRMATION: _,
   APP_ALLOW_FLASH_ONCE: _,
   APP_ALLOW_FLASH_ALWAYS: _,
   APP_FLASH_PERMISSION_REQUESTED: _,

js/stores/appStore.js

@@ -833,6 +833,12 @@ const handleAppAction = (action) => {
       const pdf = require('../../app/pdf')
       appState = pdf.renderUrlToPdf(appState, action)
       break
+    case appConstants.APP_SHOW_DOWNLOAD_DELETE_CONFIRMATION:
+      appState = appState.set('downloadDeleteConfirmationVisible', true)
+      break
+    case appConstants.APP_HIDE_DOWNLOAD_DELETE_CONFIRMATION:
+      appState = appState.set('downloadDeleteConfirmationVisible', false)
+      break
     default:
   }
 

less/downloadBar.less

@@ -60,6 +60,10 @@
         .downloadActions {
           display: none;
         }
+
+        .deleteConfirmation {
+          display: none;
+        }
       }
 
       &.paused {
@@ -75,6 +79,11 @@
         }
       }
 
+      &.deleteConfirmationVisible:hover {
+        height: 105px;
+        top: -67px;
+      }
+
       .downloadProgress {
         background-color: @highlightBlue;
         left: 0;
@@ -125,6 +134,22 @@
           }
         }
       }
+
+      .deleteConfirmation {
+        line-height: 2;
+        border-bottom: 1px solid #CCC;
+        padding: 5px 0;
+        margin-bottom: auto 0 10px 0;
+        font-size: 12px;
+
+        .confirmDeleteButton {
+          font-weight: normal;
+          padding: 1px;
+          min-width: 50px;
+          float: right;
+          margin-right: -5px;
+        }
+      }
     }
   }
 
@@ -150,5 +175,3 @@
     }
   }
 }
-
-

test/unit/app/renderer/downloadItemTest.js

@@ -25,9 +25,14 @@ const newDownload = (state) => Immutable.fromJS({
   url: downloadUrl,
   totalBytes: 104729,
   receivedBytes: 96931,
+  downloadDeleteConfirmationVisible: false,
   state
 })
 
+// const props = Immutable.fromJS({
+//   downloadDeleteConfirmationVisible: false
+// })
+
 describe('downloadItem component', function () {
   before(function () {
     mockery.enable({
@@ -48,7 +53,7 @@ describe('downloadItem component', function () {
       before(function () {
         this.downloadId = uuid.v4()
         this.download = newDownload(state)
-        this.result = mount(<DownloadItem downloadId={this.downloadId} download={newDownload(state)} />)
+        this.result = mount(<DownloadItem downloadId={this.downloadId} download={this.download} downloadDeleteConfirmationVisible={this.download.downloadDeleteConfirmationVisible} />)
       })
 
       const shouldProgressBarExist = [downloadStates.IN_PROGRESS, downloadStates.PAUSED].includes(state)
@@ -115,9 +120,14 @@ describe('downloadItem component', function () {
 
       testButton('.deleteButton', [downloadStates.CANCELLED, downloadStates.INTERRUPTED, downloadStates.COMPLETED], function (button) {
         const spy = sinon.spy(appActions, 'downloadDeleted')
+        const buttonVisibilitySpy = sinon.spy(appActions, 'showDownloadDeleteConfirmation')
+        assert.equal(this.result.find('.confirmDeleteButton').length, 0)
         button.simulate('click')
+        assert(buttonVisibilitySpy.called)
+        this.result.find('.confirmDeleteButton').simulate('click')
         assert(spy.withArgs(this.downloadId).calledOnce)
         appActions.downloadDeleted.restore()
+        appActions.showDownloadDeleteConfirmation.restore()
       })
     })
   })