diff --git a/public/data/logos.json b/public/data/logos.json index 576a1f5..52bf0aa 100644 --- a/public/data/logos.json +++ b/public/data/logos.json @@ -1544,30 +1544,33 @@ "ua_yellow": "#FFDD00" }, "targets": { - "part_s1": "#s1", - "part_s2": "#s2", - "part_l": "#l" + "part_s": "#s", + "part_s_stroke": "#s&stroke", + "part_l": "#l", + "part_l_stroke": "#l&stroke" }, "sets": { "light": { - "part_s1": "red", - "part_s2": "red", - "part_l": "white" + "part_s": "red", + "part_l": "white", + "part_l_stroke": "black", + "part_s_stroke": "black" }, "dark": { - "part_s1": "red", - "part_s2": "red", - "part_l": "black" + "part_s": "red", + "part_l": "black", + "part_l_stroke": "white", + "part_s_stroke": "white" }, "uk": { - "part_s1": "uk_red", "part_s2": "uk_red", "part_l": "uk_blue" }, "ua": { - "part_s1": "ua_blue", - "part_s2": "ua_blue", - "part_l": "ua_yellow" + "part_s": "ua_blue", + "part_l": "ua_yellow", + "part_l_stroke": "none", + "part_s_stroke": "none" } } }, @@ -1582,7 +1585,7 @@ ] }, { - "name": "Shkafnik Logo", + "name": "Shkafnik", "path": "logos/shkafnik_logo.svg", "format": "SVG", "disable": false, diff --git a/public/logos/shadoll.svg b/public/logos/shadoll.svg index ea172fb..4d13cdc 100644 --- a/public/logos/shadoll.svg +++ b/public/logos/shadoll.svg @@ -1,8 +1,8 @@ - - - - + + + diff --git a/src/components/Actions.svelte b/src/components/Actions.svelte index 4bd90ec..674553a 100644 --- a/src/components/Actions.svelte +++ b/src/components/Actions.svelte @@ -393,7 +393,7 @@ top: 110%; right: auto; left: 0; - min-width: 200px; /* Increased width from 160px */ + min-width: 200px; background: var(--color-card, #fff); color: var(--color-text, #222); border: 1px solid var(--color-border, #ddd); @@ -407,7 +407,6 @@ pointer-events: auto; } - /* Dropdown menus are positioned with JavaScript instead of CSS */ .dropdown-item { background: none; color: var(--color-text, #222); @@ -439,7 +438,7 @@ padding-left: 5px; white-space: nowrap; } - /* Notification styles moved to Notification.svelte */ + .notification-overlay { position: fixed; top: 20px; diff --git a/src/components/CardFull.svelte b/src/components/CardFull.svelte index e5b03c1..e87b12e 100644 --- a/src/components/CardFull.svelte +++ b/src/components/CardFull.svelte @@ -23,12 +23,41 @@ // For SVG source code display let svgSource = ""; let isFetchingSvgSource = false; + let inlineSvgRef; // Reference to the InlineSvg component + + // Watch for color changes and update SVG source + function updateSvgSource() { + if (inlineSvgRef && typeof inlineSvgRef.getSvgSource === 'function') { + const newSource = inlineSvgRef.getSvgSource(); + if (newSource) { + svgSource = newSource; + } + } + } function isSvgLogo(logo) { return logo && logo.format && logo.format.toLowerCase() === "svg"; } function copySvgSourceFromTextarea() { - if (svgSource) { + if (inlineSvgRef && typeof inlineSvgRef.getSvgSource === 'function') { + // Get the updated SVG source with all color changes applied + const updatedSource = inlineSvgRef.getSvgSource(); + + try { + const tempEl = document.createElement('textarea'); + tempEl.value = updatedSource || svgSource; + document.body.appendChild(tempEl); + tempEl.select(); + document.execCommand('copy'); + document.body.removeChild(tempEl); + return true; + } catch (err) { + console.error("Error copying SVG source:", err); + window.prompt("Copy the SVG source code:", updatedSource || svgSource); + return false; + } + } else if (svgSource) { + // Fallback to the original source if component reference is not available try { navigator.clipboard.writeText(svgSource); return true; @@ -41,14 +70,18 @@ return false; } - $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme); + // Update SVG source every time the component rerenders with new colors + $: if (logo && (logo._activeColor || (logo && logo._activeSet))) { + // Use a small delay to ensure the SVG has been rendered with the new colors + setTimeout(updateSvgSource, 100); + } $: validColorConfig = logo && typeof logo.colorConfig === "object" && logo.colorConfig.selector ? logo.colorConfig : undefined; - // Only fetch SVG source when displayed + $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme); $: if (show && logo) { if (logo.format === "SVG" && !svgSource) { isFetchingSvgSource = true; @@ -106,6 +139,7 @@
{#if isSvgLogo(logo)} (logo._activeColor = undefined)} - on:keydown|stopPropagation={(e) => - (e.key === "Enter" || e.key === " ") && - (logo._activeColor = undefined)} + on:click|stopPropagation={() => { + logo._activeColor = undefined; + logo._activeSet = undefined; // Reset activeSet too + setTimeout(updateSvgSource, 100); // Update SVG source after color reset + }} + on:keydown|stopPropagation={(e) => { + if (e.key === "Enter" || e.key === " ") { + logo._activeColor = undefined; + logo._activeSet = undefined; + setTimeout(updateSvgSource, 100); + } + }} > { if (e.key === "Enter" || e.key === " ") { @@ -167,6 +210,7 @@ i % Object.keys(logo.colors).length ]; logo._activeSet = setName; + setTimeout(updateSvgSource, 100); // Update SVG source after color change } }} style="padding: 0; overflow: hidden;" @@ -182,11 +226,18 @@ style={`background:${colorValue}`} tabindex="0" role="button" - on:click|stopPropagation={() => - (logo._activeColor = colorValue)} - on:keydown|stopPropagation={(e) => - (e.key === "Enter" || e.key === " ") && - (logo._activeColor = colorValue)} + on:click|stopPropagation={() => { + logo._activeColor = colorValue; + logo._activeSet = undefined; // Clear any active set when setting individual color + setTimeout(updateSvgSource, 100); // Update SVG source after color change + }} + on:keydown|stopPropagation={(e) => { + if (e.key === "Enter" || e.key === " ") { + logo._activeColor = colorValue; + logo._activeSet = undefined; // Clear any active set + setTimeout(updateSvgSource, 100); // Update SVG source after color change + } + }} > {/each} {/if} diff --git a/src/components/InlineSvg.svelte b/src/components/InlineSvg.svelte index 6003141..79b45bf 100644 --- a/src/components/InlineSvg.svelte +++ b/src/components/InlineSvg.svelte @@ -9,6 +9,7 @@ export let colors = null; export let alt = ""; let svgHtml = ""; + let svgSource = ""; // Store the updated SVG source code async function fetchAndColorSvg() { const res = await fetch(path); @@ -58,37 +59,69 @@ // Remove all