From 45130ab8d2fd47010ef60f745c046155bdc4fd83 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Mon, 14 Aug 2023 12:09:27 +0300
Subject: [PATCH] added toolbar button grouping...

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

diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index f52e1b6..2c31480 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -228,10 +228,12 @@ body {
 
 /* XXX make the toolbar swirchable and contextual... */
 .gallery .toolbar {
+	--padding: 0.5rem;
+
 	display: inline-block;
 	position: sticky;
 	top: 1em;
-	padding: 0.5rem;
+	padding: var(--padding);
 
 	z-index: calc(var(--base-layer) + 1);
 
@@ -244,6 +246,15 @@ body {
 	display: none;
 }
 
+/* groups... */
+.gallery .toolbar>div {
+	display: inline-block;
+}
+.gallery .toolbar>div:not(:last-child) {
+	padding-right: calc(var(--padding) / 2);
+	border-right: solid 1px var(--gallery-secondary-color);
+}
+
 /* buttons... */
 .gallery .toolbar button {
 	line-height: 1.5rem;
diff --git a/grid-n-view.html b/grid-n-view.html
index d18d18d..962d203 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -78,18 +78,20 @@ 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)">&#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="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> 
-		|
+		<div>
+			<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> 
+		</div>
+		<div>
+			<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> 
+		</div>
 		<button onclick="gallery.clear()" title="clear">Clear</button> 
 	</div>
 	<!-- gallery: content -->