diff --git a/src/css/dialogs-browse-backups.css b/src/css/dialogs-browse-backups.css index 94e02eb..94ef077 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 9b30b6d..97ad554 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)); + } } };