From dd1565d1b8b1340483765320dcd20a2678e80ea2 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 12 Sep 2023 15:59:40 +0300
Subject: [PATCH] cleanup...

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

diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index f65b532..052b0ed 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -438,6 +438,7 @@ button:active {
 		background var(--color-transition) ease,
 		color var(--color-transition) ease;
 }
+.gallery .toolbar button.collapse:after,
 .gallery .toolbar button sec {
 	display: inline-block;
 	position: relative;
@@ -464,6 +465,20 @@ button:active {
 		background var(--color-transition) ease,
 		color var(--color-transition) ease;
 }
+/* collapse indicator... */
+.gallery .toolbar button.collapse:after {
+	content: "keyboard_double_arrow_left";
+}
+.gallery .toolbar button.collapse:after {
+	transition: 
+		rotate 0.2s,
+		text-shadow var(--color-transition) ease,
+		background var(--color-transition) ease,
+		color var(--color-transition) ease;
+}
+.gallery .toolbar:not(.shown) button.collapse:after {
+	rotate: 180deg;
+}
 
 .gallery .toolbar button:hover {
 	border-radius: calc(var(--toolbar-button-size) / 5);
@@ -481,16 +496,6 @@ button:active {
 	opacity: 0.4;
 
 }
-.gallery .toolbar button.collapse sec {
-	transition: 
-		rotate 0.2s,
-		text-shadow var(--color-transition) ease,
-		background var(--color-transition) ease,
-		color var(--color-transition) ease;
-}
-.gallery .toolbar:not(.shown) button.collapse sec {
-	rotate: 180deg;
-}
 .gallery .toolbar button.collapse:hover {
 	opacity: 1;
 	border-color: transparent;
diff --git a/grid-n-view.html b/grid-n-view.html
index 049aeb0..d22367d 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -85,50 +85,50 @@ For more info see: <a href="./README.md">README.md</a>
 	<div class="toolbar-anchor">
 		<!-- toolbar: states... -->
 		<!--div class="toolbar fixed">
-			<button class="drag-handle" title="drag">drag_indicator</button> 
+			<button class="drag-handle" title="Drag">drag_indicator</button> 
 			<div>
-				<button onclick="gallery.crop('marked')" title="crop marked">select<sec>crossword</sec></button>
-				<button onclick="gallery.uncrop()" title="uncrop">select<sec>grid_on</sec></button>
-				<button onclick="gallery" title="save crop">crossword<sec>add</sec></button>
+				<button onclick="gallery.crop('marked')" title="Crop marked">select<sec>crossword</sec></button>
+				<button onclick="gallery.uncrop()" title="Uncrop">select<sec>grid_on</sec></button>
+				<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button>
 			</div>
 			<div class="states">
 				<button title="1">1</button> 
 				<button title="2">2</button> 
 				<button title="3">3</button> 
 			</div>
-			<button class="collapse" title="toggle toolbar (hold to make sticky)">crossword<sec>keyboard_double_arrow_left</sec></button>
+			<button class="collapse" title="toggle toolbar (hold to make sticky)">crossword</button>
 		</div-->
 		<!-- toolbar: general... -->
 		<div class="toolbar fixed">
-			<button class="drag-handle" title="drag">drag_indicator</button> 
+			<button class="drag-handle" title="Drag">drag_indicator</button> 
 			<div>
-				<button onclick="gallery" title="upload">cloud_upload</button> 
-				<button onclick="gallery" title="save">save</button> 
+				<button onclick="gallery" title="Upload">cloud_upload</button> 
+				<button onclick="gallery" title="Save">save</button> 
 			</div>
 			<div>
-				<button onclick="gallery.details.show()" title="edit">imagesmode<sec>edit</sec></button> 
+				<button onclick="gallery.details.show()" title="Edit">imagesmode<sec>edit</sec></button> 
 			</div>
 			<div>
-				<button onclick="gallery.toggleMark()" title="toggle mark current (space)">select</button> 
-				<button onclick="gallery.markAll()" title="mark all (ctrl-a)">select<sec>select</sec></button> 
-				<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">square<sec>square</sec></button> 
-				<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">select<sec>square</sec></button>
-				<button onclick="gallery.remove('marked')" title="remove marked">select<sec>close</sec></button> 
+				<button onclick="gallery.toggleMark()" title="Toggle mark current (space)">select</button> 
+				<button onclick="gallery.markAll()" title="Mark all (ctrl-a)">select<sec>select</sec></button> 
+				<button onclick="gallery.unmarkAll()" title="Unmark all (ctrl-d)">square<sec>square</sec></button> 
+				<button onclick="gallery.markInverse()" title="Reverse mark (ctrl-i)">select<sec>square</sec></button>
+				<button onclick="gallery.remove('marked')" title="Remove marked">select<sec>close</sec></button> 
 			</div>
 			<div>
-				<button onclick="gallery.crop('marked')" title="crop marked">select<sec>crossword</sec></button>
-				<button onclick="gallery.uncrop()" title="uncrop">select<sec>grid_on</sec></button>
-				<button onclick="gallery" title="save crop">crossword<sec>add</sec></button>
+				<button onclick="gallery.crop('marked')" title="Crop marked">select<sec>crossword</sec></button>
+				<button onclick="gallery.uncrop()" title="Uncrop">select<sec>grid_on</sec></button>
+				<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button>
 			</div>
 			<div>
-				<button onclick="gallery.toggleQueueRemoval()" title="queue removal (del)">delete</button> 
-				<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">delete<sec>select</sec></button> 
-				<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">delete<sec>close</sec></button> 
+				<button onclick="gallery.toggleQueueRemoval()" title="Queue removal (del)">delete</button> 
+				<button onclick="gallery.toggleQueueRemoval('marked')" title="Toggle marked removal">delete<sec>select</sec></button> 
+				<button onclick="gallery.removeQueued()" title="Remove queued (shift-del)">delete<sec>close</sec></button> 
 			</div>
 			<div>
 				<button onclick="gallery.clear()" title="clear">close</button> 
 			</div>
-			<button class="collapse" title="toggle toolbar (hold to make sticky)">edit_square<sec>keyboard_double_arrow_left</sec></button>
+			<button class="collapse" title="Edit gallery (hold to make sticky)">edit_square</button>
 		</div>
 	</div>
 	<!-- gallery: content -->