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

cleanup...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-09-12 15:59:40 +03:00
parent 1ad674e466
commit dd1565d1b8
2 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -438,6 +438,7 @@ button:active {
background var(--color-transition) ease,
color var(--color-transition) ease;
}
.gallery .toolbar button.collapse:after,
.gallery .toolbar button sec {
display: inline-block;
position: relative;
@ -464,6 +465,20 @@ button:active {
background var(--color-transition) ease,
color var(--color-transition) ease;
}
/* collapse indicator... */
.gallery .toolbar button.collapse:after {
content: "keyboard_double_arrow_left";
}
.gallery .toolbar button.collapse:after {
transition:
rotate 0.2s,
text-shadow var(--color-transition) ease,
background var(--color-transition) ease,
color var(--color-transition) ease;
}
.gallery .toolbar:not(.shown) button.collapse:after {
rotate: 180deg;
}
.gallery .toolbar button:hover {
border-radius: calc(var(--toolbar-button-size) / 5);
@ -481,16 +496,6 @@ button:active {
opacity: 0.4;
}
.gallery .toolbar button.collapse sec {
transition:
rotate 0.2s,
text-shadow var(--color-transition) ease,
background var(--color-transition) ease,
color var(--color-transition) ease;
}
.gallery .toolbar:not(.shown) button.collapse sec {
rotate: 180deg;
}
.gallery .toolbar button.collapse:hover {
opacity: 1;
border-color: transparent;

42
grid-n-view.html
View File

@ -85,50 +85,50 @@ For more info see: <a href="./README.md">README.md</a>
<div class="toolbar-anchor">
<!-- toolbar: states... -->
<!--div class="toolbar fixed">
<button class="drag-handle" title="drag">drag_indicator</button>
<button class="drag-handle" title="Drag">drag_indicator</button>
<div>
<button onclick="gallery.crop('marked')" title="crop marked">select<sec>crossword</sec></button>
<button onclick="gallery.uncrop()" title="uncrop">select<sec>grid_on</sec></button>
<button onclick="gallery" title="save crop">crossword<sec>add</sec></button>
<button onclick="gallery.crop('marked')" title="Crop marked">select<sec>crossword</sec></button>
<button onclick="gallery.uncrop()" title="Uncrop">select<sec>grid_on</sec></button>
<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button>
</div>
<div class="states">
<button title="1">1</button>
<button title="2">2</button>
<button title="3">3</button>
</div>
<button class="collapse" title="toggle toolbar (hold to make sticky)">crossword<sec>keyboard_double_arrow_left</sec></button>
<button class="collapse" title="toggle toolbar (hold to make sticky)">crossword</button>
</div-->
<!-- toolbar: general... -->
<div class="toolbar fixed">
<button class="drag-handle" title="drag">drag_indicator</button>
<button class="drag-handle" title="Drag">drag_indicator</button>
<div>
<button onclick="gallery" title="upload">cloud_upload</button>
<button onclick="gallery" title="save">save</button>
<button onclick="gallery" title="Upload">cloud_upload</button>
<button onclick="gallery" title="Save">save</button>
</div>
<div>
<button onclick="gallery.details.show()" title="edit">imagesmode<sec>edit</sec></button>
<button onclick="gallery.details.show()" title="Edit">imagesmode<sec>edit</sec></button>
</div>
<div>
<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.unmarkAll()" title="unmark all (ctrl-d)">square<sec>square</sec></button>
<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">select<sec>square</sec></button>
<button onclick="gallery.remove('marked')" title="remove marked">select<sec>close</sec></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.unmarkAll()" title="Unmark all (ctrl-d)">square<sec>square</sec></button>
<button onclick="gallery.markInverse()" title="Reverse mark (ctrl-i)">select<sec>square</sec></button>
<button onclick="gallery.remove('marked')" title="Remove marked">select<sec>close</sec></button>
</div>
<div>
<button onclick="gallery.crop('marked')" title="crop marked">select<sec>crossword</sec></button>
<button onclick="gallery.uncrop()" title="uncrop">select<sec>grid_on</sec></button>
<button onclick="gallery" title="save crop">crossword<sec>add</sec></button>
<button onclick="gallery.crop('marked')" title="Crop marked">select<sec>crossword</sec></button>
<button onclick="gallery.uncrop()" title="Uncrop">select<sec>grid_on</sec></button>
<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button>
</div>
<div>
<button onclick="gallery.toggleQueueRemoval()" title="queue removal (del)">delete</button>
<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">delete<sec>select</sec></button>
<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">delete<sec>close</sec></button>
<button onclick="gallery.toggleQueueRemoval()" title="Queue removal (del)">delete</button>
<button onclick="gallery.toggleQueueRemoval('marked')" title="Toggle marked removal">delete<sec>select</sec></button>
<button onclick="gallery.removeQueued()" title="Remove queued (shift-del)">delete<sec>close</sec></button>
</div>
<div>
<button onclick="gallery.clear()" title="clear">close</button>
</div>
<button class="collapse" title="toggle toolbar (hold to make sticky)">edit_square<sec>keyboard_double_arrow_left</sec></button>
<button class="collapse" title="Edit gallery (hold to make sticky)">edit_square</button>
</div>
</div>
<!-- gallery: content -->