sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 09:31:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add new logos and refactor header component

Browse Source
This commit is contained in:
sHa
2025-05-01 01:51:14 +03:00
parent aaf7db1471
commit a49568a389
11 changed files with 432 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
src/App.svelte
View File

@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import LogoGrid from './components/Grid.svelte';
import LogoList from './components/List.svelte';
import Header from './components/Header.svelte';
let viewMode = 'grid'; // 'grid' or 'list'
let searchQuery = '';
@@ -191,73 +192,25 @@
</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">&times;</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}
{getTagObj}
{closeDropdown}
{filteredLogos}
/>
<div class="logos-container">
{#if viewMode === 'grid'}
@@ -280,298 +233,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>

2
src/components/Actions.svelte
View File

@@ -359,7 +359,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);

84
src/components/Header.svelte Normal file
View File

@@ -0,0 +1,84 @@
<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;
export let getTagObj;
</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}
{#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">&times;</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>

6
src/components/Preview.svelte
View File

@@ -159,7 +159,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
:global(.modal-content) {
background: var(--color-card);
color: var(--color-text);
color: var(--text-color);
border-radius: 8px;
padding: 1rem;
max-width: 500px;
@@ -186,7 +186,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-text, #222);
color: var(--text-color, #222);
transition: color 0.2s;
}
@@ -222,7 +222,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
.logo-details {
padding: 1rem;
background-color: var(--color-card);
color: var(--color-text);
color: var(--text-color);
border-radius: 4px;
transition: background 0.2s, color 0.2s;
}

98
src/components/Row.svelte
View File

@@ -1,7 +1,5 @@
<script>
export let logo;
export let onCopy;
export let onDownload;
export let view = 'grid'; // or 'list'
export let showActions = true;
export let onPreview = null;
@@ -69,99 +67,3 @@
</div>
{/if}
</div>
<style>
.logo-row {
display: flex;
align-items: center;
padding: 0.5em 0.5em;
border-bottom: 1px solid #eee;
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: #fff;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
cursor: pointer;
}
.logo-info {
flex: 1 1 auto;
min-width: 0;
}
.logo-actions {
display: flex;
align-items: center;
gap: 0.5em;
}
.color-switcher-preview {
display: flex;
align-items: center;
gap: 0.4em;
}
.color-switcher-preview.align-right {
justify-content: flex-end;
}
.color-switcher-preview.align-left {
justify-content: flex-start;
}
.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;
}
.color-circle.color-reset {
background: none !important;
}
.logo-tag {
display: inline-block;
background: var(--color-accent, #4f8cff);
color: #fff;
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;
}
.logo-card {
background: var(--color-card);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 8px;
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
min-width: 320px;
}
</style>