From 2b3bd02479021088b4bed75899230edbcca0c907 Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Tue, 1 Aug 2017 23:19:14 +0200
Subject: [PATCH] improve styling of snapshot list in browse backups dialog

---
 src/css/dialogs-browse-backups.css                  | 13 +++++++------
 .../dialogs/backups/steps/SessionDetails.js         | 12 ++++++++++--
 src/js/service/BackupService.js                     |  4 ++++
 src/templates/dialogs/browse-backups.html           |  4 +++-
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/css/dialogs-browse-backups.css b/src/css/dialogs-browse-backups.css
index ae66f5b..3da3dcf 100644
--- a/src/css/dialogs-browse-backups.css
+++ b/src/css/dialogs-browse-backups.css
@@ -87,7 +87,7 @@
   align-items: center;
 
   width: 100%;
-  height: 60px;
+  height: 80px;
 
   margin-bottom: 10px;
   padding: 0 20px;
@@ -100,19 +100,20 @@
 .browse-backups .snapshot-details {
   flex-grow: 1;
   flex-shrink: 0;
-}
-
-.browse-backups .session-details {
   display: flex;
   flex-direction: column;
 }
 
-.browse-backups .session-details-title {
+.browse-backups .session-details-title,
+.browse-backups .snapshot-details-title {
   font-size: 13px;
 }
 
-.browse-backups .session-details-info {
+.browse-backups .session-details-info,
+.browse-backups .snapshot-details-info {
+  font-size: 11px;
   color: #bbb;
+  line-height: 1.5em;
 }
 
 .browse-backups .session-actions,
diff --git a/src/js/controller/dialogs/backups/steps/SessionDetails.js b/src/js/controller/dialogs/backups/steps/SessionDetails.js
index d84f7d7..8336d6e 100644
--- a/src/js/controller/dialogs/backups/steps/SessionDetails.js
+++ b/src/js/controller/dialogs/backups/steps/SessionDetails.js
@@ -34,8 +34,16 @@
         var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
         var html = '';
         snapshots.forEach(function (snapshot) {
-          snapshot.date = pskl.utils.DateUtils.format(snapshot.date, '{{Y}}/{{M}}/{{D}} {{H}}:{{m}}');
-          html += pskl.utils.Template.replace(sessionItemTemplate, snapshot);
+          var view = {
+            id: snapshot.id,
+            name: snapshot.name,
+            description: snapshot.description ? '- ' + snapshot.description : '',
+            date: pskl.utils.DateUtils.format(snapshot.date, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
+            frames: snapshot.frames === 1 ? '1 frame' : snapshot.frames + ' frames',
+            resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height),
+            fps: snapshot.fps
+          };
+          html += pskl.utils.Template.replace(sessionItemTemplate, view);
         });
       }
       this.container.querySelector('.snapshot-list').innerHTML = html;
diff --git a/src/js/service/BackupService.js b/src/js/service/BackupService.js
index 3a12276..a154a3c 100644
--- a/src/js/service/BackupService.js
+++ b/src/js/service/BackupService.js
@@ -55,6 +55,10 @@
       date: date,
       name: descriptor.name,
       description: descriptor.description,
+      frames: piskel.getFrameCount(),
+      width: piskel.getWidth(),
+      height: piskel.getHeight(),
+      fps: piskel.getFPS(),
       serialized: pskl.utils.serialization.Serializer.serialize(piskel)
     };
 
diff --git a/src/templates/dialogs/browse-backups.html b/src/templates/dialogs/browse-backups.html
index 06455fa..2042a2c 100644
--- a/src/templates/dialogs/browse-backups.html
+++ b/src/templates/dialogs/browse-backups.html
@@ -63,7 +63,9 @@
 <script type="text/template" id="snapshot-list-item">
 <div class="snapshot-item">
   <div class="snapshot-details">
-    {{name}} - {{description}}. Snapshot taken at {{date}}.
+    <span class="snapshot-details-title">{{name}} {{description}}</span>
+    <span class="snapshot-details-info">Snapshot recorded {{date}}</span>
+    <span class="snapshot-details-info">{{frames}}, size {{resolution}}, {{fps}}fps</span>
   </div>
   <div class="snapshot-actions">
     <button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>