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

added toolbar button grouping...

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

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

@ -228,10 +228,12 @@ body {
/* XXX make the toolbar swirchable and contextual... */ /* XXX make the toolbar swirchable and contextual... */
.gallery .toolbar { .gallery .toolbar {
--padding: 0.5rem;
display: inline-block; display: inline-block;
position: sticky; position: sticky;
top: 1em; top: 1em;
padding: 0.5rem; padding: var(--padding);
z-index: calc(var(--base-layer) + 1); z-index: calc(var(--base-layer) + 1);
@ -244,6 +246,15 @@ body {
display: none; display: none;
} }
/* groups... */
.gallery .toolbar>div {
display: inline-block;
}
.gallery .toolbar>div:not(:last-child) {
padding-right: calc(var(--padding) / 2);
border-right: solid 1px var(--gallery-secondary-color);
}
/* buttons... */ /* buttons... */
.gallery .toolbar button { .gallery .toolbar button {
line-height: 1.5rem; line-height: 1.5rem;

26
grid-n-view.html
View File

@ -78,18 +78,20 @@ For more info see: <a href="./README.md">README.md</a>
<div class="gallery"> <div class="gallery">
<!-- toolbar --> <!-- toolbar -->
<div class="toolbar"> <div class="toolbar">
<button onclick="gallery.toggleMark()" title="toggle mark current (space)">&#9680;</button> <div>
<button onclick="gallery.markAll()" title="mark all (ctrl-a)">&#9210;*</button> <button onclick="gallery.toggleMark()" title="toggle mark current (space)">&#9680;</button>
<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">&#11096;*</button> <button onclick="gallery.markAll()" title="mark all (ctrl-a)">&#9210;*</button>
<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">&#9680;*</button> <button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">&#11096;*</button>
<button onclick="gallery.remove('marked')" title="remove marked">&olcross;</button> <button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">&#9680;*</button>
| <button onclick="gallery.remove('marked')" title="remove marked">&olcross;</button>
<button onclick="gallery.toggleQueueRemoval()" title="queue removal (del)">&#9703;</button> </div>
<button onclick="gallery.queueRemoval('marked')" title="queue marked removal">&#9724;&#9210;</button> <div>
<button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">&#9723;&#9210;</button> <button onclick="gallery.toggleQueueRemoval()" title="queue removal (del)">&#9703;</button>
<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">&#9703;&#9210;</button> <button onclick="gallery.queueRemoval('marked')" title="queue marked removal">&#9724;&#9210;</button>
<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">&#9746;</button> <button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">&#9723;&#9210;</button>
| <button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">&#9703;&#9210;</button>
<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">&#9746;</button>
</div>
<button onclick="gallery.clear()" title="clear">Clear</button> <button onclick="gallery.clear()" title="clear">Clear</button>
</div> </div>
<!-- gallery: content --> <!-- gallery: content -->