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); padding-right: calc(var(--padding) / 5);
} }
.gallery .toolbar:not(.shown):not(:hover) { .gallery .toolbar:not(.shown):not(:hover) {
background: transparent;
box-shadow: none; 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... */ /* button: collapse... */
.gallery .toolbar button.collapse { .gallery .toolbar button.collapse {
float: right;
opacity: 0.3; opacity: 0.3;
transition: rotate 0.2s; transition: rotate 0.2s;
} }
@ -376,10 +388,10 @@ body {
cursor: pointer; cursor: pointer;
opacity: 0.3; color: var(--gallery-secondary-color);
} }
.gallery .toolbar .drag-handle:hover { .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="upload">cloud_upload</button>
<button onclick="gallery" title="save">save</button> <button onclick="gallery" title="save">save</button>
</div> </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> <div>
<button onclick="gallery.toggleMark()" title="toggle mark current (space)">select</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.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() }) evt.stopPropagation() })
// toolbar: collapse: click, hold to make sticky... // toolbar: collapse: click, hold to make sticky...
var hold_timeout var hold_timeout
var collapse_button = toolbar.querySelector('.collapse') var handleInterationStart = function(evt){
collapse_button
.addEventListener('mousedown', function(evt){
hold_timeout = setTimeout( hold_timeout = setTimeout(
function(){ function(){
hold_timeout = undefined hold_timeout = undefined
toolbar.classList.toggle('sticky') }, toolbar.classList.toggle('sticky') },
that.toolbar_hold ?? 300) }) that.toolbar_hold ?? 300) }
collapse_button var handleInterationEnd = function(evt){
.addEventListener('mouseup', function(evt){ evt.preventDefault()
hold_timeout hold_timeout
&& clearTimeout(hold_timeout) && clearTimeout(hold_timeout)
hold_timeout = undefined 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... // toolbar: autohide...
var hide_timeout var hide_timeout
toolbar toolbar