github-personal/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2026-08-28 11:33:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement ColorSwitcher component and integrate it into logo cards for enhanced color selection

Browse Source
This commit is contained in:
sha
2025-06-12 03:27:57 +03:00
parent 7968d399f2
commit ec55af55d9
7 changed files with 324 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CardSmall.svelte
+30 -76
View File
@@ -1,8 +1,8 @@
<script>
import InlineSvg from './InlineSvg.svelte';
import Actions from './Actions.svelte';
import { getDefaultLogoColor } from '../utils/colorTheme.js';
import { generateColorSetCircle } from '../utils/colorCircles.js';
import InlineSvg from "./InlineSvg.svelte";
import Actions from "./Actions.svelte";
import ColorSwitcher from "./ColorSwitcher.svelte";
import { getDefaultLogoColor } from "../utils/colorTheme.js";
export let logo;
export let theme;
@@ -14,12 +14,12 @@
function openPreview(logo) {
// Navigate to preview page using router
const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase())}`;
const routerPath = `/preview/${encodeURIComponent(logo.name.replace(/\s+/g, "-").toLowerCase())}`;
window.location.hash = routerPath;
}
function isSvgLogo(logo) {
return logo && logo.format && logo.format.toLowerCase() === 'svg';
return logo && logo.format && logo.format.toLowerCase() === "svg";
}
$: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
@@ -32,17 +32,20 @@
tabindex="0"
aria-label="Preview {logo.name}"
on:click={() => {
console.log('CardList: Logo clicked, calling openPreview');
console.log("CardList: Logo clicked, calling openPreview");
openPreview(logo);
}}
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
on:keydown={(e) =>
(e.key === "Enter" || e.key === " ") && openPreview(logo)}
style="cursor:pointer;"
>
{#if isSvgLogo(logo)}
{#key theme + (logo._activeColor || '')}
{#key theme + (logo._activeColor || "")}
<InlineSvg
path={logo.path}
color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
color={logo.colors
? logo._activeColor || getLogoThemeColor(logo)
: undefined}
colorConfig={logo.colors ? logo.colorConfig : undefined}
targets={logo.targets}
sets={logo.sets}
@@ -63,15 +66,22 @@
class="brand-filter-btn"
title="Filter by brand"
on:click={() => {
console.log('CardList: Filtering by brand:', logo.brand);
console.log("CardList: Filtering by brand:", logo.brand);
addBrand(logo.brand);
}}
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z" />
<path
stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"
d="M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z"
/>
</svg>
{#if allLogos && allLogos.filter((l) => l.brand === logo.brand).length > 1}
<span class="brand-count">{allLogos.filter((l) => l.brand === logo.brand).length}</span>
<span class="brand-count"
>{allLogos.filter((l) => l.brand === logo.brand).length}</span
>
{/if}
</button>
{/if}
@@ -79,63 +89,10 @@
<div class="logo-details">
{#if logo.colors}
<div class="color-switcher-container">
<div class="color-switcher-preview">
<span
class="color-circle color-reset"
title="Reset to theme color"
tabindex="0"
role="button"
aria-label="Reset to theme color"
style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
on:click|stopPropagation={() => (logo._activeColor = undefined)}
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
>
<svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
<path
d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
fill="#33363f"
/>
</svg>
</span>
{#if logo.sets}
{#each Object.entries(logo.sets) as [setName, setConfig], i}
<span
class="color-circle set-circle"
title={`Color Set ${i + 1}: ${setName}`}
tabindex="0"
role="button"
on:click|stopPropagation={() => {
logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
logo._activeSet = setName;
}}
on:keydown|stopPropagation={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
logo._activeSet = setName;
}
}}
style="padding: 0; overflow: hidden;"
>
{@html generateColorSetCircle(logo.colors, setConfig)}
</span>
{/each}
{:else}
{#each Object.entries(logo.colors) as [colorName, colorValue], i}
<span
class="color-circle"
title={colorName.replace('_', ' ')}
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)}
></span>
{/each}
{/if}
</div>
</div>
<ColorSwitcher {logo} {theme} mode="standard" onSelect={(color, setName) => {
logo._activeColor = color;
logo._activeSet = setName;
}} />
{/if}
</div>
@@ -211,10 +168,6 @@
z-index: 20; /* Higher than the list item */
}
/* Apply higher z-index to the dropdown menus */
/* :global(.logo-list-item .dropdown-menu) { */
/* z-index: 100000 !important; */
/* } */
.brand-filter-btn {
background: none;
@@ -223,7 +176,9 @@
cursor: pointer;
padding: 0.2em 0.5em;
border-radius: 4px;
transition: background 0.2s, color 0.2s;
transition:
background 0.2s,
color 0.2s;
position: relative;
display: flex;
align-items: center;
@@ -279,5 +234,4 @@
:global(.list-item:hover) {
z-index: 2; /* Raise the z-index when hovered */
}
</style>