cleanup...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-08-17 17:49:37 +03:00
parent 53eecfc17f
commit 5de338af1b
4 changed files with 13 additions and 9 deletions

View File

@ -12,14 +12,9 @@
- crop - crop
- load - load
- ~~styling and icons...~~ - ~~styling and icons...~~
- draggable? - ~~draggable?~~ (needs tweaking)
- ~~handle wrapping better (collapsed / expandend)~~ - ~~handle wrapping better (collapsed / expandend)~~
might still need to resize to content on multiline... might still need to resize to content on multiline...
- toolbar -- floating over image (gallery/lightbox/details/...)
- lightbox
- info
- select / deselect
- delete
- Lightbox: hover indicators: - Lightbox: hover indicators:
- start/end (a-la ImageGrid.Viewer??) - start/end (a-la ImageGrid.Viewer??)
- next/prev - next/prev

View File

@ -293,10 +293,19 @@ body {
display: none; display: none;
} }
/* moving toolbar... */
.gallery .toolbar.moving { .gallery .toolbar.moving {
transition: none; transition: none;
} }
/* fixed toolbar... */
.gallery .toolbar.fixed {
padding-left: var(--padding);
}
.gallery .toolbar.fixed .drag-handle {
display: none;
}
/* sticky toolbar indicator... */ /* sticky toolbar indicator... */
.gallery .toolbar.sticky:after { .gallery .toolbar.sticky:after {
content: "lock"; content: "lock";

View File

@ -79,7 +79,7 @@ For more info see: <a href="./README.md">README.md</a>
<div class="gallery otter"> <div class="gallery otter">
<!-- toolbar --> <!-- toolbar -->
<div class="toolbar-anchor"> <div class="toolbar-anchor">
<div class="toolbar"> <div class="toolbar fixed">
<button class="drag-handle" title="drag">drag_indicator</button> <button class="drag-handle" title="drag">drag_indicator</button>
<div> <div>
<button onclick="gallery" title="upload">cloud_upload</button> <button onclick="gallery" title="upload">cloud_upload</button>

View File

@ -1051,7 +1051,6 @@ var Gallery = {
toolbar.addEventListener('mouseover', toolbarAutoHideCancel) toolbar.addEventListener('mouseover', toolbarAutoHideCancel)
toolbar.addEventListener('touchstart', toolbarAutoHideCancel) toolbar.addEventListener('touchstart', toolbarAutoHideCancel)
/* XXX needs more tweaking...
// toolbar: move... // toolbar: move...
// XXX to drag anywhere on the elem we need to prevent // XXX to drag anywhere on the elem we need to prevent
// clicks while dragging... // clicks while dragging...
@ -1060,6 +1059,8 @@ var Gallery = {
handle: '.drag-handle', handle: '.drag-handle',
// set bounds... // set bounds...
start: function(elem, data){ start: function(elem, data){
if(elem.classList.contains('fixed')){
return false }
data.bounds = { data.bounds = {
top: 0, top: 0,
left: 0, left: 0,
@ -1069,7 +1070,6 @@ var Gallery = {
move: function(elem, data){ move: function(elem, data){
elem.style.setProperty('--move-x', data.x + 'px') elem.style.setProperty('--move-x', data.x + 'px')
elem.style.setProperty('--move-y', data.y + 'px') }, }) elem.style.setProperty('--move-y', data.y + 'px') }, })
//*/
// image clicks... // image clicks...
this.dom.querySelector('.images') this.dom.querySelector('.images')