aesthetic work on the toolbar...

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

css/grid-n-view.css

@@ -25,6 +25,8 @@
 	--gallery-empty-height: var(--gallery-image-base-height);
 	--gallery-scrollbar-width: 0.5rem;
 
+	--toolbar-button-size: 2rem;
+
 	--lightbox-frame: 5vmin;
 	--lightbox-image-margin-top: 0.75;
 	--lightbox-button-size: 2em;
@@ -91,6 +93,8 @@ body {
 
 	color: var(--gallery-text-color);
 	background: var(--gallery-background-color);
+
+	overflow-x: clip;
 }
 .gallery .images {
 	position: relative;
@@ -139,6 +143,27 @@ body {
 
 	cursor: pointer;
 }
+.gallery:not(.lightboxed) .images img:not(.current):hover {
+	z-index: calc(var(--base-layer) + 1);
+	box-shadow: 
+		0px 0px 0px calc(var(--gallery-current-image-border) / 5) rgba(255,255,255,1),
+		0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
+}
+
+/* current image... */
+.gallery .images img.current {
+	z-index: 10;
+	box-shadow: 
+		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
+		0.4em 0.4em 2em 0em rgba(0,0,0,0.8);
+}
+.gallery:not(.lightboxed) .images img.current:hover {
+	z-index: calc(var(--base-layer) + 1);
+	box-shadow: 
+		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
+		0.6em 0.6em 3em 0em rgba(0,0,0,0.8);
+}
+
 
 /* dragged image... */
 .gallery .images img.dragged {
@@ -157,33 +182,6 @@ body {
 	filter: saturate(0);
 }
 
-/* selection marker... */
-.gallery .images img.current {
-	z-index: 10;
-	box-shadow: 
-		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
-		0.4em 0.4em 3em 0em rgba(0,0,0,0.8);
-}
-
-/* hover... */
-/* XXX EXPERIMENTAL -- not sure if this is a good idea...
-.gallery:not(.lightboxed) .images:has(:hover) img:not(:hover) {
-	opacity: 0.8;
-	filter: saturate(0);
-}
-*/
-.gallery:not(.lightboxed) .images img:not(.current):hover {
-	z-index: calc(var(--base-layer) + 1);
-	box-shadow: 
-		0px 0px 0px calc(var(--gallery-current-image-border) / 5) rgba(255,255,255,1),
-		0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
-}
-.gallery:not(.lightboxed) .images img.current:hover {
-	z-index: calc(var(--base-layer) + 1);
-	box-shadow: 
-		0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
-		0.6em 0.6em 4em 0em rgba(0,0,0,0.8);
-}
 
 
 
@@ -231,17 +229,31 @@ body {
 /* XXX make the toolbar swirchable and contextual... */
 .gallery .toolbar {
 	--padding: 0.5rem;
+	--top: 1rem;
+	--height: calc((var(--toolbar-button-size) + var(--padding) * 2));
 
 	display: inline-block;
 	position: sticky;
-	top: 1em;
+	top: calc(var(--height) * -1 + var(--top));
-	margin-left: calc(var(--gallery-padding-horizontal) * -1);
 	padding: var(--padding);
+	margin-left: calc(var(--gallery-padding-horizontal) * -1);
+	/* takeup no space... */
+	margin-top: calc(var(--height)  * -1);
+
+	translate: 0 100%;
 
 	z-index: calc(var(--base-layer) + 2);
 
 	border: solid 1px var(--gallery-secondary-color);
+	border-radius: calc(var(--height) / 8);
 	background: var(--gallery-background-color);
+
+	box-shadow: 0.2em 0.2em 0.5em -0.3em rgba(0,0,0,0.8);
+
+	transition: 
+		padding-right 0.2s,
+		opacity 0.2s,
+		translate 0.2s;
 }
 /* XXX need to hide parts of the toolbar and make it transparent... */
 .gallery.lightboxed .toolbar,
@@ -249,6 +261,38 @@ body {
 	display: none;
 }
 
+/* sticky toolbar indicator... */
+.gallery .toolbar.sticky:after {
+	content: "lock";
+
+	display: block;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	padding: calc(var(--toolbar-button-size) / 10);
+
+	font-family: "Material Symbols Outlined";
+	font-size: small;
+	font-weight: bold;
+	color: var(--gallery-text-color);
+
+	opacity: 0.2;
+
+	pointer-events: none;
+}
+
+/* collapsed toolbar (default)... */
+/* XXX shoud the toolbar be vertical??? */
+.gallery .toolbar:not(.shown) {
+	translate: calc(-100% + var(--toolbar-button-size) + var(--padding)) 100%;
+	padding-right: calc(var(--padding) / 5);
+}
+.gallery .toolbar:not(.shown):not(:hover) {
+	background: transparent;
+	box-shadow: none;
+}
+
+
 /* groups... */
 .gallery .toolbar>div {
 	display: inline-block;
@@ -260,14 +304,14 @@ body {
 
 /* buttons... */
 .gallery .toolbar button {
-	min-width: 1.5rem;
+	min-width: var(--toolbar-button-size);
 
 	border: solid 1px transparent;
 	background: var(--gallery-background-color);
 
 	font-family: "Material Symbols Outlined";
-	font-size: 1.5rem; 
+	font-size: var(--toolbar-button-size); 
-	line-height: 1.5rem;
+	line-height: var(--toolbar-button-size);
 	font-weight: 300;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -281,10 +325,10 @@ body {
 	position: relative;
 
 	left: 0;
-	bottom: -0.25rem;
+	bottom: calc(var(--toolbar-button-size) / -6);
-	margin-left: -0.95rem;
+	margin-left: calc(var(--toolbar-button-size) / -1.5625);
 
-	font-size: 1.3rem;
+	font-size: calc(var(--toolbar-button-size) / 1.15);
 
 	/* XXX this works but needs another layer of black text on top...
 	 * 		...not sure how to do this without JS -- SVG would be simpler! */
@@ -304,11 +348,23 @@ body {
 }
 
 .gallery .toolbar button:hover {
-	border-radius: calc(1.5rem / 5);
+	border-radius: calc(var(--toolbar-button-size) / 5);
 	border: solid 1px var(--gallery-secondary-color);
 }
 
 
+/* button: collapse... */
+.gallery .toolbar button.collapse {
+	opacity: 0.3;
+	transition: rotate 0.2s;
+}
+.gallery .toolbar:not(.shown) button.collapse {
+	rotate: 180deg;
+}
+.gallery .toolbar button.collapse:hover {
+	opacity: 1;
+	border: solid 1px transparent;
+}
 
 
 /******************************************************* Overlays ****/

grid-n-view.html

@@ -95,7 +95,10 @@ For more info see: <a href="./README.md">README.md</a>
 			<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>
+			<button onclick="gallery.clear()" title="clear">close</button> 
+		</div>
+		<button class="collapse" title="toggle toolbar (hold to make sticky)">keyboard_double_arrow_left</button>
 	</div>
 	<!-- gallery: content -->
 	<div class="images">

grid-n-view.js

@@ -292,6 +292,8 @@ var Gallery = {
 	// XXX remove this when/if the selected options feels natural...
 	vertical_navigate_mode: 'intersection',
 
+	toolbar_hold: 300,
+	toolbar_autohide: 2000,
 
 	code: `
 		<div class="gallery">
@@ -854,14 +856,60 @@ var Gallery = {
 		this.dom.querySelector('.images').innerHTML = ''
 		return this },
 
+	toggleToolbar: function(action='toggle'){
+		var toolbar = this.dom.querySelector('.toolbar')?.classList
+		toolbar
+			&& (action == 'toggle' ?
+					toolbar.toggle('shown')
+				: action == 'show' ?
+					toolbar.add('shown')
+				: toolbar.remove('shown'))
+		return this },
+
 	setup: function(dom){
 		var that = this
 		this.dom = dom
 
+		// toolbar...
+		var toolbar = this.dom.querySelector('.toolbar')
 		// prevent clicks in toolbar from affecting the gallery...
-		this.dom.querySelector('.toolbar')
+		toolbar
 			.addEventListener('click', function(evt){
 				evt.stopPropagation() })
+		// toolbar: collapse: click, hold to make sticky...
+		var hold_timeout
+		var collapse_button = toolbar.querySelector('.collapse')
+		collapse_button
+			.addEventListener('mousedown', function(evt){
+				hold_timeout = setTimeout(
+					function(){
+						hold_timeout = undefined
+						toolbar.classList.toggle('sticky') }, 
+					that.toolbar_hold ?? 300) })
+		collapse_button
+			.addEventListener('mouseup', function(evt){
+				hold_timeout
+					&& clearTimeout(hold_timeout)
+				hold_timeout = undefined 
+				that.toggleToolbar() })
+		// toolbar: autohide...
+		var hide_timeout
+		toolbar
+			.addEventListener('mouseout', function(evt){
+				if(that.toolbar_autohide == 0 
+						|| toolbar.classList.contains('sticky')){
+					return }
+				hide_timeout = setTimeout(
+					function(){
+						hide_timeout = undefined
+						that.toggleToolbar('hide') }, 
+					that.toolbar_autohide ?? 1000) })
+		toolbar
+			.addEventListener('mouseover', function(evt){
+				hide_timeout
+					&& clearTimeout(hide_timeout) 
+				hide_timeout = undefined })
+
 		// image clicks...
 		this.dom.querySelector('.images')
 			.addEventListener('click', function(evt){