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

working on toolbar...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-08-13 14:26:13 +03:00
parent fcf1cb4d2d
commit 7d1c76cb71
2 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -224,6 +224,31 @@ body {
/******************************************************** Toolbar ****/
/* XXX make the toolbar swirchable and contextual... */
.gallery .toolbar {
display: inline-block;
position: sticky;
top: 1em;
padding: 0.5rem;
z-index: calc(var(--base-layer) + 1);
background: var(--gallery-background-color);
}
/* XXX need to hide parts of the toolbar and make it transparent... */
.gallery.lightboxed .toolbar,
.gallery.detailed .toolbar {
display: none;
}
/* XXX */
.gallery .toolbar button {
}
/******************************************************* Overlays ****/
.gallery.lightboxed,

39
grid-n-view.html
View File

@ -55,13 +55,14 @@ var restoreScroll = function(){
- Save current gallery (zip)
- <s>Views: Gallery / Details / Lightbox</s>
- Details: populate fields
- toolbar -- floating over gallery
- <s>toolbar -- floating over gallery</s>
- lightbox (current)
- info (current)
- select / deselect (current / all)
- delete / clear deleted (current / all)
- crop
- load
- <b>styling and icons...</b>
- toolbar -- floating over image (gallery/lightbox/details/...)
- lightbox
- info
@ -102,7 +103,6 @@ var restoreScroll = function(){
- <s>basic delete</s>
- <s>delete marked</s>
- <s>mark images for deletion + delete marked</s>
- UI/toolbar
- <s>Gallery: serialize / deserialize</s>
- <s>Lightbox: navigation (keyboard / mouse)</s>
- <s>Lightbox: fullscreen mode</s>
@ -138,26 +138,23 @@ For more info see: <a href="./README.md">README.md</a>
<hr>
Basic actions:<br>
<button onclick="gallery.toggleMark()">toggle mark current (space)</button>
<button onclick="gallery.markAll()">mark all (ctrl-a)</button>
<button onclick="gallery.unmarkAll()">unmark all (ctrl-d)</button>
<button onclick="gallery.markInverse()">reverse mark (ctrl-i)</button>
<button onclick="gallery.remove('marked')">remove marked</button>
<br>
<br>
<button onclick="gallery.toggleQueueRemoval()">toggle removal (del)</button>
<button onclick="gallery.queueRemoval('marked')">queue marked removal</button>
<button onclick="gallery.unqueueRemoval('marked')">unqueue marked removal</button>
<button onclick="gallery.toggleQueueRemoval('marked')">toggle marked removal</button>
<button onclick="gallery.removeQueued()">remove queued (shift-del)</button>
<br>
<br>
<button onclick="gallery.clear()">clear</button>
<hr>
<div class="gallery">
<!-- toolbar -->
<div class="toolbar">
<button onclick="gallery.toggleMark()" title="toggle mark current (space)">M</button>
<button onclick="gallery.markAll()" title="mark all (ctrl-a)">+M*</button>
<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">-M*</button>
<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">!M</button>
<button onclick="gallery.remove('marked')" title="remove marked">-M</button>
|
<button onclick="gallery.toggleQueueRemoval()" title="toggle removal (del)">D</button>
<button onclick="gallery.queueRemoval('marked')" title="queue marked removal">+DM</button>
<button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">-DM</button>
<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">!DM</button>
<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">Remove</button>
|
<button onclick="gallery.clear()" title="clear">Clear</button>
</div>
<!-- gallery: content -->
<div class="images">
<img src="images/500px/1.JPG" caption="Caption text">