mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
show snpashot previews in the browse backups dialog
This commit is contained in:
parent
eab21e0839
commit
7de03f1e73
|
@ -96,6 +96,14 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.browse-backups .snapshot-preview {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.browse-backups .session-details,
|
.browse-backups .session-details,
|
||||||
.browse-backups .snapshot-details {
|
.browse-backups .snapshot-details {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
|
@ -44,12 +44,36 @@
|
||||||
fps: snapshot.fps
|
fps: snapshot.fps
|
||||||
};
|
};
|
||||||
html += pskl.utils.Template.replace(sessionItemTemplate, view);
|
html += pskl.utils.Template.replace(sessionItemTemplate, view);
|
||||||
});
|
this.updateSnapshotPreview_(snapshot);
|
||||||
|
}.bind(this));
|
||||||
}
|
}
|
||||||
this.container.querySelector('.snapshot-list').innerHTML = html;
|
this.container.querySelector('.snapshot-list').innerHTML = html;
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ns.SessionDetails.prototype.updateSnapshotPreview_ = function (snapshot) {
|
||||||
|
pskl.utils.serialization.Deserializer.deserialize(
|
||||||
|
JSON.parse(snapshot.serialized),
|
||||||
|
function (piskel) {
|
||||||
|
var selector = '.snapshot-item[data-snapshot-id="' + snapshot.id + '"] .snapshot-preview';
|
||||||
|
var previewContainer = this.container.querySelector(selector);
|
||||||
|
if (!previewContainer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var image = this.getFirstFrameAsImage_(piskel);
|
||||||
|
previewContainer.appendChild(image);
|
||||||
|
}.bind(this)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.SessionDetails.prototype.getFirstFrameAsImage_ = function (piskel) {
|
||||||
|
var frame = pskl.utils.LayerUtils.mergeFrameAt(piskel.getLayers(), 0);
|
||||||
|
var wZoom = 60 / piskel.width;
|
||||||
|
var hZoom = 60 / piskel.height;
|
||||||
|
var zoom = Math.min(hZoom, wZoom);
|
||||||
|
return pskl.utils.FrameUtils.toImage(frame, zoom);
|
||||||
|
};
|
||||||
|
|
||||||
ns.SessionDetails.prototype.onBackClick_ = function () {
|
ns.SessionDetails.prototype.onBackClick_ = function () {
|
||||||
this.backupsController.back(this);
|
this.backupsController.back(this);
|
||||||
};
|
};
|
||||||
|
|
|
@ -61,7 +61,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/template" id="snapshot-list-item">
|
<script type="text/template" id="snapshot-list-item">
|
||||||
<div class="snapshot-item">
|
<div class="snapshot-item" data-snapshot-id={{id}}>
|
||||||
|
<div class="snapshot-preview lowcont-dark-picker-background"></div>
|
||||||
<div class="snapshot-details">
|
<div class="snapshot-details">
|
||||||
<span class="snapshot-details-title">{{name}} {{description}}</span>
|
<span class="snapshot-details-title">{{name}} {{description}}</span>
|
||||||
<span class="snapshot-details-info">Snapshot recorded {{date}}</span>
|
<span class="snapshot-details-info">Snapshot recorded {{date}}</span>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user