mirror of
https://github.com/alesimula/Murine-launcher.git
synced 2026-10-28 09:43:42 +00:00
WEBSITE - WIP - icon shapes - size adjustments
This commit is contained in:
Alex Sim committed
1 parent
a172b9e8f4
commit
b55e8b503d
3 files changed
+28
-19
No files matched your search
+1
-1
@@ -5,7 +5,7 @@ description: >-
|
||||
url: "https://alesimula.github.io"
|
||||
baseurl: ""
|
||||
|
||||
version: "1.0.26" #Website version - increase to invalidate cached resources
|
||||
version: "1.0.27" #Website version - increase to invalidate cached resources
|
||||
github_repo: "alesimula/Murine-launcher"
|
||||
icon_url: "https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_browser_fullsize.svg"
|
||||
icon_freeform_url: "https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_freeform.svg"
|
||||
|
||||
@@ -1376,8 +1376,7 @@
|
||||
const on = picked.has(b.dataset.key);
|
||||
b.classList.toggle('picked', on); b.setAttribute('aria-pressed', on);
|
||||
}
|
||||
$('se-add-desc').textContent = (loaded ? `Tap a${loaded.view === 'merged' ? ' merged group' : ' piece'} to add it where it sits in the file` : "Pick a starting point. It's added at full size")
|
||||
+ '. Long-press or Ctrl+click to pick several.';
|
||||
$('se-add-desc').textContent = `Tap to add${loaded ? ' in place' : ' at full size'}. Long-press or Ctrl+click to pick several.`;
|
||||
$('se-import-btn').disabled = full;
|
||||
$('se-import-unload').hidden = !loaded;
|
||||
if (full) importMsg(`The icon already has the most shapes it can (${ROOM}): delete one to add more.`);
|
||||
@@ -1393,11 +1392,16 @@
|
||||
b.setAttribute('aria-pressed', b.dataset.view === loaded.view);
|
||||
b.textContent = (b.dataset.view === 'merged' ? 'Merged' : 'Pieces') + ` (${b.dataset.view === 'merged' ? m : n})`;
|
||||
}
|
||||
$('se-import-count').textContent = `${n} pieces` + (m === 1 ? ', which merge into one shape.' : `; not all of them touch, so merged they'd still be ${plural(m)}.`)
|
||||
+ (n > r || m > r ? ` There's room for ${Math.max(r, 0)} more shape${r === 1 ? '' : 's'} (${ROOM} at most).` : '');
|
||||
$('se-import-separate').textContent = `Add all ${n} separately`;
|
||||
// One short line; the full sentences are its tooltip.
|
||||
const { holes, strokes } = loaded, tight = n > r || m > r, s = (k, w) => `${k} ${w}${k === 1 ? '' : 's'}`;
|
||||
$('se-import-count').textContent = [`${n} pieces (${m} merged)`, holes && `${s(holes, 'hole')} filled`,
|
||||
strokes && `${s(strokes, 'line')} skipped`, tight && `room for ${Math.max(r, 0)}`].filter(Boolean).join(' · ');
|
||||
$('se-import-count').title = [`${n} pieces` + (m === 1 ? ', which merge into one shape.' : `; not all of them touch, so merged they'd still be ${plural(m)}.`),
|
||||
holesNote(holes), strokes ? `${s(strokes, 'line-only element')} left out.` : '',
|
||||
tight ? `There's room for ${Math.max(r, 0)} more shape${r === 1 ? '' : 's'} (${ROOM} at most).` : ''].filter(Boolean).join(' ');
|
||||
$('se-import-separate').textContent = `Add all ${n}`;
|
||||
$('se-import-separate').disabled = n > r;
|
||||
$('se-import-merge').textContent = m === 1 ? 'Merge all into one shape' : `Merge all into ${m} shapes`;
|
||||
$('se-import-merge').textContent = m === 1 ? 'Merge all into one' : `Merge all (${m} shapes)`;
|
||||
$('se-import-merge').disabled = m > r;
|
||||
}
|
||||
// The bar for picked tiles.
|
||||
@@ -1408,12 +1412,14 @@
|
||||
const sub = loaded && loaded.view === 'pieces' ? [...picked].map(Number).sort((a, b) => a - b).map((i) => loaded.pieces[i]) : null;
|
||||
const merged = sub && k > 1 ? mergedPieces(sub) : null;
|
||||
$('se-pick-count').textContent = `${k} picked` + (k > r ? `, room for ${Math.max(r, 0)}` : '');
|
||||
$('se-pick-add').textContent = loaded ? `Add ${k} separately` : `Add ${plural(k)}`;
|
||||
$('se-pick-add').textContent = `Add ${k}`;
|
||||
$('se-pick-add').title = loaded && k > 1 ? `Add the ${k} picked as separate shapes` : `Add ${plural(k)}`;
|
||||
$('se-pick-add').disabled = k > r;
|
||||
$('se-pick-merge').hidden = !merged;
|
||||
if (merged) {
|
||||
const m = merged.pieces.length;
|
||||
$('se-pick-merge').textContent = m === 1 ? 'Merge into one' : `Merge (${m} shapes)`;
|
||||
$('se-pick-merge').textContent = m === 1 ? 'Merge' : `Merge (${m})`;
|
||||
$('se-pick-merge').title = m === 1 ? 'Merge them into one shape' : `Merge them: not all of them touch, so they'd make ${m} shapes`;
|
||||
$('se-pick-merge').disabled = m > r;
|
||||
$('se-pick-merge').onclick = () => addMerged(merged);
|
||||
}
|
||||
@@ -1465,9 +1471,8 @@
|
||||
const notes = [holesNote(res.holes), res.strokes ? `${res.strokes} line-only element${res.strokes > 1 ? 's were' : ' was'} left out.` : ''];
|
||||
if (res.pieces.length === 1) { loaded = null; picked.clear(); renderAddGrid(); return addShapes(asShapes(res.pieces), notes); } // nothing to choose
|
||||
// The merge is worked out now, so the buttons can say how many shapes it makes.
|
||||
loaded = { pieces: res.pieces, merged: mergedPieces(res.pieces), notes, view: 'pieces' };
|
||||
loaded = { pieces: res.pieces, merged: mergedPieces(res.pieces), notes, holes: res.holes, strokes: res.strokes, view: 'pieces' };
|
||||
picked.clear();
|
||||
importMsg(notes.filter(Boolean).join(' '));
|
||||
renderAddGrid();
|
||||
};
|
||||
$('se-import-view').addEventListener('click', (e) => {
|
||||
|
||||
+12
-8
@@ -196,10 +196,10 @@ noindex: true # and out of search engines
|
||||
#se-add .contact-modal { max-width: 640px; }
|
||||
#se-add .contact-modal-desc { margin: 0 0 16px; }
|
||||
/* The dialog never grows past the screen: only the grid scrolls, so the buttons above it and the bar
|
||||
under it stay in view (the whole dialog scrolls only if even a one-row grid doesn't fit). */
|
||||
under it stay in view (the whole dialog scrolls only if even a two-row grid doesn't fit). */
|
||||
#se-add .contact-modal { max-height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
|
||||
#se-add .contact-modal > * { flex: none; }
|
||||
#se-add .contact-modal > .se-presets { flex: 1 1 auto; min-height: 110px; margin: 0; overflow-y: auto; }
|
||||
#se-add .contact-modal > .se-presets { flex: 1 1 auto; min-height: 220px; margin: 0; overflow-y: auto; align-content: start; } /* two rows of tiles; extra height stays empty instead of stretching them */
|
||||
@media (max-width: 480px) { #se-add { padding: 12px; } }
|
||||
/* On a very short screen the whole dialog scrolls: the bar then sticks to its bottom edge. */
|
||||
#se-add .se-pick-bar { position: sticky; bottom: 0; padding: 8px 0; margin-top: 4px; background: var(--md-surface-container-low); }
|
||||
@@ -216,7 +216,9 @@ noindex: true # and out of search engines
|
||||
.se-seg button + button { border-left: 1px solid var(--md-outline-variant); }
|
||||
.se-seg button[aria-pressed="true"] { background: var(--md-primary-container); color: var(--md-on-primary-container); }
|
||||
.se-pick-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
||||
.se-pick-bar span { margin-right: auto; font-size: .85rem; color: var(--md-on-surface-variant); }
|
||||
#se-pick-count { margin-right: auto; font-size: .85rem; color: var(--md-on-surface-variant); }
|
||||
/* The buttons stay on one row together: if they don't fit next to the count, they move under it as a group. */
|
||||
.se-pick-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
|
||||
.se-btn-primary { background: var(--md-primary); color: var(--md-on-primary); border-color: var(--md-primary); }
|
||||
.se-btn-primary:hover:not(:disabled) { background: var(--md-primary); filter: brightness(1.08); }
|
||||
#se-measure { position: absolute; width: 0; height: 0; overflow: hidden; }
|
||||
@@ -410,8 +412,8 @@ noindex: true # and out of search engines
|
||||
<p id="se-add-desc" class="contact-modal-desc"></p>
|
||||
<div class="se-import">
|
||||
<div class="se-row">
|
||||
<button id="se-import-btn" class="se-btn" type="button">Import an SVG file…</button>
|
||||
<button id="se-import-unload" class="se-btn" type="button" hidden>Back to the presets</button>
|
||||
<button id="se-import-btn" class="se-btn" type="button" title="Import the shapes of an SVG file">Import SVG…</button>
|
||||
<button id="se-import-unload" class="se-btn" type="button" title="Unload the SVG file and show the presets again" hidden>Presets</button>
|
||||
</div>
|
||||
<input id="se-import-file" type="file" accept=".svg,image/svg+xml" hidden>
|
||||
<p id="se-import-msg" class="se-hint" role="status" hidden></p>
|
||||
@@ -429,9 +431,11 @@ noindex: true # and out of search engines
|
||||
<div id="se-add-grid" class="se-presets"></div>
|
||||
<div id="se-pick-bar" class="se-pick-bar" hidden>
|
||||
<span id="se-pick-count"></span>
|
||||
<button id="se-pick-clear" class="se-btn" type="button">Cancel</button>
|
||||
<button id="se-pick-merge" class="se-btn" type="button" hidden>Merge</button>
|
||||
<button id="se-pick-add" class="se-btn se-btn-primary" type="button">Add</button>
|
||||
<span class="se-pick-actions">
|
||||
<button id="se-pick-clear" class="se-btn" type="button">Cancel</button>
|
||||
<button id="se-pick-merge" class="se-btn" type="button" hidden>Merge</button>
|
||||
<button id="se-pick-add" class="se-btn se-btn-primary" type="button">Add</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user