From e0bbb88d470d4a0fa08d641beba0db09b267ec0d Mon Sep 17 00:00:00 2001
From: Julian Descottes <julian.descottes@gmail.com>
Date: Sun, 30 Jul 2017 16:22:30 +0200
Subject: [PATCH] confirm backup session delete, add animation

---
 src/css/dialogs-browse-backups.css            | 10 ++++++
 .../dialogs/backups/steps/SelectSession.js    | 31 ++++++++++++++++---
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/css/dialogs-browse-backups.css b/src/css/dialogs-browse-backups.css
index 94e02eb9..94ef0772 100644
--- a/src/css/dialogs-browse-backups.css
+++ b/src/css/dialogs-browse-backups.css
@@ -43,6 +43,16 @@
   box-sizing: border-box;
 }
 
+.browse-backups .session-item {
+  transition: all 500ms;
+}
+
+/* Hide and slide up next sessions when deleting an item */
+.browse-backups .session-item.deleting {
+  opacity: 0;
+  margin-bottom: -60px;
+}
+
 .browse-backups .session-item,
 .browse-backups .snapshot-item {
   display: flex;
diff --git a/src/js/controller/dialogs/backups/steps/SelectSession.js b/src/js/controller/dialogs/backups/steps/SelectSession.js
index 9b30b6da..97ad5542 100644
--- a/src/js/controller/dialogs/backups/steps/SelectSession.js
+++ b/src/js/controller/dialogs/backups/steps/SelectSession.js
@@ -1,6 +1,22 @@
 (function () {
   var ns = $.namespace('pskl.controller.dialogs.backups.steps');
 
+  /**
+   * Helper that returns a promise that will resolve after waiting for a
+   * given time (in ms).
+   *
+   * @param {Number} time
+   *        The time to wait.
+   * @return {Promise} promise that resolves after time.
+   */
+  var wait = function (time) {
+    var deferred = Q.defer();
+    setTimeout(function () {
+      deferred.resolve();
+    }, time);
+    return deferred.promise;
+  };
+
   ns.SelectSession = function (piskelController, backupsController, container) {
     this.piskelController = piskelController;
     this.backupsController = backupsController;
@@ -57,10 +73,17 @@
       this.backupsController.mergeData.selectedSession = sessionId;
       this.backupsController.next();
     } else if (action == 'delete') {
-      pskl.app.backupService.deleteSession(sessionId).then(function () {
-        // Refresh the list of sessions
-        this.update();
-      }.bind(this));
+      if (window.confirm('Are you sure you want to delete this session?')) {
+        evt.target.closest('.session-item').classList.add('deleting');
+        Q.all([
+          pskl.app.backupService.deleteSession(sessionId),
+          // Wait for 500ms for the .hide opacity transition.
+          wait(500)
+        ]).then(function () {
+          // Refresh the list of sessions
+          this.update();
+        }.bind(this));
+      }
     }
   };