mirror of
https://github.com/shadoll/sLogos.git
synced 2025-12-20 15:32:03 +00:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e842021a5a | |||
| 9a7f61193b | |||
| a49568a389 |
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
|
||||||
@@ -28,10 +28,7 @@
|
|||||||
"disable": false,
|
"disable": false,
|
||||||
"brand": "Apple",
|
"brand": "Apple",
|
||||||
"tags": [
|
"tags": [
|
||||||
{
|
"tech"
|
||||||
"text": "tech",
|
|
||||||
"color": "silver"
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
"colors": [
|
"colors": [
|
||||||
{
|
{
|
||||||
@@ -74,7 +71,13 @@
|
|||||||
"transport",
|
"transport",
|
||||||
"garage"
|
"garage"
|
||||||
],
|
],
|
||||||
"brand": "Dalnoboy Service"
|
"brand": "Dalnoboy Service",
|
||||||
|
"colors": [
|
||||||
|
{
|
||||||
|
"label": "Orange",
|
||||||
|
"value": "#ee7800"
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Disney",
|
"name": "Disney",
|
||||||
@@ -130,10 +133,7 @@
|
|||||||
"disable": false,
|
"disable": false,
|
||||||
"brand": "Google",
|
"brand": "Google",
|
||||||
"tags": [
|
"tags": [
|
||||||
{
|
"tech"
|
||||||
"text": "tech",
|
|
||||||
"color": "silver"
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -367,6 +367,16 @@
|
|||||||
"tags": [],
|
"tags": [],
|
||||||
"brand": "Nvidia"
|
"brand": "Nvidia"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Okko",
|
||||||
|
"path": "logos/okko.svg",
|
||||||
|
"format": "SVG",
|
||||||
|
"disable": false,
|
||||||
|
"tags": [
|
||||||
|
"fuel"
|
||||||
|
],
|
||||||
|
"brand": "Okko"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Privat24",
|
"name": "Privat24",
|
||||||
"path": "logos/privat24.svg",
|
"path": "logos/privat24.svg",
|
||||||
@@ -581,5 +591,15 @@
|
|||||||
"finance",
|
"finance",
|
||||||
"transfer"
|
"transfer"
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "WOG",
|
||||||
|
"path": "logos/wog.svg",
|
||||||
|
"format": "SVG",
|
||||||
|
"disable": false,
|
||||||
|
"tags": [
|
||||||
|
"fuel"
|
||||||
|
],
|
||||||
|
"brand": "WOG"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
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 {
|
:root {
|
||||||
--primary-color: #3498db;
|
--primary-color: #3498db;
|
||||||
|
--primary-color-hover: #2980b9;
|
||||||
--secondary-color: #2c3e50;
|
--secondary-color: #2c3e50;
|
||||||
--background-color: #f8f9fa;
|
--background-color: #f8f9fa;
|
||||||
--card-background: #ffffff;
|
|
||||||
--text-color: #333333;
|
--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;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(html),
|
||||||
|
:global(body) {
|
||||||
|
background: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
background-color: var(--background-color);
|
background-color: var(--color-bg);
|
||||||
color: var(--text-color);
|
color: var(--color-text);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -23,13 +49,15 @@ body {
|
|||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
background: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--color-accent);
|
||||||
color: white;
|
color: var(--white);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
@@ -37,13 +65,34 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #2980b9;
|
background-color: var(--color-accent-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-toggle {
|
.view-toggle {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
gap: 0.2rem;
|
||||||
margin-bottom: 1rem;
|
}
|
||||||
|
|
||||||
|
.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 {
|
.search-bar {
|
||||||
@@ -55,15 +104,17 @@ button:hover {
|
|||||||
.search-bar input {
|
.search-bar input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid var(--color-border);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
background: var(--color-card);
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-btn,
|
.copy-btn,
|
||||||
.copy-group .png-btn {
|
.copy-group .png-btn {
|
||||||
background-color: var(--secondary-color, #2c3e50);
|
background-color: var(--secondary-color);
|
||||||
color: #fff;
|
color: var(--white);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
min-width: 2.5em;
|
min-width: 2.5em;
|
||||||
@@ -71,7 +122,7 @@ button:hover {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.4em 1em;
|
padding: 0.4em 1em;
|
||||||
font-size: 0.95em;
|
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;
|
transition: background 0.2s, color 0.2s;
|
||||||
text-wrap: nowrap;
|
text-wrap: nowrap;
|
||||||
}
|
}
|
||||||
@@ -85,15 +136,15 @@ button:hover {
|
|||||||
.copy-btn:hover,
|
.copy-btn:hover,
|
||||||
.copy-group .png-btn:focus,
|
.copy-group .png-btn:focus,
|
||||||
.copy-group .png-btn:hover {
|
.copy-group .png-btn:hover {
|
||||||
background: #222;
|
background: var(--black);
|
||||||
color: #fff;
|
color: var(--white);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-btn,
|
.download-btn,
|
||||||
.download-group .png-btn {
|
.download-group .png-btn {
|
||||||
background: #27ae60;
|
background: #27ae60;
|
||||||
color: #fff;
|
color: var(--white);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
min-width: 2.5em;
|
min-width: 2.5em;
|
||||||
@@ -101,7 +152,7 @@ button:hover {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.4em 1em;
|
padding: 0.4em 1em;
|
||||||
font-size: 0.95em;
|
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;
|
transition: background 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -115,31 +166,50 @@ button:hover {
|
|||||||
.download-group .png-btn:focus,
|
.download-group .png-btn:focus,
|
||||||
.download-group .png-btn:hover {
|
.download-group .png-btn:hover {
|
||||||
background: #219150;
|
background: #219150;
|
||||||
color: #fff;
|
color: var(--white);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-group, .download-group {
|
.copy-group,
|
||||||
|
.download-group {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Shared color switcher and color circle styles */
|
/* Shared color switcher and color circle styles */
|
||||||
|
.format-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.color-circle {
|
.color-circle {
|
||||||
width: 20px;
|
width: 24px;
|
||||||
height: 20px;
|
height: 24px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
box-sizing: border-box;
|
||||||
transition: border 0.2s, box-shadow 0.2s;
|
padding: 0;
|
||||||
|
transition: box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-circle:hover {
|
.color-circle:hover {
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color-circle.color-reset {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.color-switcher-preview,
|
.color-switcher-preview,
|
||||||
.color-switcher-inline,
|
.color-switcher-inline,
|
||||||
.color-switcher-under {
|
.color-switcher-under {
|
||||||
@@ -147,26 +217,39 @@ button:hover {
|
|||||||
gap: 0.4em;
|
gap: 0.4em;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-switcher-preview {
|
.color-switcher-preview {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color-switcher-preview.align-right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-switcher-preview.align-left {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
.color-switcher-inline {
|
.color-switcher-inline {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-switcher-under {
|
.color-switcher-under {
|
||||||
margin: 0.5em 0 0 0;
|
margin: 0.5em 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-tag {
|
.logo-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--color-accent, #4f8cff);
|
background: var(--color-accent);
|
||||||
color: #fff;
|
color: var(--white);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 0.2em 0.8em;
|
padding: 0.2em 0.8em;
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
|
margin-right: 0.3em;
|
||||||
|
margin-top: 0.2em;
|
||||||
|
margin-bottom: 0.2em;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -174,10 +257,11 @@ button:hover {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-info {
|
.logo-info {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-width: 0;
|
||||||
background: var(--color-card);
|
background: var(--color-card);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
@@ -198,7 +282,8 @@ button:hover {
|
|||||||
transition: background 0.2s, color 0.2s;
|
transition: background 0.2s, color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-preview img {
|
.logo-preview img,
|
||||||
|
div.logo-image img {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
max-height: 80%;
|
max-height: 80%;
|
||||||
width: auto;
|
width: auto;
|
||||||
@@ -208,32 +293,6 @@ button:hover {
|
|||||||
margin: 0 auto;
|
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 {
|
.logo-image svg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -245,7 +304,6 @@ div.logo-image img {
|
|||||||
|
|
||||||
/* Grid specific */
|
/* Grid specific */
|
||||||
.logo-grid .logo-item .logo-image {
|
.logo-grid .logo-item .logo-image {
|
||||||
/* height: 160px; */
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -254,16 +312,156 @@ div.logo-image img {
|
|||||||
width: 120px;
|
width: 120px;
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-right: 1px solid #eee;
|
border-right: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dark theme overrides */
|
/* Row specific */
|
||||||
@media (prefers-color-scheme: dark) {
|
.logo-row {
|
||||||
:root {
|
display: flex;
|
||||||
--color-card: #23272e;
|
align-items: center;
|
||||||
--background-color: #181a20;
|
padding: 0.5em 0.5em;
|
||||||
--color-text: #f5f6fa;
|
border-bottom: 1px solid var(--color-border);
|
||||||
--color-border: #333842;
|
gap: 1em;
|
||||||
--color-accent: #4f8cff;
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
7
public/logos/okko.svg
Normal file
7
public/logos/okko.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<svg data-v-3153e3cf="" width="100%" height="100%" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M28.06 55.617h-1.209c-1.41 0-2.418 1.21-2.216 2.62h6.045c1.814-1.814 3.829-3.224 6.045-4.232-.604-2.418-1.007-5.038-.806-7.456-1.813.202-3.425.403-5.239 1.008-.604.201-.806.604-.604 1.209l1.813 4.232c-1.209.806-2.216 1.612-3.224 2.62h-.604zm16.121-23.98c-.403.806-.403 1.814.403 2.62 1.612 1.41 3.426 2.217 4.434 4.232.604 1.007 1.41 3.022-.403 3.224-1.613.201-4.03-1.41-5.441-2.418.604.806.806 1.813 1.209 2.62.201.402.403.604.604.604 1.612.806 4.232 1.41 5.441-.202 1.21-1.41.806-3.224-.403-4.836-1.209-2.015-3.224-2.62-4.635-4.232-.201-.201-.403-.604-.201-.806.201-.604.806-.806 1.41-.806.807-.201 1.814-.403 2.419-.604.604-.403.806-1.008 1.007-1.41l.202-1.008c-1.41.403-3.023.806-4.232 1.41-.403.403-1.41 1.008-1.814 1.612zm-20.755-8.463c2.62-4.635 5.642-9.068 8.866-13.3.605-2.015.202-3.627-.604-5.24l-1.612-3.626a144.276 144.276 0 00-9.068 17.531c-.403.806-.202 1.814.403 2.418.604.605 1.41 1.41 2.015 2.217zm-9.471 35.063c5.239-7.456 13.702-12.292 22.77-12.695.806 2.62 2.217 5.037 3.83 7.254 3.022-.605 6.044-.403 8.866.403l.806 2.015c0 .202 0 .403-.202.403h-.806c-1.41 0-2.418 1.21-2.217 2.62h5.643c.806 0 1.41-.806 1.209-1.612l-2.418-6.247c-1.612-.605-3.224-.806-4.837-1.008l-3.425-8.866c-.605-1.612-2.62-2.418-4.03-2.821-1.612-.403-3.628-.605-5.441-.403 2.015-1.008 4.03-2.016 6.247-2.822 1.209-.403 2.015-1.41 2.418-2.418.403-1.007.604-1.813 1.007-2.82-1.813.805-3.627 1.611-5.44 2.619l3.627-2.418c1.612-1.008 2.418-2.015 2.82-3.627.202-1.21.404-2.217.605-3.426-2.216.806-4.634 2.015-6.65 3.022 1.008-.806 2.62-1.813 3.628-2.418 2.216-1.41 3.425-3.627 3.627-6.247V13.3c-3.023 1.813-6.045 3.627-8.867 5.844 1.612-1.612 3.225-3.225 5.038-4.635 2.62-2.418 3.627-5.643 3.023-9.068-.403-1.814-.806-3.627-1.41-5.441-3.426 3.224-6.65 6.851-9.673 10.479-3.224 4.03-6.247 8.463-9.068 12.896-.403.806-.403 1.612 0 2.217 1.007 1.41 2.015 3.023 2.418 4.635 1.209 4.634-1.21 6.045-3.627 7.859-.605.403-.605 0-.403-.202l.604-.604c1.814-1.613 2.015-4.635.806-6.852-1.612-2.82-3.828-5.44-6.448-7.456-.403 1.008-1.008 2.015-2.62 3.023-1.007.604-3.224 2.217-5.037 4.836.806 1.21 1.612 2.015 2.82 2.821.404-.403.807-.806 1.411-1.209.403-.403 1.008-.201 1.21.202.402-.403.402.201 0 .604l-.404.403c-.403.403-1.007.202-1.209-.201 0 0 0-.202-.201-.202l-.403.403c.403.806 1.007 2.217 1.209 2.217.201 0 .201 0 .403-.202l1.612-1.41c0-.202.201 0 .201.201-1.612 3.023-3.425 6.65-4.433 9.875-.201.604 0 1.209.202 1.612.806 1.41 2.216 2.82 2.62 3.224-1.411 1.813-2.62 3.829-3.628 5.844-.201.403-.604.604-1.209.604H8.917c-1.41 0-2.418 1.21-2.217 2.62h7.255zm16.322 7.859h-4.03L20.2 71.939v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.24-5.642zm16.121 0h-4.03l-6.046 5.843v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.239-5.642zm-35.869 0c-1.008-.202-2.217-.403-3.224-.403-1.008 0-2.217.201-3.224.403a4.77 4.77 0 00-3.628 3.627c-.604 2.217-.604 4.232 0 6.448a4.77 4.77 0 003.628 3.627c1.007 0 2.216.202 3.224.202 1.007 0 2.216-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.217.605-4.232 0-6.449-.403-1.612-1.813-3.022-3.627-3.425zm.604 9.068c-.201.604-.604 1.209-1.41 1.209-1.612.403-3.224.403-5.038 0-.604-.202-1.209-.605-1.41-1.21a9.823 9.823 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .604.202 1.209.605 1.41 1.21a9.824 9.824 0 010 4.836zm49.975-5.643a4.77 4.77 0 00-3.627-3.627c-1.007-.201-2.217-.403-3.224-.403-1.008 0-2.217.202-3.224.403a4.77 4.77 0 00-3.627 3.627c-.605 2.217-.605 4.232 0 6.449a4.77 4.77 0 003.627 3.627c1.007.202 2.216.403 3.224.403s2.217-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.015.605-4.232 0-6.449zm-3.022 5.643c-.202.604-.605 1.209-1.41 1.209-1.613.403-3.225.403-5.039 0-.604-.202-1.209-.605-1.41-1.21a9.824 9.824 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .605.202 1.21.605 1.41 1.21a9.822 9.822 0 010 4.836z">
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
12
public/logos/wog.svg
Normal file
12
public/logos/wog.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<svg id="logo" viewBox="0 0 130 40" fill="none" stroke="none" height="100%" width="100%"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g>
|
||||||
|
<path
|
||||||
|
d="M79.37 12.49l-2.1 7.61c-.17.68-.79 3.47-1 5.52h-.18c-.2-2.23-.76-4.63-1-5.68l-1.67-7.46h-5.33l-1.68 7.46c-.23 1.05-.8 3.45-1 5.68h-.18c-.2-2.05-.82-4.85-1-5.52l-2.1-7.61H56l5.5 17.36c.68 2.13 1.79 3.24 3.7 3.24 1.88 0 3.08-1.17 3.55-3.24l.82-3.54c.36-1.49.86-3.65 1.09-5.29h.17c.23 1.64.73 3.8 1.08 5.3l.83 3.53c.5 2.07 1.68 3.24 3.55 3.24 1.91 0 3.03-1.11 3.7-3.24l5.5-17.36h-6.12zM96 12.05c-6.24 0-11.02 4.59-11.02 10.52S89.78 33.09 96 33.09c6.23 0 11.01-4.59 11.01-10.52.01-5.93-4.78-10.52-11-10.52zm0 15.93a5.36 5.36 0 01-5.45-5.41A5.36 5.36 0 0196 17.16a5.36 5.36 0 015.44 5.41 5.36 5.36 0 01-5.44 5.41zM129.8 21.06h-11.84v4.15h6.49c-.32 1.52-2.24 3.01-4.88 3.01-3.66 0-5.61-2.46-5.61-5.64a5.36 5.36 0 015.52-5.44c2.2 0 3.88 1.12 4.8 2.81l5.08-2.07c-1.8-3.51-5.11-5.81-9.87-5.81-6.17 0-11.01 4.56-11.01 10.52s4.64 10.52 11.01 10.52c6.99-.01 11.48-5.48 10.3-12.05z"
|
||||||
|
fill="#009345"></path>
|
||||||
|
<path d="M42.61 0a6.67 6.67 0 00-6 9.62l6 12.1 6-12.1a6.67 6.67 0 00-6-9.62z" fill="#8BC53F"></path>
|
||||||
|
<path
|
||||||
|
d="M21.23 29.02L15.77 40 .7 9.6A6.65 6.65 0 013.73.7a6.71 6.71 0 018.96 3.02l8.53 17.17a9.16 9.16 0 010 8.14zM39.18 29.02L33.72 40 18.65 9.6A6.65 6.65 0 0121.68.7a6.71 6.71 0 018.96 3.02l8.54 17.18a9.17 9.17 0 010 8.13z"
|
||||||
|
fill="#009345"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
399
src/App.svelte
399
src/App.svelte
@@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import LogoGrid from './components/Grid.svelte';
|
import LogoGrid from './components/LogoGrid.svelte';
|
||||||
import LogoList from './components/List.svelte';
|
import LogoList from './components/LogoList.svelte';
|
||||||
|
|
||||||
let viewMode = 'grid'; // 'grid' or 'list'
|
let viewMode = 'grid'; // 'grid' or 'list'
|
||||||
let searchQuery = '';
|
let searchQuery = '';
|
||||||
@@ -55,12 +55,15 @@
|
|||||||
applyTheme();
|
applyTheme();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Compute all unique tags as strings
|
// Compute all unique tags as objects with text and optional color
|
||||||
$: allTags = Array.from(
|
$: allTags = Array.from(
|
||||||
new Set(
|
new Map(
|
||||||
logos.flatMap(logo => (logo.tags || []))
|
logos.flatMap(logo => (logo.tags || []).map(tag => {
|
||||||
)
|
if (typeof tag === 'string') return [tag, { text: tag }];
|
||||||
).map(tag => typeof tag === 'object' ? tag.text : tag);
|
return [tag.text, tag];
|
||||||
|
}))
|
||||||
|
).values()
|
||||||
|
).sort((a, b) => a.text.localeCompare(b.text));
|
||||||
|
|
||||||
$: filteredLogos = logos.filter(logo => {
|
$: filteredLogos = logos.filter(logo => {
|
||||||
const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase());
|
const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
@@ -137,6 +140,7 @@
|
|||||||
effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
}
|
}
|
||||||
document.documentElement.setAttribute('data-theme', effectiveTheme);
|
document.documentElement.setAttribute('data-theme', effectiveTheme);
|
||||||
|
console.log('[theme] Applied theme:', effectiveTheme, '(from', theme, ')');
|
||||||
}
|
}
|
||||||
|
|
||||||
function setTheme(newTheme) {
|
function setTheme(newTheme) {
|
||||||
@@ -175,10 +179,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTagObj(text) {
|
|
||||||
return { text };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Listen for outside click to close dropdown
|
// Listen for outside click to close dropdown
|
||||||
$: if (tagDropdownOpen) {
|
$: if (tagDropdownOpen) {
|
||||||
window.addEventListener('click', closeDropdown);
|
window.addEventListener('click', closeDropdown);
|
||||||
@@ -188,70 +188,24 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<header class="main-header">
|
<Header
|
||||||
<div class="header-row">
|
{logos}
|
||||||
<h1>Logo Gallery</h1>
|
{theme}
|
||||||
<span class="logo-count">{logos.length} images in gallery</span>
|
{setTheme}
|
||||||
<div class="theme-switcher">
|
{viewMode}
|
||||||
<div class="theme-switch-group">
|
{setGridView}
|
||||||
<button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
|
{setListView}
|
||||||
<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>
|
bind:searchQuery
|
||||||
</button>
|
{allTags}
|
||||||
<button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
|
{selectedTags}
|
||||||
<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>
|
{tagDropdownOpen}
|
||||||
</button>
|
{toggleDropdown}
|
||||||
<button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
|
{addTag}
|
||||||
<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>
|
{removeTag}
|
||||||
</button>
|
{toggleTag}
|
||||||
</div>
|
{closeDropdown}
|
||||||
</div>
|
{filteredLogos}
|
||||||
</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)}
|
|
||||||
>
|
|
||||||
<span>{tagText}</span>
|
|
||||||
<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(tag => !selectedTags.includes(tag)) as tag}
|
|
||||||
<button
|
|
||||||
class="dropdown-tag"
|
|
||||||
on:click={() => toggleTag(tag)}
|
|
||||||
>
|
|
||||||
{tag}
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
{#if allTags.filter(tag => !selectedTags.includes(tag)).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>
|
|
||||||
|
|
||||||
<div class="logos-container">
|
<div class="logos-container">
|
||||||
{#if viewMode === 'grid'}
|
{#if viewMode === 'grid'}
|
||||||
@@ -274,298 +228,3 @@
|
|||||||
<p>shadoll Logo Gallery. All logos are property of their respective owners.</p>
|
<p>shadoll Logo Gallery. All logos are property of their respective owners.</p>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</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>
|
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Preview from './Preview.svelte';
|
|
||||||
import Actions from './Actions.svelte';
|
|
||||||
import Row from './Row.svelte';
|
|
||||||
import { onMount, onDestroy } from 'svelte';
|
|
||||||
|
|
||||||
export let logos = [];
|
|
||||||
export let onCopy;
|
|
||||||
export let onDownload;
|
|
||||||
|
|
||||||
let showModal = false;
|
|
||||||
let selectedLogo = null;
|
|
||||||
|
|
||||||
export let theme;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={() => showModal = false} />
|
|
||||||
|
|
||||||
<div class="logo-grid">
|
|
||||||
{#each logos as logo}
|
|
||||||
<Row {logo} view="grid" showActions={true} onPreview={() => { selectedLogo = logo; showModal = true; }}>
|
|
||||||
<svelte:fragment slot="actions">
|
|
||||||
<Actions {logo} {onCopy} {onDownload} />
|
|
||||||
</svelte:fragment>
|
|
||||||
</Row>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.logo-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
</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>
|
||||||
@@ -3,7 +3,6 @@
|
|||||||
export let path;
|
export let path;
|
||||||
export let color;
|
export let color;
|
||||||
export let colorConfig = { target: 'path', attribute: 'fill' };
|
export let colorConfig = { target: 'path', attribute: 'fill' };
|
||||||
export let alt;
|
|
||||||
|
|
||||||
let svgHtml = '';
|
let svgHtml = '';
|
||||||
|
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Preview from './Preview.svelte';
|
|
||||||
import Actions from './Actions.svelte';
|
|
||||||
import Row from './Row.svelte';
|
|
||||||
import { onMount, onDestroy } from 'svelte';
|
|
||||||
|
|
||||||
export let logos = [];
|
|
||||||
export let onCopy;
|
|
||||||
export let onDownload;
|
|
||||||
|
|
||||||
let showModal = false;
|
|
||||||
let selectedLogo = null;
|
|
||||||
|
|
||||||
export let theme;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={() => showModal = false} />
|
|
||||||
|
|
||||||
<div class="logo-list">
|
|
||||||
{#each logos as logo}
|
|
||||||
<Row {logo} view="list" showActions={true} onPreview={() => { selectedLogo = logo; showModal = true; }}>
|
|
||||||
<svelte:fragment slot="actions">
|
|
||||||
<Actions {logo} {onCopy} {onDownload} />
|
|
||||||
</svelte:fragment>
|
|
||||||
</Row>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.logo-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
export let logo;
|
export let logo;
|
||||||
|
export let onCopy;
|
||||||
export let onDownload;
|
export let onDownload;
|
||||||
|
|
||||||
// Download menu state
|
// Download menu state
|
||||||
@@ -359,7 +360,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
background: var(--color-card, #fff);
|
background: var(--color-card, #fff);
|
||||||
color: var(--color-text, #222);
|
color: var(--text-color, #222);
|
||||||
border: 1px solid var(--color-border, #ddd);
|
border: 1px solid var(--color-border, #ddd);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
|
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
|
||||||
196
src/components/LogoGrid.svelte
Normal file
196
src/components/LogoGrid.svelte
Normal file
@@ -0,0 +1,196 @@
|
|||||||
|
<script>
|
||||||
|
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';
|
||||||
|
|
||||||
|
export let logos = [];
|
||||||
|
export let onCopy;
|
||||||
|
export let onDownload;
|
||||||
|
|
||||||
|
let showModal = false;
|
||||||
|
let selectedLogo = null;
|
||||||
|
|
||||||
|
function openPreview(logo) {
|
||||||
|
selectedLogo = logo;
|
||||||
|
showModal = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
showModal = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSvgLogo(logo) {
|
||||||
|
return logo.format && logo.format.toLowerCase() === 'svg';
|
||||||
|
}
|
||||||
|
|
||||||
|
export let theme;
|
||||||
|
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||||
|
|
||||||
|
// Improved debug logging for color and theme for each logo
|
||||||
|
$: {
|
||||||
|
if (logos && logos.length) {
|
||||||
|
logos.forEach(logo => {
|
||||||
|
if (logo.colors) {
|
||||||
|
const themeColor = getDefaultLogoColor(logo.colors, theme);
|
||||||
|
const fallbackColor = getThemeColor(logo.colors, theme);
|
||||||
|
const activeColor = logo._activeColor || themeColor;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inline SVG logic for color switching
|
||||||
|
let svgCache = {};
|
||||||
|
|
||||||
|
async function fetchInlineSvg(path) {
|
||||||
|
if (svgCache[path]) return svgCache[path];
|
||||||
|
const res = await fetch(path);
|
||||||
|
const text = await res.text();
|
||||||
|
svgCache[path] = text;
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<LogoModal show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
|
||||||
|
|
||||||
|
<div class="logo-grid">
|
||||||
|
{#each logos as logo}
|
||||||
|
<div class="logo-card">
|
||||||
|
<div class="logo-image"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
aria-label="Preview {logo.name}"
|
||||||
|
on:click={() => openPreview(logo)}
|
||||||
|
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
|
||||||
|
style="cursor:pointer;"
|
||||||
|
>
|
||||||
|
{#if isSvgLogo(logo)}
|
||||||
|
{#key theme + (logo._activeColor || '')}
|
||||||
|
<InlineSvg
|
||||||
|
path={logo.path}
|
||||||
|
color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
|
||||||
|
colorConfig={logo.colors ? logo.colorConfig : undefined}
|
||||||
|
alt={logo.name}
|
||||||
|
/>
|
||||||
|
{/key}
|
||||||
|
{: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 align-right">
|
||||||
|
<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" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 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>
|
||||||
|
<div class="logo-actions">
|
||||||
|
<LogoActions {logo} {onCopy} {onDownload} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="no-results">No logos found matching your search criteria.</p>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:global(.logo-card) {
|
||||||
|
background: var(--color-card);
|
||||||
|
color: var(--color-text);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
/* overflow: hidden; removed to allow dropdown menus to escape the card */
|
||||||
|
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
|
||||||
|
min-width: 320px;
|
||||||
|
}
|
||||||
|
.logo-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
.logo-image {
|
||||||
|
height: 260px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.logo-info {
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--color-card);
|
||||||
|
color: var(--color-text);
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
.logo-info h3 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--color-accent, #4f8cff);
|
||||||
|
}
|
||||||
|
.no-results {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.color-circle.color-reset {
|
||||||
|
background: none !important;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.color-circle.color-reset svg {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.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-switcher-preview.align-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
187
src/components/LogoList.svelte
Normal file
187
src/components/LogoList.svelte
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
<script>
|
||||||
|
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';
|
||||||
|
|
||||||
|
export let logos = [];
|
||||||
|
export let onCopy;
|
||||||
|
export let onDownload;
|
||||||
|
|
||||||
|
let showModal = false;
|
||||||
|
let selectedLogo = null;
|
||||||
|
|
||||||
|
let theme = getTheme();
|
||||||
|
|
||||||
|
function openPreview(logo) {
|
||||||
|
selectedLogo = logo;
|
||||||
|
showModal = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
showModal = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSvgLogo(logo) {
|
||||||
|
return logo.format && logo.format.toLowerCase() === 'svg';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTheme() {
|
||||||
|
if (typeof window !== 'undefined' && window.matchMedia) {
|
||||||
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
|
}
|
||||||
|
return 'light';
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleThemeChange(e) {
|
||||||
|
theme = e.matches ? 'dark' : 'light';
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
mql.addEventListener('change', handleThemeChange);
|
||||||
|
});
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
mql.removeEventListener('change', handleThemeChange);
|
||||||
|
});
|
||||||
|
|
||||||
|
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||||
|
|
||||||
|
// Debug logging for color and theme
|
||||||
|
$: {
|
||||||
|
if (logos && logos.length) {
|
||||||
|
logos.forEach(logo => {
|
||||||
|
if (logo.colors) {
|
||||||
|
const themeColor = getDefaultLogoColor(logo.colors, theme);
|
||||||
|
const activeColor = logo._activeColor || themeColor;
|
||||||
|
console.log('[LogoList] Logo:', logo.name, '| Theme:', theme, '| Theme color:', themeColor, '| Active color:', activeColor);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
|
||||||
|
|
||||||
|
<div class="logo-list">
|
||||||
|
{#each logos as logo}
|
||||||
|
<div class="logo-item">
|
||||||
|
<div class="logo-preview"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
aria-label="Preview {logo.name}"
|
||||||
|
on:click={() => openPreview(logo)}
|
||||||
|
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
|
||||||
|
style="cursor:pointer;"
|
||||||
|
>
|
||||||
|
{#if isSvgLogo(logo)}
|
||||||
|
<InlineSvg
|
||||||
|
path={logo.path}
|
||||||
|
color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : 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>
|
||||||
|
</div>
|
||||||
|
{#if logo.colors}
|
||||||
|
<div class="color-switcher-preview 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" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 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>
|
||||||
|
<div class="logo-actions">
|
||||||
|
<LogoActions {logo} {onCopy} {onDownload} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="no-results">No logos found matching your search criteria.</p>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:global(.logo-item) {
|
||||||
|
background: var(--color-card);
|
||||||
|
color: var(--color-text);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 80px 2fr 3fr 150px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
.logo-preview {
|
||||||
|
height: 100px;
|
||||||
|
width: 80px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.logo-info h3 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--color-accent, #4f8cff);
|
||||||
|
}
|
||||||
|
.logo-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.no-results {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.color-switcher-preview.align-left {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.color-circle.color-reset {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,10 +1,16 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||||
import InlineSvg from './InlineSvg.svelte';
|
import InlineSvg from './InlineSvg.svelte';
|
||||||
|
<<<<<<< HEAD:src/components/Preview.svelte
|
||||||
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
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 show = false;
|
||||||
export let logo = null;
|
export let logo = null;
|
||||||
|
export let theme;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
@@ -22,31 +28,31 @@
|
|||||||
return logo && logo.format && logo.format.toLowerCase() === 'svg';
|
return logo && logo.format && logo.format.toLowerCase() === 'svg';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper to get tag object - simplified without tags.json
|
<<<<<<< HEAD:src/components/Preview.svelte
|
||||||
function getTagObj(text) {
|
function getLogoThemeColor(logo) {
|
||||||
return { text: typeof text === 'object' ? text.text : text };
|
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
|
// Always use $theme directly, do not cache in a function
|
||||||
export let theme;
|
export let theme;
|
||||||
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||||
|
|
||||||
|
// Improved debug logging for color and theme
|
||||||
$: {
|
$: {
|
||||||
if (logo && logo.colors) {
|
if (logo && logo.colors) {
|
||||||
const themeColor = getDefaultLogoColor(logo.colors, theme);
|
const themeColor = getDefaultLogoColor(logo.colors, theme);
|
||||||
|
const fallbackColor = getThemeColor(logo.colors, theme);
|
||||||
const activeColor = logo._activeColor || themeColor;
|
const activeColor = logo._activeColor || themeColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (logo && logo.tags && logo.tags.length) {
|
|
||||||
logo.tags.forEach(tag => {
|
|
||||||
console.log('[LogoModal] Tag:', tag);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
document.addEventListener('keydown', handleKeydown);
|
document.addEventListener('keydown', handleKeydown);
|
||||||
console.log('[LogoModal] Mounted, added keydown event listener');
|
>>>>>>> parent of aaf7db1 (feat: Refactor logo components into Grid and List views):src/components/LogoModal.svelte
|
||||||
});
|
});
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
@@ -54,26 +60,12 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="modal-backdrop"
|
<div class="modal-backdrop" class:show style="display: {show ? 'flex' : 'none'}" on:click={close}>
|
||||||
style="display: {show && logo ? 'flex' : 'none'}"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true"
|
|
||||||
>
|
|
||||||
{#if logo}
|
{#if logo}
|
||||||
<div class="modal-content">
|
<div class="modal-content" on:click|stopPropagation>
|
||||||
<div class="modal-header">
|
<button class="close-btn" on:click={close} aria-label="Close modal">×</button>
|
||||||
<h2>{logo.name}</h2>
|
|
||||||
<button class="close-btn" on:click={close} aria-label="Close preview">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="preview-container"
|
<div class="preview-image-container">
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
aria-label="Close preview"
|
|
||||||
on:click={close}
|
|
||||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && close()}
|
|
||||||
style="cursor:pointer;"
|
|
||||||
>
|
|
||||||
{#if isSvgLogo(logo)}
|
{#if isSvgLogo(logo)}
|
||||||
<InlineSvg
|
<InlineSvg
|
||||||
path={logo.path}
|
path={logo.path}
|
||||||
@@ -86,6 +78,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="logo-details">
|
<div class="logo-details">
|
||||||
|
<h2>{logo.name}</h2>
|
||||||
{#if isSvgLogo(logo) && logo.colors}
|
{#if isSvgLogo(logo) && logo.colors}
|
||||||
<div class="color-switcher-preview">
|
<div class="color-switcher-preview">
|
||||||
<span
|
<span
|
||||||
@@ -98,7 +91,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
|||||||
on:click|stopPropagation={() => logo._activeColor = undefined}
|
on:click|stopPropagation={() => logo._activeColor = undefined}
|
||||||
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (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;"/>
|
<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;"/>
|
<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>
|
</svg>
|
||||||
@@ -123,8 +116,17 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
|||||||
<p><strong>Path:</strong> {logo.path}</p>
|
<p><strong>Path:</strong> {logo.path}</p>
|
||||||
{#if logo.tags && logo.tags.length}
|
{#if logo.tags && logo.tags.length}
|
||||||
<div class="logo-tags">
|
<div class="logo-tags">
|
||||||
|
<<<<<<< HEAD:src/components/Preview.svelte
|
||||||
{#each logo.tags as tag}
|
{#each logo.tags as tag}
|
||||||
<span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
|
{#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}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -135,118 +137,91 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:global(.modal-backdrop) {
|
.modal-backdrop {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
width: 100vw;
|
||||||
bottom: 0;
|
height: 100vh;
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
background: rgba(0,0,0,0.7);
|
||||||
|
z-index: 1000;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 1000;
|
|
||||||
}
|
}
|
||||||
|
.modal-content {
|
||||||
:global(.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);
|
background: var(--color-card);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
border-radius: 8px;
|
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);
|
border: 1px solid var(--color-border);
|
||||||
transition: background 0.2s, color 0.2s;
|
|
||||||
}
|
}
|
||||||
|
.logo-details h2 {
|
||||||
.modal-header {
|
margin-top: 0;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1rem;
|
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 {
|
.logo-details p {
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-tags {
|
.logo-tags {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.5rem;
|
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>
|
</style>
|
||||||
@@ -1,19 +1,23 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
export let logo;
|
export let logo;
|
||||||
export let onCopy;
|
|
||||||
export let onDownload;
|
|
||||||
export let view = 'grid'; // or 'list'
|
export let view = 'grid'; // or 'list'
|
||||||
export let showActions = true;
|
export let showActions = true;
|
||||||
export let onPreview = null;
|
export let onPreview = null;
|
||||||
import InlineSvg from './InlineSvg.svelte';
|
import InlineSvg from './InlineSvg.svelte';
|
||||||
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||||
|
import { loadTagsData, getTagObj } from '../utils/tagUtils.js';
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
await loadTagsData();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="logo-row {view}">
|
<div class="logo-row {view}">
|
||||||
<div
|
<div
|
||||||
class="logo-img"
|
class="logo-img"
|
||||||
on:click={onPreview}
|
on:click={onPreview}
|
||||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && onPreview && onPreview(e)}
|
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && onPreview && onPreview()}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
role="button"
|
role="button"
|
||||||
aria-label="Preview logo"
|
aria-label="Preview logo"
|
||||||
@@ -49,7 +53,11 @@
|
|||||||
{#if logo.tags && logo.tags.length}
|
{#if logo.tags && logo.tags.length}
|
||||||
<div class="logo-tags">
|
<div class="logo-tags">
|
||||||
{#each logo.tags as tag}
|
{#each logo.tags as tag}
|
||||||
<span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
|
{#if getTagObj(tag).color}
|
||||||
|
<span class="logo-tag" style={`background:${getTagObj(tag).color}`}>{tag}</span>
|
||||||
|
{:else}
|
||||||
|
<span class="logo-tag">{tag}</span>
|
||||||
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -61,99 +69,3 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</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>
|
|
||||||
|
|||||||
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