mirror of
https://github.com/shadoll/sLogos.git
synced 2025-12-20 18:32:15 +00:00
Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e842021a5a | |||
| 9a7f61193b | |||
| a49568a389 | |||
| aaf7db1471 |
2
ToDo.md
Normal file
2
ToDo.md
Normal file
@@ -0,0 +1,2 @@
|
||||
- png/jpg genareto can generate image all colors
|
||||
- for color palette add support combination
|
||||
11
public/data/tags.json
Normal file
11
public/data/tags.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"tech": {
|
||||
"color": "silver"
|
||||
},
|
||||
"retail": {
|
||||
"color": "#4f8cff"
|
||||
},
|
||||
"bank": {
|
||||
"color": "#27ae60"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,29 @@
|
||||
:root {
|
||||
--primary-color: #3498db;
|
||||
--primary-color-hover: #2980b9;
|
||||
--secondary-color: #2c3e50;
|
||||
--background-color: #f8f9fa;
|
||||
--card-background: #ffffff;
|
||||
--text-color: #333333;
|
||||
--white: #ffffff;
|
||||
--black: #000000;
|
||||
--color-border: #ddd;
|
||||
--card-background: var(--white);
|
||||
--color-bg: var(--background-color);
|
||||
--color-text: var(--text-color);
|
||||
--color-card: var(--card-background);
|
||||
--color-accent: var(--primary-color);
|
||||
--color-accent-hover: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
/* Dark theme overrides */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-card: #23272e;
|
||||
--background-color: #181a20;
|
||||
--color-text: #f5f6fa;
|
||||
--color-border: #333842;
|
||||
--color-accent: #4f8cff;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -12,10 +32,16 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global(html),
|
||||
:global(body) {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -23,13 +49,15 @@ body {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
@@ -37,13 +65,34 @@ button {
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2980b9;
|
||||
background-color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.view-toggle button {
|
||||
padding: 0.3rem 0.5rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-toggle button.active,
|
||||
.view-toggle button:focus {
|
||||
background: var(--color-accent);
|
||||
color: var(--white);
|
||||
font-weight: bold;
|
||||
outline: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
@@ -55,15 +104,17 @@ button:hover {
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.copy-btn,
|
||||
.copy-group .png-btn {
|
||||
background-color: var(--secondary-color, #2c3e50);
|
||||
color: #fff;
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
min-width: 2.5em;
|
||||
@@ -71,7 +122,7 @@ button:hover {
|
||||
margin: 0;
|
||||
padding: 0.4em 1em;
|
||||
font-size: 0.95em;
|
||||
border-right: 1px solid var(--color-border, #ddd);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
@@ -85,15 +136,15 @@ button:hover {
|
||||
.copy-btn:hover,
|
||||
.copy-group .png-btn:focus,
|
||||
.copy-group .png-btn:hover {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.download-btn,
|
||||
.download-group .png-btn {
|
||||
background: #27ae60;
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
min-width: 2.5em;
|
||||
@@ -101,7 +152,7 @@ button:hover {
|
||||
margin: 0;
|
||||
padding: 0.4em 1em;
|
||||
font-size: 0.95em;
|
||||
border-right: 1px solid var(--color-border, #ddd);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
@@ -115,11 +166,12 @@ button:hover {
|
||||
.download-group .png-btn:focus,
|
||||
.download-group .png-btn:hover {
|
||||
background: #219150;
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.copy-group, .download-group {
|
||||
.copy-group,
|
||||
.download-group {
|
||||
display: inline-flex;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
@@ -128,18 +180,36 @@ button:hover {
|
||||
}
|
||||
|
||||
/* Shared color switcher and color circle styles */
|
||||
.color-circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: border 0.2s, box-shadow 0.2s;
|
||||
.format-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.color-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 4px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.color-circle:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.color-circle.color-reset {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.color-switcher-preview,
|
||||
.color-switcher-inline,
|
||||
.color-switcher-under {
|
||||
@@ -147,26 +217,39 @@ button:hover {
|
||||
gap: 0.4em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-switcher-preview {
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.color-switcher-preview.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.color-switcher-preview.align-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.color-switcher-inline {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.color-switcher-under {
|
||||
margin: 0.5em 0 0 0;
|
||||
}
|
||||
|
||||
.logo-tag {
|
||||
display: inline-block;
|
||||
background: var(--color-accent, #4f8cff);
|
||||
color: #fff;
|
||||
background: var(--color-accent);
|
||||
color: var(--white);
|
||||
border-radius: 12px;
|
||||
padding: 0.2em 0.8em;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
margin-right: 0.3em;
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0.2em;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
@@ -174,10 +257,11 @@ button:hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.logo-info {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 1rem;
|
||||
@@ -198,7 +282,8 @@ button:hover {
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.logo-preview img {
|
||||
.logo-preview img,
|
||||
div.logo-image img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
@@ -208,32 +293,6 @@ button:hover {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.format-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Direct logo image size constraints that will work with any component structure */
|
||||
div.logo-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* background-color removed for theme support */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.logo-image img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-image svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -245,7 +304,6 @@ div.logo-image img {
|
||||
|
||||
/* Grid specific */
|
||||
.logo-grid .logo-item .logo-image {
|
||||
/* height: 160px; */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -254,16 +312,156 @@ div.logo-image img {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
height: 100px;
|
||||
border-right: 1px solid #eee;
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Dark theme overrides */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-card: #23272e;
|
||||
--background-color: #181a20;
|
||||
--color-text: #f5f6fa;
|
||||
--color-border: #333842;
|
||||
--color-accent: #4f8cff;
|
||||
/* Row specific */
|
||||
.logo-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em 0.5em;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.logo-row.grid {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
border-bottom: none;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.logo-row.list {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
padding: 0.5em 0.5em;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
flex-shrink: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-card);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
.main-header {
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border-radius: 8px;
|
||||
padding: 1.2rem 1rem 0.7rem 1rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-count {
|
||||
font-family: system-ui, Arial, sans-serif;
|
||||
font-size: 0.6rem;
|
||||
font-weight: normal;
|
||||
color: var(--color-text);
|
||||
margin-left: 1rem;
|
||||
align-self: center;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.theme-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.theme-switch-group {
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-card);
|
||||
}
|
||||
|
||||
.theme-switch-group button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text);
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: 1.1rem;
|
||||
border-radius: 0;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-switch-group button:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
.theme-switch-group button:last-child {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.theme-switch-group button.active,
|
||||
.theme-switch-group button:focus {
|
||||
background: var(--color-accent);
|
||||
color: var(--white);
|
||||
font-weight: bold;
|
||||
outline: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.theme-switch-group button:hover {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-accent-text);
|
||||
}
|
||||
|
||||
.logos-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.header-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
393
src/App.svelte
393
src/App.svelte
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Grid from './components/Grid.svelte';
|
||||
import List from './components/List.svelte';
|
||||
import LogoGrid from './components/LogoGrid.svelte';
|
||||
import LogoList from './components/LogoList.svelte';
|
||||
|
||||
let viewMode = 'grid'; // 'grid' or 'list'
|
||||
let searchQuery = '';
|
||||
@@ -140,6 +140,7 @@
|
||||
effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', effectiveTheme);
|
||||
console.log('[theme] Applied theme:', effectiveTheme, '(from', theme, ')');
|
||||
}
|
||||
|
||||
function setTheme(newTheme) {
|
||||
@@ -178,10 +179,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function getTagObj(text) {
|
||||
return allTags.find(t => t.text === text);
|
||||
}
|
||||
|
||||
// Listen for outside click to close dropdown
|
||||
$: if (tagDropdownOpen) {
|
||||
window.addEventListener('click', closeDropdown);
|
||||
@@ -191,84 +188,35 @@
|
||||
</script>
|
||||
|
||||
<main class="container">
|
||||
<header class="main-header">
|
||||
<div class="header-row">
|
||||
<h1>Logo Gallery</h1>
|
||||
<span class="logo-count">{logos.length} images in gallery</span>
|
||||
<div class="theme-switcher">
|
||||
<div class="theme-switch-group">
|
||||
<button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
<button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
<button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-row header-controls">
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search logos..." bind:value={searchQuery} />
|
||||
</div>
|
||||
<div class="tag-filter">
|
||||
{#each selectedTags as tagText}
|
||||
{#if getTagObj(tagText)}
|
||||
<button
|
||||
class="selected-tag"
|
||||
style={getTagObj(tagText).color ? `background: ${getTagObj(tagText).color}; color: #fff;` : ''}
|
||||
aria-label={`Remove tag: ${getTagObj(tagText).text}`}
|
||||
on:click={() => removeTag(getTagObj(tagText).text)}
|
||||
>
|
||||
{getTagObj(tagText).text}
|
||||
<span class="close">×</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
<div class="tag-dropdown">
|
||||
<button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
|
||||
+ Tag{selectedTags.length ? '' : 's'}
|
||||
</button>
|
||||
{#if tagDropdownOpen}
|
||||
<div class="dropdown-list">
|
||||
{#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj}
|
||||
<button
|
||||
class="dropdown-tag"
|
||||
style={tagObj.color ? `background: ${tagObj.color}; color: #fff;` : ''}
|
||||
on:click={() => addTag(tagObj.text)}
|
||||
aria-label={`Add tag: ${tagObj.text}`}
|
||||
>{tagObj.text}</button>
|
||||
{/each}
|
||||
{#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0}
|
||||
<span class="no-tags">No more tags</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-toggle">
|
||||
<button class:active={viewMode === 'grid'} on:click={setGridView} aria-label="Grid view">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="6" height="6" fill="currentColor"/><rect x="11" y="3" width="6" height="6" fill="currentColor"/><rect x="3" y="11" width="6" height="6" fill="currentColor"/><rect x="11" y="11" width="6" height="6" fill="currentColor"/></svg>
|
||||
</button>
|
||||
<button class:active={viewMode === 'list'} on:click={setListView} aria-label="List view">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="5" width="12" height="2" fill="currentColor"/><rect x="4" y="9" width="12" height="2" fill="currentColor"/><rect x="4" y="13" width="12" height="2" fill="currentColor"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Header
|
||||
{logos}
|
||||
{theme}
|
||||
{setTheme}
|
||||
{viewMode}
|
||||
{setGridView}
|
||||
{setListView}
|
||||
bind:searchQuery
|
||||
{allTags}
|
||||
{selectedTags}
|
||||
{tagDropdownOpen}
|
||||
{toggleDropdown}
|
||||
{addTag}
|
||||
{removeTag}
|
||||
{toggleTag}
|
||||
{closeDropdown}
|
||||
{filteredLogos}
|
||||
/>
|
||||
|
||||
<div class="logos-container">
|
||||
{#if viewMode === 'grid'}
|
||||
<Grid
|
||||
<LogoGrid
|
||||
logos={filteredLogos}
|
||||
onCopy={copyUrl}
|
||||
onDownload={downloadLogo}
|
||||
theme={effectiveTheme}
|
||||
/>
|
||||
{:else}
|
||||
<List
|
||||
<LogoList
|
||||
logos={filteredLogos}
|
||||
onCopy={copyUrl}
|
||||
onDownload={downloadLogo}
|
||||
@@ -280,298 +228,3 @@
|
||||
<p>shadoll Logo Gallery. All logos are property of their respective owners.</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:global(:root) {
|
||||
--color-bg: #fff;
|
||||
--color-text: #222;
|
||||
--color-card: #f8f8f8;
|
||||
--color-border: #ddd;
|
||||
--color-accent: #4f8cff;
|
||||
}
|
||||
:global([data-theme='dark']) {
|
||||
--color-bg: #181a1b;
|
||||
--color-text: #f3f3f3;
|
||||
--color-card: #23272a;
|
||||
--color-border: #333;
|
||||
--color-accent: #7da6ff;
|
||||
}
|
||||
:global(html), :global(body) {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.main-header {
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border-radius: 8px;
|
||||
padding: 1.2rem 1rem 0.7rem 1rem;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 0;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logo-count {
|
||||
font-family: system-ui, Arial, sans-serif;
|
||||
font-size: 0.6rem;
|
||||
font-weight: normal;
|
||||
color: var(--color-text, #444);
|
||||
margin-left: 1rem;
|
||||
align-self: center;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.search-bar input::placeholder {
|
||||
color: #888;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tag-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-filter .selected-tag {
|
||||
background: var(--color-accent, #4f8cff);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0.2em 0.8em 0.2em 0.8em;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
opacity: 1;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.tag-filter .selected-tag .close {
|
||||
margin-left: 0.4em;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.tag-filter .selected-tag .close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tag-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tag-dropdown .dropdown-toggle {
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 0.2em 0.8em;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-left: 0.2em;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.tag-dropdown .dropdown-list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 110%;
|
||||
min-width: 120px;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
z-index: 10;
|
||||
padding: 0.4em 0.2em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2em;
|
||||
}
|
||||
|
||||
.tag-dropdown .dropdown-tag {
|
||||
background: var(--color-accent, #4f8cff);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0.2em 0.8em;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
margin: 0.1em 0;
|
||||
text-align: left;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.tag-dropdown .dropdown-tag:hover {
|
||||
opacity: 1;
|
||||
background: var(--color-accent, #4f8cff);
|
||||
}
|
||||
|
||||
.tag-dropdown .no-tags {
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
padding: 0.3em 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.view-toggle button {
|
||||
padding: 0.3rem 0.5rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-toggle button.active,
|
||||
.view-toggle button:focus {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
outline: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.theme-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.theme-switch-group {
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border, #ccc);
|
||||
background: var(--color-card, #fff);
|
||||
}
|
||||
|
||||
.theme-switch-group button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text);
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: 1.1rem;
|
||||
border-radius: 0;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-switch-group button:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
.theme-switch-group button:last-child {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.theme-switch-group button.active,
|
||||
.theme-switch-group button:focus {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
outline: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.theme-switch-group button:hover {
|
||||
background: var(--color-accent, #f0f0f0);
|
||||
color: var(--color-accent-text, #4f8cff);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.header-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logos-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.logo-card), :global(.logo-item) {
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
80
src/components/Header.svelte
Normal file
80
src/components/Header.svelte
Normal file
@@ -0,0 +1,80 @@
|
||||
<script>
|
||||
export let logos = [];
|
||||
export let theme;
|
||||
export let setTheme;
|
||||
export let viewMode;
|
||||
export let setGridView;
|
||||
export let setListView;
|
||||
export let searchQuery;
|
||||
export let allTags = [];
|
||||
export let selectedTags = [];
|
||||
export let tagDropdownOpen;
|
||||
export let toggleDropdown;
|
||||
export let addTag;
|
||||
export let removeTag;
|
||||
</script>
|
||||
|
||||
<header class="main-header">
|
||||
<div class="header-row">
|
||||
<h1>Logo Gallery</h1>
|
||||
<span class="logo-count">{logos.length} images in gallery</span>
|
||||
<div class="theme-switcher">
|
||||
<div class="theme-switch-group">
|
||||
<button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
<button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
<button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-row header-controls">
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search logos..." bind:value={searchQuery} />
|
||||
</div>
|
||||
<div class="tag-filter">
|
||||
{#each selectedTags as tagText}
|
||||
<button
|
||||
class="selected-tag"
|
||||
aria-label={`Remove tag: ${tagText}`}
|
||||
on:click={() => removeTag(tagText)}
|
||||
>
|
||||
{tagText}
|
||||
<span class="close">×</span>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="tag-dropdown">
|
||||
<button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
|
||||
+ Tag{selectedTags.length ? '' : 's'}
|
||||
</button>
|
||||
{#if tagDropdownOpen}
|
||||
<div class="dropdown-list">
|
||||
{#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj}
|
||||
<button
|
||||
class="dropdown-tag"
|
||||
style={tagObj.color ? `background: ${tagObj.color}; color: #fff;` : ''}
|
||||
on:click={() => addTag(tagObj.text)}
|
||||
aria-label={`Add tag: ${tagObj.text}`}
|
||||
>{tagObj.text}</button>
|
||||
{/each}
|
||||
{#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0}
|
||||
<span class="no-tags">No more tags</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-toggle">
|
||||
<button class:active={viewMode === 'grid'} on:click={setGridView} aria-label="Grid view">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="6" height="6" fill="currentColor"/><rect x="11" y="3" width="6" height="6" fill="currentColor"/><rect x="3" y="11" width="6" height="6" fill="currentColor"/><rect x="11" y="11" width="6" height="6" fill="currentColor"/></svg>
|
||||
</button>
|
||||
<button class:active={viewMode === 'list'} on:click={setListView} aria-label="List view">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="5" width="12" height="2" fill="currentColor"/><rect x="4" y="9" width="12" height="2" fill="currentColor"/><rect x="4" y="13" width="12" height="2" fill="currentColor"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1,11 +1,10 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { onMount } from 'svelte';
|
||||
export let path;
|
||||
export let color;
|
||||
export let colorConfig = { target: "path", attribute: "fill" };
|
||||
export const alt = "";
|
||||
export let colorConfig = { target: 'path', attribute: 'fill' };
|
||||
|
||||
let svgHtml = "";
|
||||
let svgHtml = '';
|
||||
|
||||
async function fetchAndColorSvg() {
|
||||
const res = await fetch(path);
|
||||
@@ -17,10 +16,10 @@
|
||||
}
|
||||
// Parse and update color only if user selected
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(text, "image/svg+xml");
|
||||
const doc = parser.parseFromString(text, 'image/svg+xml');
|
||||
// 1. Parse <style> rules and apply as inline attributes before removing <style>
|
||||
const styleEls = Array.from(doc.querySelectorAll("style"));
|
||||
styleEls.forEach((styleEl) => {
|
||||
const styleEls = Array.from(doc.querySelectorAll('style'));
|
||||
styleEls.forEach(styleEl => {
|
||||
const css = styleEl.textContent;
|
||||
// Only handle simple .class { ... } rules
|
||||
const regex = /\.([\w-]+)\s*{([^}]*)}/g;
|
||||
@@ -29,22 +28,19 @@
|
||||
const className = match[1];
|
||||
const rules = match[2];
|
||||
// Find all elements with this class
|
||||
doc.querySelectorAll("." + className).forEach((el) => {
|
||||
rules.split(";").forEach((rule) => {
|
||||
const [prop, value] = rule.split(":").map((s) => s && s.trim());
|
||||
doc.querySelectorAll('.' + className).forEach(el => {
|
||||
rules.split(';').forEach(rule => {
|
||||
const [prop, value] = rule.split(':').map(s => s && s.trim());
|
||||
if (prop && value) {
|
||||
// Apply all style properties, not just fill/stroke
|
||||
el.setAttribute(
|
||||
prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase()),
|
||||
value,
|
||||
);
|
||||
el.setAttribute(prop.replace(/-([a-z])/g, g => g[1].toUpperCase()), value);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
// Remove all <style> elements
|
||||
styleEls.forEach((styleEl) => styleEl.remove());
|
||||
styleEls.forEach(styleEl => styleEl.remove());
|
||||
let targets;
|
||||
if (colorConfig.selector) {
|
||||
targets = doc.querySelectorAll(colorConfig.selector);
|
||||
@@ -53,21 +49,21 @@
|
||||
} else {
|
||||
targets = [];
|
||||
}
|
||||
targets.forEach((el) => {
|
||||
targets.forEach(el => {
|
||||
if (colorConfig.attribute) {
|
||||
// Legacy: force a single attribute
|
||||
el.setAttribute(colorConfig.attribute, color);
|
||||
} else {
|
||||
// Always override fill and stroke unless they are 'none'
|
||||
if (el.hasAttribute("fill") && el.getAttribute("fill") !== "none") {
|
||||
el.setAttribute("fill", color);
|
||||
if (el.hasAttribute('fill') && el.getAttribute('fill') !== 'none') {
|
||||
el.setAttribute('fill', color);
|
||||
}
|
||||
if (el.hasAttribute("stroke") && el.getAttribute("stroke") !== "none") {
|
||||
el.setAttribute("stroke", color);
|
||||
if (el.hasAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
|
||||
el.setAttribute('stroke', color);
|
||||
}
|
||||
if (!el.hasAttribute("fill") && !el.hasAttribute("stroke")) {
|
||||
if (!el.hasAttribute('fill') && !el.hasAttribute('stroke')) {
|
||||
// If neither, prefer fill
|
||||
el.setAttribute("fill", color);
|
||||
el.setAttribute('fill', color);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -360,7 +360,7 @@
|
||||
right: 0;
|
||||
min-width: 160px;
|
||||
background: var(--color-card, #fff);
|
||||
color: var(--color-text, #222);
|
||||
color: var(--text-color, #222);
|
||||
border: 1px solid var(--color-border, #ddd);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Preview from './Preview.svelte';
|
||||
import Actions from './Actions.svelte';
|
||||
import LogoModal from './LogoModal.svelte';
|
||||
import LogoActions from './LogoActions.svelte';
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
|
||||
@@ -53,7 +53,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
|
||||
<LogoModal show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
|
||||
|
||||
<div class="logo-grid">
|
||||
{#each logos as logo}
|
||||
@@ -115,7 +115,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-actions">
|
||||
<Actions {logo} {onCopy} {onDownload} />
|
||||
<LogoActions {logo} {onCopy} {onDownload} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Preview from './Preview.svelte';
|
||||
import Actions from './Actions.svelte';
|
||||
import LogoModal from './LogoModal.svelte';
|
||||
import LogoActions from './LogoActions.svelte';
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import { getThemeColor, getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
@@ -64,7 +64,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Preview show={showModal} logo={selectedLogo} on:close={closeModal} />
|
||||
<LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
|
||||
|
||||
<div class="logo-list">
|
||||
{#each logos as logo}
|
||||
@@ -77,7 +77,8 @@
|
||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
|
||||
style="cursor:pointer;"
|
||||
>
|
||||
{#if isSvgLogo(logo)} <InlineSvg
|
||||
{#if isSvgLogo(logo)}
|
||||
<InlineSvg
|
||||
path={logo.path}
|
||||
color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
|
||||
colorConfig={logo.colors ? logo.colorConfig : undefined}
|
||||
@@ -124,7 +125,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-actions">
|
||||
<Actions {logo} {onCopy} {onDownload} />
|
||||
<LogoActions {logo} {onCopy} {onDownload} />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -1,10 +1,16 @@
|
||||
<script>
|
||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
<<<<<<< HEAD:src/components/Preview.svelte
|
||||
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||
import { loadTagsData, getTagObj } from '../utils/tagUtils.js';
|
||||
=======
|
||||
import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
|
||||
>>>>>>> parent of aaf7db1 (feat: Refactor logo components into Grid and List views):src/components/LogoModal.svelte
|
||||
|
||||
export let show = false;
|
||||
export let logo = null;
|
||||
export let theme;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@@ -22,6 +28,15 @@
|
||||
return logo && logo.format && logo.format.toLowerCase() === 'svg';
|
||||
}
|
||||
|
||||
<<<<<<< HEAD:src/components/Preview.svelte
|
||||
function getLogoThemeColor(logo) {
|
||||
return logo && logo.colors ? getDefaultLogoColor(logo.colors, theme) : undefined;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
await loadTagsData();
|
||||
=======
|
||||
// Always use $theme directly, do not cache in a function
|
||||
export let theme;
|
||||
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
@@ -37,6 +52,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
|
||||
onMount(() => {
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
>>>>>>> parent of aaf7db1 (feat: Refactor logo components into Grid and List views):src/components/LogoModal.svelte
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
@@ -44,26 +60,12 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="modal-backdrop"
|
||||
style="display: {show && logo ? 'flex' : 'none'}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div class="modal-backdrop" class:show style="display: {show ? 'flex' : 'none'}" on:click={close}>
|
||||
{#if logo}
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>{logo.name}</h2>
|
||||
<button class="close-btn" on:click={close} aria-label="Close preview">×</button>
|
||||
</div>
|
||||
<div class="modal-content" on:click|stopPropagation>
|
||||
<button class="close-btn" on:click={close} aria-label="Close modal">×</button>
|
||||
<div class="modal-body">
|
||||
<div class="preview-container"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Close preview"
|
||||
on:click={close}
|
||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && close()}
|
||||
style="cursor:pointer;"
|
||||
>
|
||||
<div class="preview-image-container">
|
||||
{#if isSvgLogo(logo)}
|
||||
<InlineSvg
|
||||
path={logo.path}
|
||||
@@ -76,6 +78,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-details">
|
||||
<h2>{logo.name}</h2>
|
||||
{#if isSvgLogo(logo) && logo.colors}
|
||||
<div class="color-switcher-preview">
|
||||
<span
|
||||
@@ -88,7 +91,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
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" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
|
||||
<path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
|
||||
</svg>
|
||||
@@ -113,8 +116,17 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
<p><strong>Path:</strong> {logo.path}</p>
|
||||
{#if logo.tags && logo.tags.length}
|
||||
<div class="logo-tags">
|
||||
<<<<<<< HEAD:src/components/Preview.svelte
|
||||
{#each logo.tags as tag}
|
||||
{#if getTagObj(tag).color}
|
||||
<span class="logo-tag" style={`background:${getTagObj(tag).color}`}>{tag}</span>
|
||||
{:else}
|
||||
<span class="logo-tag">{tag}</span>
|
||||
{/if}
|
||||
=======
|
||||
{#each logo.tags as tagObj}
|
||||
<span class="logo-tag" style={tagObj.color ? `background:${tagObj.color}` : ''}>{tagObj.text || tagObj}</span>
|
||||
>>>>>>> parent of aaf7db1 (feat: Refactor logo components into Grid and List views):src/components/LogoModal.svelte
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -125,118 +137,91 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.modal-backdrop) {
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,0.7);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
:global(.modal-content) {
|
||||
.modal-content {
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 32px rgba(0,0,0,0.18);
|
||||
max-width: 96vw;
|
||||
max-height: 96vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
overflow: auto;
|
||||
}
|
||||
.preview-image-container {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.preview-image-container img,
|
||||
.preview-image-container :global(svg) {
|
||||
max-width: 90%;
|
||||
max-height: 70vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 2rem;
|
||||
font-size: 2.2rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
z-index: 1100;
|
||||
padding: 0.2em 0.5em;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.close-btn:hover {
|
||||
background: rgba(0,0,0,0.18);
|
||||
}
|
||||
.logo-details {
|
||||
padding: 1rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.logo-details h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text, #222);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--color-accent, #4f8cff);
|
||||
}
|
||||
|
||||
.modal-body img {
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--color-card);
|
||||
border-radius: 4px;
|
||||
padding: 2rem;
|
||||
min-height: 200px;
|
||||
max-height: 60vh;
|
||||
max-width: 100%;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preview-container img {
|
||||
max-width: 100%;
|
||||
max-height: 60vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-details {
|
||||
padding: 1rem;
|
||||
background-color: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.logo-details p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-tags {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.color-switcher-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-circle.color-reset {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.color-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 4px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
71
src/components/Row.svelte
Normal file
71
src/components/Row.svelte
Normal file
@@ -0,0 +1,71 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
export let logo;
|
||||
export let view = 'grid'; // or 'list'
|
||||
export let showActions = true;
|
||||
export let onPreview = null;
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||
import { loadTagsData, getTagObj } from '../utils/tagUtils.js';
|
||||
|
||||
onMount(async () => {
|
||||
await loadTagsData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="logo-row {view}">
|
||||
<div
|
||||
class="logo-img"
|
||||
on:click={onPreview}
|
||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && onPreview && onPreview()}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label="Preview logo"
|
||||
>
|
||||
{#if logo.format && logo.format.toLowerCase() === 'svg'}
|
||||
<InlineSvg path={logo.path} color={logo.colors ? (logo._activeColor || getDefaultLogoColor(logo.colors)) : undefined} colorConfig={logo.colors ? logo.colorConfig : undefined} alt={logo.name} />
|
||||
{:else}
|
||||
<img src={logo.path} alt={logo.name} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-info">
|
||||
<h3>{logo.name}</h3>
|
||||
<div class="format-row">
|
||||
<span><strong>Format:</strong> {logo.format}</span>
|
||||
{#if logo.colors}
|
||||
<div class="color-switcher-preview {view === 'grid' ? 'align-right' : 'align-left'}">
|
||||
<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" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
|
||||
<path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
|
||||
</svg>
|
||||
</span>
|
||||
{#each logo.colors as colorObj}
|
||||
<span class="color-circle" title={colorObj.label} style={`background:${colorObj.value}`} tabindex="0" role="button"
|
||||
on:click|stopPropagation={() => logo._activeColor = colorObj.value}
|
||||
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if logo.tags && logo.tags.length}
|
||||
<div class="logo-tags">
|
||||
{#each logo.tags as tag}
|
||||
{#if getTagObj(tag).color}
|
||||
<span class="logo-tag" style={`background:${getTagObj(tag).color}`}>{tag}</span>
|
||||
{:else}
|
||||
<span class="logo-tag">{tag}</span>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<slot name="extra" />
|
||||
</div>
|
||||
{#if showActions}
|
||||
<div class="logo-actions">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
27
src/utils/tagUtils.js
Normal file
27
src/utils/tagUtils.js
Normal file
@@ -0,0 +1,27 @@
|
||||
// Shared tag data loading and utilities
|
||||
let tagsDataPromise = null;
|
||||
let tagsData = null;
|
||||
|
||||
// Load tags data once and cache it
|
||||
export function loadTagsData() {
|
||||
if (!tagsDataPromise) {
|
||||
tagsDataPromise = fetch('/data/tags.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log('Tags data loaded successfully:', data);
|
||||
tagsData = data;
|
||||
return data;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to load tags data:', err);
|
||||
return {};
|
||||
});
|
||||
}
|
||||
return tagsDataPromise;
|
||||
}
|
||||
|
||||
// Get tag object (with color) from tag text
|
||||
export function getTagObj(text) {
|
||||
if (!tagsData) return { text };
|
||||
return tagsData[text] ? { text, ...tagsData[text] } : { text };
|
||||
}
|
||||
Reference in New Issue
Block a user