olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

aesthetic work on the toolbar...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-08-15 20:45:42 +03:00
parent 363c08c41b
commit 91dae0a326
3 changed files with 145 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
css/grid-n-view.css
View File

@ -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;
margin-left: calc(var(--gallery-padding-horizontal) * -1);
top: calc(var(--height) * -1 + var(--top));
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;
line-height: 1.5rem;
font-size: var(--toolbar-button-size);
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;
margin-left: -0.95rem;
bottom: calc(var(--toolbar-button-size) / -6);
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 ****/

5
grid-n-view.html
View File

@ -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">

50
grid-n-view.js
View File

@ -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){