added icons to toolbar...

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

README.md

@@ -64,6 +64,14 @@
 - ...
 
 
+## Install
+
+Before testing this needs icon fonts to be available:
+```
+$ npm install
+```
+
+
 ## Architecture
 
 XXX

css/grid-n-view.css

@@ -4,6 +4,8 @@
 *
 **********************************************************************/
 
+@import '../node_modules/material-symbols/outlined.css';
+
 
 /********************************************************* Config ****/
 
@@ -258,13 +260,49 @@ body {
 
 /* buttons... */
 .gallery .toolbar button {
-	line-height: 1.5rem;
+	min-width: 1.5rem;
-	min-width; 1.5rem;
-	text-align: center;
 
 	border: solid 1px transparent;
 	background: var(--gallery-background-color);
+
+	font-family: "Material Symbols Outlined";
+	font-size: 1.5rem; 
+	line-height: 1.5rem;
+	font-weight: 300;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+	font-feature-settings: "liga";   
+
+	text-align: center;
 }
+.gallery .toolbar button sec {
+	display: inline-block;
+	position: relative;
+
+	left: 0;
+	bottom: -0.25rem;
+	margin-left: -0.95rem;
+
+	font-size: 1.3rem;
+
+	/* XXX this works but needs another layer of black text on top...
+	 * 		...not sure how to do this without JS -- SVG would be simpler! */
+	/*-webkit-text-stroke: 0.1em white;
+	text-stroke: 0.1em white; */
+
+	/* XXX HACK: might be better to use SVG for this... */
+	text-shadow: 
+		0em 0.05em 0px var(--gallery-background-color),
+		0.05em 0em 0px var(--gallery-background-color),
+		-0.05em 0em 0px var(--gallery-background-color),
+		0em -0.05em 0px var(--gallery-background-color),
+		0.05em 0.05em 0px var(--gallery-background-color),
+		-0.05em -0.05em 0px var(--gallery-background-color),
+		-0.05em 0.05em 0px var(--gallery-background-color),
+		0.05em -0.05em 0px var(--gallery-background-color);
+}
+
 .gallery .toolbar button:hover {
 	border-radius: calc(1.5rem / 5);
 	border: solid 1px var(--gallery-secondary-color);
@@ -349,12 +387,14 @@ body {
 	position: absolute;
 	top: 0;
 	right: 0;
+
 }
 .gallery .button {
 	disbplay: inline-block;
 	cursor: pointer;
 	width: var(--lightbox-button-size);
 	height: var(--lightbox-button-size);
+
 	font-size: var(--lightbox-button-size);
 	line-height: var(--lightbox-button-size);
 	filter: saturate(0);
@@ -376,7 +416,7 @@ body {
 /* controls: close... */
 .gallery .button.close:after {
 	content: "✕";
-	color: red;
+	/*color: red;*/
 }
 .gallery .button.fullscreen:after {
 	content: "⛶";

grid-n-view.html

@@ -6,7 +6,8 @@
 
 <title>Grid n' View</title>
 
-<link rel="stylesheet" href="css/grid-n-view.css" />
+<link href="css/grid-n-view.css" rel="stylesheet"/>
+
 <script src="grid-n-view.js"></script>
 
 <style>
@@ -79,20 +80,22 @@ For more info see: <a href="./README.md">README.md</a>
 	<!-- toolbar -->
 	<div class="toolbar">
 		<div>
-			<button onclick="gallery.toggleMark()" title="toggle mark current (space)">&#9680;</button> 
+			<button onclick="gallery" title="upload">cloud_upload</button> 
-			<button onclick="gallery.markAll()" title="mark all (ctrl-a)">&#9210;*</button> 
+			<button onclick="gallery" title="save">save</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.toggleMark()" title="toggle mark current (space)">select</button> 
-			<!--button onclick="gallery.queueRemoval('marked')" title="queue marked removal">&#9724;&#9210;</button--> 
+			<button onclick="gallery.markAll()" title="mark all (ctrl-a)">select<sec>select</sec></button> 
-			<!--button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">&#9723;&#9210;</button--> 
+			<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">square<sec>square</sec></button> 
-			<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">&#9703;&#9210;</button> 
+			<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">select<sec>square</sec></button>
-			<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">&#9746;</button> 
+			<button onclick="gallery.remove('marked')" title="remove marked">select<sec>close</sec></button> 
 		</div>
-		<button onclick="gallery.clear()" title="clear">Clear</button> 
+		<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> 
+		</div>
+		<button onclick="gallery.clear()" title="clear">close</button> 
 	</div>
 	<!-- gallery: content -->
 	<div class="images">

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "material-symbols": "^0.10.4"
+  }
+}