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... */
.gallery .toolbar {
--padding: 0.5rem;
display: inline-block;
position: sticky;
top: 1em;
padding: 0.5rem;
padding: var(--padding);
z-index: calc(var(--base-layer) + 1);
@ -244,6 +246,15 @@ body {
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... */
.gallery .toolbar button {
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">
<!-- toolbar -->
<div class="toolbar">
<button onclick="gallery.toggleMark()" title="toggle mark current (space)">&#9680;</button>
<button onclick="gallery.markAll()" title="mark all (ctrl-a)">&#9210;*</button>
<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">&#11096;*</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>
<button onclick="gallery.queueRemoval('marked')" title="queue marked removal">&#9724;&#9210;</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.toggleMark()" title="toggle mark current (space)">&#9680;</button>
<button onclick="gallery.markAll()" title="mark all (ctrl-a)">&#9210;*</button>
<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">&#11096;*</button>
<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">&#9680;*</button>
<button onclick="gallery.remove('marked')" title="remove marked">&olcross;</button>
</div>
<div>
<button onclick="gallery.toggleQueueRemoval()" title="queue removal (del)">&#9703;</button>
<button onclick="gallery.queueRemoval('marked')" title="queue marked removal">&#9724;&#9210;</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>
</div>
<!-- gallery: content -->