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

added toolbar touch + cleanup and tweaking...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-08-16 00:36:10 +03:00
parent 18de12dc7e
commit 5db49a0585
3 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -290,8 +290,19 @@ body {
padding-right: calc(var(--padding) / 5);
}
.gallery .toolbar:not(.shown):not(:hover) {
background: transparent;
box-shadow: none;
z-index: var(--base-layer);
animation: 0.5s steps(1) tuck-to-backgroud;
}
@keyframes tuck-to-backgroud {
0% {
z-index: calc(var(--base-layer) + 2);
}
100% {
z-index: var(--base-layer);
}
}
@ -357,6 +368,7 @@ body {
/* button: collapse... */
.gallery .toolbar button.collapse {
float: right;
opacity: 0.3;
transition: rotate 0.2s;
}
@ -376,10 +388,10 @@ body {
cursor: pointer;
opacity: 0.3;
color: var(--gallery-secondary-color);
}
.gallery .toolbar .drag-handle:hover {
opacity: 1;
color: var(--gallery-text-color);
}

4
grid-n-view.html
View File

@ -84,6 +84,10 @@ For more info see: <a href="./README.md">README.md</a>
<button onclick="gallery" title="upload">cloud_upload</button>
<button onclick="gallery" title="save">save</button>
</div>
<div>
<button onclick="gallery.details.show()" title="info">imagesmode<sec>label</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>

17
grid-n-view.js
View File

@ -878,20 +878,23 @@ var Gallery = {
evt.stopPropagation() })
// toolbar: collapse: click, hold to make sticky...
var hold_timeout
var collapse_button = toolbar.querySelector('.collapse')
collapse_button
.addEventListener('mousedown', function(evt){
var handleInterationStart = function(evt){
hold_timeout = setTimeout(
function(){
hold_timeout = undefined
toolbar.classList.toggle('sticky') },
that.toolbar_hold ?? 300) })
collapse_button
.addEventListener('mouseup', function(evt){
that.toolbar_hold ?? 300) }
var handleInterationEnd = function(evt){
evt.preventDefault()
hold_timeout
&& clearTimeout(hold_timeout)
hold_timeout = undefined
that.toggleToolbar() })
that.toggleToolbar() }
var collapse_button = toolbar.querySelector('.collapse')
collapse_button.addEventListener('touchstart', handleInterationStart)
collapse_button.addEventListener('mousedown', handleInterationStart)
collapse_button.addEventListener('touchend', handleInterationEnd)
collapse_button.addEventListener('mouseup', handleInterationEnd)
// toolbar: autohide...
var hide_timeout
toolbar