mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
improve styling of snapshot list in browse backups dialog
This commit is contained in:
parent
4e86fa1570
commit
2b3bd02479
|
@ -87,7 +87,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60px;
|
height: 80px;
|
||||||
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
@ -100,19 +100,20 @@
|
||||||
.browse-backups .snapshot-details {
|
.browse-backups .snapshot-details {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.browse-backups .session-details {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.browse-backups .session-details-title {
|
.browse-backups .session-details-title,
|
||||||
|
.browse-backups .snapshot-details-title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.browse-backups .session-details-info {
|
.browse-backups .session-details-info,
|
||||||
|
.browse-backups .snapshot-details-info {
|
||||||
|
font-size: 11px;
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.browse-backups .session-actions,
|
.browse-backups .session-actions,
|
||||||
|
|
|
@ -34,8 +34,16 @@
|
||||||
var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
|
var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
|
||||||
var html = '';
|
var html = '';
|
||||||
snapshots.forEach(function (snapshot) {
|
snapshots.forEach(function (snapshot) {
|
||||||
snapshot.date = pskl.utils.DateUtils.format(snapshot.date, '{{Y}}/{{M}}/{{D}} {{H}}:{{m}}');
|
var view = {
|
||||||
html += pskl.utils.Template.replace(sessionItemTemplate, snapshot);
|
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;
|
this.container.querySelector('.snapshot-list').innerHTML = html;
|
||||||
|
|
|
@ -55,6 +55,10 @@
|
||||||
date: date,
|
date: date,
|
||||||
name: descriptor.name,
|
name: descriptor.name,
|
||||||
description: descriptor.description,
|
description: descriptor.description,
|
||||||
|
frames: piskel.getFrameCount(),
|
||||||
|
width: piskel.getWidth(),
|
||||||
|
height: piskel.getHeight(),
|
||||||
|
fps: piskel.getFPS(),
|
||||||
serialized: pskl.utils.serialization.Serializer.serialize(piskel)
|
serialized: pskl.utils.serialization.Serializer.serialize(piskel)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -63,7 +63,9 @@
|
||||||
<script type="text/template" id="snapshot-list-item">
|
<script type="text/template" id="snapshot-list-item">
|
||||||
<div class="snapshot-item">
|
<div class="snapshot-item">
|
||||||
<div class="snapshot-details">
|
<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>
|
||||||
<div class="snapshot-actions">
|
<div class="snapshot-actions">
|
||||||
<button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
|
<button class="button button-primary" data-action="load" data-snapshot-id="{{id}}">Load</button>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user