From 4d5f6b257570f17eb0cae09240769aae45e489f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Budzy=C5=84ski?= <michal@virtualdesign.pl>
Date: Sat, 4 Feb 2017 15:37:31 +0100
Subject: [PATCH] Download Item Removal Confirmation Fixes #2604

---
 app/renderer/components/downloadItem.js | 17 +++++++++++++++-
 less/downloadBar.less                   | 26 +++++++++++++++++++++----
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/app/renderer/components/downloadItem.js b/app/renderer/components/downloadItem.js
index 9d3e948bca9..f4b026d21b3 100644
--- a/app/renderer/components/downloadItem.js
+++ b/app/renderer/components/downloadItem.js
@@ -21,9 +21,13 @@ 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.onDeleteDownload = this.onDeleteDownload.bind(this)
     this.onRedownload = this.onRedownload.bind(this)
     this.onCopyLinkToClipboard = this.onCopyLinkToClipboard.bind(this)
+    this.state = {
+      deleteConfirmationVisible: false
+    }
   }
   onRevealDownload () {
     appActions.downloadRevealed(this.props.downloadId)
@@ -34,6 +38,12 @@ class DownloadItem extends ImmutableComponent {
   onClearDownload () {
     appActions.downloadCleared(this.props.downloadId)
   }
+  onShowDeleteConfirmation () {
+    console.log('no hej', this.state)
+    this.setState({
+      deleteConfirmationVisible: true
+    })
+  }
   onDeleteDownload () {
     appActions.downloadDeleted(this.props.downloadId)
   }
@@ -78,6 +88,11 @@ class DownloadItem extends ImmutableComponent {
         downloadItem: true,
         [this.props.download.get('state')]: true
       })}>
+      {
+        this.state.deleteConfirmationVisible
+        ? <div className='deleteConfirmation'>Delete?<Button l10nId='ok' className='primaryButton confirmButton' 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
         }
         {
diff --git a/less/downloadBar.less b/less/downloadBar.less
index 7c410b31fde..ac4908d87e4 100644
--- a/less/downloadBar.less
+++ b/less/downloadBar.less
@@ -44,8 +44,8 @@
       min-width: var(--download-item-width);
 
       &:hover {
-        height: 62px;
-        top: -24px;
+        height: 105px;
+        top: -67px;
 
         .downloadInfo .downloadArrow {
           display: none;
@@ -60,6 +60,10 @@
         .downloadActions {
           display: none;
         }
+
+        .deleteConfirmation {
+          display: none;
+        }
       }
 
       &.paused {
@@ -125,6 +129,22 @@
           }
         }
       }
+
+      .deleteConfirmation {
+        line-height: 2;
+        border-bottom: 1px solid #CCC;
+        padding: 5px 0;
+        margin-bottom: auto 0 10px 0;
+        font-size: 12px;
+
+        .confirmButton {
+          font-weight: normal;
+          padding: 1px;
+          min-width: 50px;
+          float: right;
+          margin-right: -5px;
+        }
+      }
     }
   }
 
@@ -150,5 +170,3 @@
     }
   }
 }
-
-