improve styling of snapshot list in browse backups dialog

This commit is contained in:
juliandescottes 2017-08-01 23:19:14 +02:00 committed by Julian Descottes
parent 4e86fa1570
commit 2b3bd02479
4 changed files with 24 additions and 9 deletions

View File

@ -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,

View File

@ -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;

View File

@ -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)
};

View File

@ -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>