diff --git a/css/grid-n-view.css b/css/grid-n-view.css index eb625eb..a85a954 100644 --- a/css/grid-n-view.css +++ b/css/grid-n-view.css @@ -20,6 +20,7 @@ --gallery-padding-right: var(--gallery-padding-horizontal); --gallery-image-scroll-margin: calc(2 * var(--gallery-current-image-border)); --gallery-scrollbar-width: 0.5em; + --gallery-empty-height: 20em; --lightbox-frame: 5vmin; --lightbox-image-margin-top: 0.75; @@ -95,6 +96,19 @@ body { align-content: flex-start; flex-flow: row wrap; } +.gallery .images:empty { + height: var(--gallery-empty-height); + border: dashed 1px black; +} +.gallery .images:empty:after { + content: "Empty..."; + position: absolute; + width: 100%; + left: 0; + top: 0; + padding: calc((var(--gallery-empty-height) - 1em) / 2) 0; + text-align: center; +} .gallery .images img { height: 300px; width: auto; diff --git a/grid-n-view.html b/grid-n-view.html index 64388a8..eb8eb77 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -96,8 +96,11 @@ var restoreScroll = function(){ - Gallery: drag-n-drop - drop files/images -- add loading indicator - drag to sort + - drag marked - styling... - Gallery: remove image + - basic delete + - delete marked - UI: mark images for deletion + delete marked - Gallery: serialize / deserialize - Lightbox: navigation (keyboard / mouse) diff --git a/grid-n-view.js b/grid-n-view.js index 441c8ba..25e0546 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -171,14 +171,15 @@ var keyboard = { : gallery.unmark_current ? (gallery.current = null) : null }, + // XXX change to mark -> delete workflow... Delete: function(evt){ if(gallery.current){ - var remove = gallery.current + var to_remove = gallery.current gallery.next() // XXX this is a bit crude... - gallery.current === remove + gallery.current === to_remove && gallery.prev() - gallery.remove(remove) } }, + gallery.remove(to_remove) } }, // selection... ' ': function(evt){ gallery.current @@ -740,6 +741,7 @@ var Gallery = { && img.remove()) : null } return this + .updateMarkers() .update() }, clear: function(){ this.dom.querySelector('.images').innerHTML = ''