added icons to toolbar...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
90727814da
commit
363c08c41b
@ -64,6 +64,14 @@
|
||||
- ...
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
Before testing this needs icon fonts to be available:
|
||||
```
|
||||
$ npm install
|
||||
```
|
||||
|
||||
|
||||
## Architecture
|
||||
|
||||
XXX
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
*
|
||||
**********************************************************************/
|
||||
|
||||
@import '../node_modules/material-symbols/outlined.css';
|
||||
|
||||
|
||||
/********************************************************* Config ****/
|
||||
|
||||
@ -258,13 +260,49 @@ body {
|
||||
|
||||
/* buttons... */
|
||||
.gallery .toolbar button {
|
||||
line-height: 1.5rem;
|
||||
min-width; 1.5rem;
|
||||
text-align: center;
|
||||
min-width: 1.5rem;
|
||||
|
||||
border: solid 1px transparent;
|
||||
background: var(--gallery-background-color);
|
||||
|
||||
font-family: "Material Symbols Outlined";
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.gallery .toolbar button sec {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
left: 0;
|
||||
bottom: -0.25rem;
|
||||
margin-left: -0.95rem;
|
||||
|
||||
font-size: 1.3rem;
|
||||
|
||||
/* XXX this works but needs another layer of black text on top...
|
||||
* ...not sure how to do this without JS -- SVG would be simpler! */
|
||||
/*-webkit-text-stroke: 0.1em white;
|
||||
text-stroke: 0.1em white; */
|
||||
|
||||
/* XXX HACK: might be better to use SVG for this... */
|
||||
text-shadow:
|
||||
0em 0.05em 0px var(--gallery-background-color),
|
||||
0.05em 0em 0px var(--gallery-background-color),
|
||||
-0.05em 0em 0px var(--gallery-background-color),
|
||||
0em -0.05em 0px var(--gallery-background-color),
|
||||
0.05em 0.05em 0px var(--gallery-background-color),
|
||||
-0.05em -0.05em 0px var(--gallery-background-color),
|
||||
-0.05em 0.05em 0px var(--gallery-background-color),
|
||||
0.05em -0.05em 0px var(--gallery-background-color);
|
||||
}
|
||||
|
||||
.gallery .toolbar button:hover {
|
||||
border-radius: calc(1.5rem / 5);
|
||||
border: solid 1px var(--gallery-secondary-color);
|
||||
@ -349,12 +387,14 @@ body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
}
|
||||
.gallery .button {
|
||||
disbplay: inline-block;
|
||||
cursor: pointer;
|
||||
width: var(--lightbox-button-size);
|
||||
height: var(--lightbox-button-size);
|
||||
|
||||
font-size: var(--lightbox-button-size);
|
||||
line-height: var(--lightbox-button-size);
|
||||
filter: saturate(0);
|
||||
@ -376,7 +416,7 @@ body {
|
||||
/* controls: close... */
|
||||
.gallery .button.close:after {
|
||||
content: "✕";
|
||||
color: red;
|
||||
/*color: red;*/
|
||||
}
|
||||
.gallery .button.fullscreen:after {
|
||||
content: "⛶";
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
|
||||
<title>Grid n' View</title>
|
||||
|
||||
<link rel="stylesheet" href="css/grid-n-view.css" />
|
||||
<link href="css/grid-n-view.css" rel="stylesheet"/>
|
||||
|
||||
<script src="grid-n-view.js"></script>
|
||||
|
||||
<style>
|
||||
@ -79,20 +80,22 @@ For more info see: <a href="./README.md">README.md</a>
|
||||
<!-- toolbar -->
|
||||
<div class="toolbar">
|
||||
<div>
|
||||
<button onclick="gallery.toggleMark()" title="toggle mark current (space)">◐</button>
|
||||
<button onclick="gallery.markAll()" title="mark all (ctrl-a)">⏺*</button>
|
||||
<button onclick="gallery.unmarkAll()" title="unmark all (ctrl-d)">⭘*</button>
|
||||
<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">◐*</button>
|
||||
<button onclick="gallery.remove('marked')" title="remove marked">⦻</button>
|
||||
<button onclick="gallery" title="upload">cloud_upload</button>
|
||||
<button onclick="gallery" title="save">save</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="gallery.toggleQueueRemoval()" title="queue removal (del)">◧</button>
|
||||
<!--button onclick="gallery.queueRemoval('marked')" title="queue marked removal">◼⏺</button-->
|
||||
<!--button onclick="gallery.unqueueRemoval('marked')" title="unqueue marked removal">◻⏺</button-->
|
||||
<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">◧⏺</button>
|
||||
<button onclick="gallery.removeQueued()" title="remove queued (shift-del)">☒</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>
|
||||
<button onclick="gallery.clear()" title="clear">Clear</button>
|
||||
<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>
|
||||
</div>
|
||||
<button onclick="gallery.clear()" title="clear">close</button>
|
||||
</div>
|
||||
<!-- gallery: content -->
|
||||
<div class="images">
|
||||
|
||||
5
package.json
Normal file
5
package.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"material-symbols": "^0.10.4"
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user