Improve storage manager

- Make the thumbnails always take up the same amount of space in the layout, so that the Remove buttons line up consistently between rows. This makes it considerably easier to remove multiple entries quickly.

- Make the thumbnails centered within said space, and link the entirety of that space to opening the item in a new tab.

- Fix target='_blank'; I probably conflated it with __proto__ etc.
main
Isaiah Odhner 2018-01-22 06:29:52 +00:00
parent af7995df77
commit f645febad1
2 changed files with 21 additions and 12 deletions

View File

@ -52,12 +52,13 @@ function manage_storage(){
var $tr = $(E("tr")).appendTo($table);
var $img = $(E("img")).attr({src: imgSrc});
var $remove = $(E("button")).text("Remove");
var $remove = $(E("button")).text("Remove").addClass("remove-button");
var href = "#" + k.replace("image#", "local:");
var $link = $(E("a")).attr({href: href, target: "__blank"});
$link.append($img);
$link.append($(E("span")).text("View"));
$(E("td")).append($link).appendTo($tr);
var $open_link = $(E("a")).attr({href: href, target: "_blank"}).text("Open");
var $thumbnail_open_link = $(E("a")).attr({href: href, target: "_blank"}).addClass("thumbnail-container");
$thumbnail_open_link.append($img);
$(E("td")).append($thumbnail_open_link).appendTo($tr);
$(E("td")).append($open_link).appendTo($tr);
$(E("td")).append($remove).appendTo($tr);
$remove.click(function(){

View File

@ -344,17 +344,25 @@ html, body, .jspaint {
overflow: auto;
display: block;
}
.storage-manager a > img {
max-width: 100px;
max-height: 100px;
vertical-align: middle;
margin: 5px;
.storage-manager .thumbnail-container {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.storage-manager a > span,
.storage-manager a > img,
.storage-manager .thumbnail-container > img {
max-width: 64px;
max-height: 64px;
flex: 0 0 auto;
}
.storage-manager .thumbnail-container,
.storage-manager p {
margin: 5px;
}
.storage-manager .remove-button {
margin-left: 15px;
}
::before, ::after {
pointer-events: none;