From 693a75b8bc2b1517235e29580df7d5ebb5391f04 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Mon, 14 Aug 2023 11:49:34 +0300
Subject: [PATCH] basic button/action iconography...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 css/grid-n-view.css | 14 +++++++++++++-
 grid-n-view.html    | 20 ++++++++++----------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index 9645ce8..f52e1b6 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -235,6 +235,7 @@ body {
 
 	z-index: calc(var(--base-layer) + 1);
 
+	border: solid 1px var(--gallery-secondary-color);
 	background: var(--gallery-background-color);
 }
 /* XXX need to hide parts of the toolbar and make it transparent... */
@@ -243,9 +244,20 @@ body {
 	display: none;
 }
 
-/* XXX */
+/* buttons... */
 .gallery .toolbar button {
+	line-height: 1.5rem;
+	min-width; 1.5rem;
+	text-align: center;
+
+	border: solid 1px transparent;
+	background: var(--gallery-background-color);
 }
+.gallery .toolbar button:hover {
+	border-radius: calc(1.5rem / 5);
+	border: solid 1px var(--gallery-secondary-color);
+}
+
 
 
 
diff --git a/grid-n-view.html b/grid-n-view.html
index 8d853ec..3ab36c7 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -142,17 +142,17 @@ For more info see: <a href="./README.md">README.md</a>
 <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.toggleMark()" title="toggle mark current (space)">&#9680;</button> 
+		<button onclick="gallery.markAll()" title="mark all (ctrl-a)">&#9210;*</button> 
+		<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">&#11096;*</button> 
+		<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">&#9680;*</button>
+		<button onclick="gallery.remove('marked')" title="remove marked">&olcross;</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.toggleQueueRemoval()" title="queue removal (del)">&#9703;</button> 
+		<button onclick="gallery.queueRemoval('marked')" title="queue marked removal">&#9724;&#9210;</button> 
+		<button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">&#9723;&#9210;</button> 
+		<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">&#9703;&#9210;</button> 
+		<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">&#9746;</button> 
 		|
 		<button onclick="gallery.clear()" title="clear">Clear</button> 
 	</div>