working on toolbar...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

css/grid-n-view.css

@@ -224,6 +224,31 @@ body {
 
 
 
+/******************************************************** Toolbar ****/
+
+/* XXX make the toolbar swirchable and contextual... */
+.gallery .toolbar {
+	display: inline-block;
+	position: sticky;
+	top: 1em;
+	padding: 0.5rem;
+
+	z-index: calc(var(--base-layer) + 1);
+
+	background: var(--gallery-background-color);
+}
+/* XXX need to hide parts of the toolbar and make it transparent... */
+.gallery.lightboxed .toolbar,
+.gallery.detailed .toolbar {
+	display: none;
+}
+
+/* XXX */
+.gallery .toolbar button {
+}
+
+
+
 /******************************************************* Overlays ****/
 
 .gallery.lightboxed,

grid-n-view.html

@@ -55,13 +55,14 @@ var restoreScroll = function(){
 - Save current gallery (zip)
 - <s>Views: Gallery / Details / Lightbox</s>
 - Details: populate fields
-- toolbar -- floating over gallery
+- <s>toolbar -- floating over gallery</s>
 	- lightbox (current)
 	- info (current)
 	- select / deselect (current / all)
 	- delete / clear deleted (current / all)
 	- crop
 	- load
+	- <b>styling and icons...</b>
 - toolbar -- floating over image (gallery/lightbox/details/...)
 	- lightbox
 	- info
@@ -102,7 +103,6 @@ var restoreScroll = function(){
 	- <s>basic delete</s>
 	- <s>delete marked</s>
 	- <s>mark images for deletion + delete marked</s>
-	- UI/toolbar
 - <s>Gallery: serialize / deserialize</s>
 - <s>Lightbox: navigation (keyboard / mouse)</s>
 - <s>Lightbox: fullscreen mode</s>
@@ -138,26 +138,23 @@ For more info see: <a href="./README.md">README.md</a>
 
 <hr>
 
-Basic actions:<br>
-<button onclick="gallery.toggleMark()">toggle mark current (space)</button> 
-<button onclick="gallery.markAll()">mark all (ctrl-a)</button> 
-<button onclick="gallery.unmarkAll()">unmark all (ctrl-d)</button> 
-<button onclick="gallery.markInverse()">reverse mark (ctrl-i)</button>
-<button onclick="gallery.remove('marked')">remove marked</button> 
-<br>
-<br>
-<button onclick="gallery.toggleQueueRemoval()">toggle removal (del)</button> 
-<button onclick="gallery.queueRemoval('marked')">queue marked removal</button> 
-<button onclick="gallery.unqueueRemoval('marked')">unqueue marked removal</button> 
-<button onclick="gallery.toggleQueueRemoval('marked')">toggle marked removal</button> 
-<button onclick="gallery.removeQueued()">remove queued (shift-del)</button> 
-<br>
-<br>
-<button onclick="gallery.clear()">clear</button> 
-
-<hr>
-
 <div class="gallery">
+	<!-- toolbar -->
+	<div class="toolbar">
+		<button onclick="gallery.toggleMark()" title="toggle mark current (space)">M</button> 
+		<button onclick="gallery.markAll()" title="mark all (ctrl-a)">+M*</button> 
+		<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">-M*</button> 
+		<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">!M</button>
+		<button onclick="gallery.remove('marked')" title="remove marked">-M</button> 
+		|
+		<button onclick="gallery.toggleQueueRemoval()" title="toggle removal (del)">D</button> 
+		<button onclick="gallery.queueRemoval('marked')" title="queue marked removal">+DM</button> 
+		<button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">-DM</button> 
+		<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">!DM</button> 
+		<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">Remove</button> 
+		|
+		<button onclick="gallery.clear()" title="clear">Clear</button> 
+	</div>
 	<!-- gallery: content -->
 	<div class="images">
 		<img src="images/500px/1.JPG" caption="Caption text">