From 9ff2ecbb459fe1e93363dd107eb7577fa2d2e559 Mon Sep 17 00:00:00 2001
From: Julian Descottes <julian.descottes@gmail.com>
Date: Sun, 30 Jul 2017 15:46:12 +0200
Subject: [PATCH] improve styling for browse-backups dialog

---
 src/css/dialogs-browse-backups.css            | 95 +++++++++++++++++++
 .../dialogs/backups/steps/SelectSession.js    |  9 +-
 src/js/database/BackupDatabase.js             |  4 +-
 src/piskel-style-list.js                      |  1 +
 src/templates/dialogs/browse-backups.html     | 26 +++--
 5 files changed, 126 insertions(+), 9 deletions(-)
 create mode 100644 src/css/dialogs-browse-backups.css

diff --git a/src/css/dialogs-browse-backups.css b/src/css/dialogs-browse-backups.css
new file mode 100644
index 00000000..94e02eb9
--- /dev/null
+++ b/src/css/dialogs-browse-backups.css
@@ -0,0 +1,95 @@
+#dialog-container.browse-backups {
+  width: 700px;
+  height: 500px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-left: -350px;
+}
+
+.backups-step-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.backups-step-content {
+  width: 100%;
+  height: 10px;
+  flex-grow: 1;
+  background: #444;
+}
+
+.backups-step-actions {
+  flex-grow: 0;
+  flex-shrink: 1;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.show #dialog-container.browse-backups {
+  margin-top: -250px;
+}
+
+.browse-backups .session-list,
+.browse-backups .snapshot-list {
+  width: 100%;
+  padding: 20px;
+  overflow: auto;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.browse-backups .session-item,
+.browse-backups .snapshot-item {
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 60px;
+
+  margin-bottom: 10px;
+  padding: 0 20px;
+
+  border: 1px solid #666;
+  box-sizing: border-box;
+}
+
+.browse-backups .session-details,
+.browse-backups .snapshot-details {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.browse-backups .session-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.browse-backups .session-details-title {
+  font-weight: bold;
+}
+
+.browse-backups .session-details-info {
+  color: #999;
+}
+
+.browse-backups .session-actions,
+.browse-backups .snapshot-actions {
+  flex-grow: 0;
+  flex-shrink: 1;
+  display: flex;
+}
+
+.browse-backups .session-actions button,
+.browse-backups .snapshot-actions button {
+  margin-left: 10px;
+}
+
+.browse-backups .session-item:last-child,
+.browse-backups .snapshot-item:last-child {
+  margin-bottom: 0;
+}
diff --git a/src/js/controller/dialogs/backups/steps/SelectSession.js b/src/js/controller/dialogs/backups/steps/SelectSession.js
index 966787cf..9b30b6da 100644
--- a/src/js/controller/dialogs/backups/steps/SelectSession.js
+++ b/src/js/controller/dialogs/backups/steps/SelectSession.js
@@ -28,7 +28,14 @@
         var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
         var html = '';
         sessions.forEach(function (session) {
-          html += pskl.utils.Template.replace(sessionItemTemplate, session);
+          var view = {
+            id: session.id,
+            name: session.name,
+            description: session.description ? '- ' + session.description : '',
+            date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
+            count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots'
+          };
+          html += pskl.utils.Template.replace(sessionItemTemplate, view);
         });
       }
       this.container.querySelector('.session-list').innerHTML = html;
diff --git a/src/js/database/BackupDatabase.js b/src/js/database/BackupDatabase.js
index 8ba18f77..26b60cd0 100644
--- a/src/js/database/BackupDatabase.js
+++ b/src/js/database/BackupDatabase.js
@@ -188,7 +188,8 @@
         endDate: snapshot.date,
         name: snapshot.name,
         description: snapshot.description,
-        id: snapshot.session_id
+        id: snapshot.session_id,
+        count: 1
       };
     };
 
@@ -196,6 +197,7 @@
       var s = sessions[snapshot.session_id];
       s.startDate = Math.min(s.startDate, snapshot.date);
       s.endDate = Math.max(s.endDate, snapshot.date);
+      s.count++;
 
       if (s.endDate === snapshot.date) {
         // If the endDate was updated, update also the session metadata to
diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js
index 3760668c..12d3c0e7 100644
--- a/src/piskel-style-list.js
+++ b/src/piskel-style-list.js
@@ -18,6 +18,7 @@
   "css/icons.css",
   "css/color-picker-slider.css",
   "css/dialogs.css",
+  "css/dialogs-browse-backups.css",
   "css/dialogs-browse-local.css",
   "css/dialogs-cheatsheet.css",
   "css/dialogs-create-palette.css",
diff --git a/src/templates/dialogs/browse-backups.html b/src/templates/dialogs/browse-backups.html
index 52f5fdef..0ac09459 100644
--- a/src/templates/dialogs/browse-backups.html
+++ b/src/templates/dialogs/browse-backups.html
@@ -19,10 +19,16 @@
 </script>
 
 <script type="text/template" id="session-list-item">
-<div class="session-item">
-  {{name}} - {{description}}
-  <button class="button" data-session-id="{{id}}" data-action="delete">Delete</button>
-  <button class="button button-primary" data-session-id="{{id}}" data-action="view">View</button>
+<div class="session-item" title="{{id}}">
+  <div class="session-details">
+    <span class="session-details-title">{{name}} {{description}}</span>
+    <span class="session-details-info">Session recorded {{date}}</span>
+    <span class="session-details-info">{{count}} saved</span>
+  </div>
+  <div class="session-actions">
+    <button class="button" data-session-id="{{id}}" data-action="delete">Delete</button>
+    <button class="button button-primary" data-session-id="{{id}}" data-action="view">View</button>
+  </div>
 </div>
 </script>
 
@@ -31,13 +37,19 @@
   <div class="backups-step-content">
     <div class="snapshot-list"></div>
   </div>
-  <button class="button back-button">back</button>
+  <div class="backups-step-actions">
+    <button class="button back-button">back</button>
+  </div>
 </div>
 </script>
 
 <script type="text/template" id="snapshot-list-item">
 <div class="snapshot-item">
-  {{name}} - {{description}}. Snapshot taken at {{date}}.
-  <button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
+  <div class="snapshot-details">
+    {{name}} - {{description}}. Snapshot taken at {{date}}.
+  </div>
+  <div class="snapshot-actions">
+    <button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
+  </div>
 </div>
 </script>
\ No newline at end of file