austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

feat: custom themes logo size tuning

Browse Source
This commit is contained in:
3252a8
2026-05-15 13:54:47 +03:00
parent af7cee5014
commit a1725a6872
10 changed files with 175 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2
View File
@@ -1,5 +1,7 @@
# Remnawave Minishop
![Remnawave Minishop](docs/remnawave-minishop.webp)
Remnawave Minishop - Telegram-бот и Web App (Mini App) для продажи и управления подписками Remnawave. Бот обрабатывает регистрацию, оплату, продление, пробный период, промокоды, рефералов и поддержку в чате. Web App показывает ссылку подключения, срок действия, трафик, оплату, устройства и вход по Telegram Mini Apps `initData`, Telegram OAuth / OpenID Connect и одноразовому email-коду.
Проект является переработанным форком [kavore/remnawave-tg-shop](https://github.com/kavore/remnawave-tg-shop). Для переноса данных из прежнего стека используйте [инструкцию по миграции](docs/migration-to-minishop.md).
bot/app/web/frontend/src/admin/sections/AppearanceSection.svelte
+66
View File
@@ -134,6 +134,12 @@
return `#${hex}`;
}
function homeLogoScale(theme) {
const scale = Number(theme.tokens?.home_logo_scale || 100);
if (!Number.isFinite(scale)) return 100;
return Math.min(300, Math.max(50, Math.round(scale)));
}
function openThemeAccentPicker(theme) {
themesStore.setThemeAccent(theme.key, pickerHex(theme.tokens?.accent || "#00fe7a"));
}
@@ -216,6 +222,10 @@
themesStore.setThemeAccent(theme.key, value);
}
function setThemeHomeLogoScale(theme, value) {
themesStore.setThemeHomeLogoScale(theme.key, value);
}
function selectTheme(theme, event = null) {
if (event?.target?.closest?.("button,input,label")) return;
if (!themesSaving) themesStore.setCurrentTheme(theme.key);
@@ -472,6 +482,37 @@
/>
<span>{at("themes_use_in_admin", {}, "Использовать в админке")}</span>
</label>
<label class="admin-theme-card-option appearance-logo-scale-row">
<span
>{at(
"appearance_theme_home_logo_scale",
{},
"Логотип на главной и входе"
)}</span
>
<input
class="appearance-logo-scale-range"
type="range"
min="50"
max="300"
step="5"
value={homeLogoScale(theme)}
oninput={(event) => setThemeHomeLogoScale(theme, event.currentTarget.value)}
/>
<span class="appearance-logo-scale-value">
<input
class="input"
type="number"
min="50"
max="300"
step="5"
value={homeLogoScale(theme)}
oninput={(event) =>
setThemeHomeLogoScale(theme, event.currentTarget.value)}
/>
%
</span>
</label>
<div class="appearance-theme-actions">
<AdminButton
size="sm"
@@ -703,6 +744,31 @@
min-width: 0;
}
.appearance-logo-scale-row {
display: grid;
grid-template-columns: auto minmax(96px, 1fr) auto;
width: 100%;
}
.appearance-logo-scale-range {
width: 100%;
accent-color: var(--accent);
}
.appearance-logo-scale-value {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--admin-text);
}
.appearance-logo-scale-value .input {
width: 70px;
min-height: 32px;
padding: 4px 8px;
font-size: 12px;
}
.admin-color.is-empty {
opacity: 0.42;
filter: grayscale(1);
bot/app/web/frontend/src/lib/admin/stores/themesStore.js
+26
View File
@@ -183,12 +183,38 @@ export function createThemesStore({ api, onThemesSaved, flash, at }) {
}));
}
function setThemeHomeLogoScale(key, scale) {
if (String(scale ?? "").trim() === "") scale = 100;
const numeric = Number(scale);
const nextScale = Number.isFinite(numeric)
? Math.min(300, Math.max(50, Math.round(numeric)))
: 100;
state.update((s) => ({
...s,
themesCatalog: {
...s.themesCatalog,
themes: (s.themesCatalog.themes || []).map((theme) =>
theme.key === key
? {
...theme,
tokens: {
...(theme.tokens || {}),
home_logo_scale: nextScale === 100 ? null : nextScale,
},
}
: theme
),
},
}));
}
return {
subscribe: state.subscribe,
loadThemes,
saveThemes,
setCurrentTheme,
setThemeAccent,
setThemeHomeLogoScale,
togglePrimaryAccent,
toggleAdminUse,
uploadLogoFile,
bot/app/web/frontend/src/lib/webapp/themeStyle.js
+7
View File
@@ -17,6 +17,7 @@ const TOKEN_TO_CSS_VAR = {
font_sans: "--font-sans",
font_logo: "--font-logo",
font_mono: "--font-mono",
home_logo_scale: "--home-logo-scale",
admin_bg: "--admin-bg",
admin_surface: "--admin-surface",
admin_surface_2: "--admin-surface-2",
@@ -38,6 +39,12 @@ export function themeTokensToInlineStyle(tokens, primaryFallback = "#00fe7a", op
if (key === "accent") continue;
const value = t[key];
if (value === undefined || value === null || value === "") continue;
if (key === "home_logo_scale") {
const scale = Number(value);
if (!Number.isFinite(scale) || scale <= 0) continue;
parts.push(`${cssVar}:${scale / 100}`);
continue;
}
parts.push(`${cssVar}:${String(value)}`);
}
return parts.join(";");
bot/app/web/frontend/src/styles/webapp.css
+25 -13
View File
@@ -30,12 +30,18 @@ a {
display: grid;
min-height: 100dvh;
place-items: center;
align-content: center;
align-content: safe center;
gap: 14px;
color: var(--muted);
font-weight: 800;
}
.loader .brand-mark.brand-mark-lg {
width: calc(4.125rem * var(--home-logo-scale, 1));
height: calc(4.125rem * var(--home-logo-scale, 1));
font-size: calc(2.875rem * var(--home-logo-scale, 1));
}
.app-header,
.preview-header,
.screen-head {
@@ -1530,17 +1536,29 @@ a {
.home-layout {
display: grid;
min-height: calc(100dvh - 34px);
grid-template-rows: minmax(0, 1fr) auto;
grid-template-rows: minmax(min-content, 1fr) auto;
gap: 18px;
padding-bottom: 86px;
animation: section-enter 0.24s ease-out both;
}
.home-brand {
align-self: center;
align-self: safe center;
padding-top: 0;
}
.home-brand .brand-mark.brand-mark-xl {
width: calc(6rem * var(--home-logo-scale, 1));
height: calc(6rem * var(--home-logo-scale, 1));
font-size: calc(4.375rem * var(--home-logo-scale, 1));
}
.login-brand-auth .brand-mark.brand-mark-xl {
width: calc(116px * var(--home-logo-scale, 1));
height: calc(116px * var(--home-logo-scale, 1));
font-size: calc(84px * var(--home-logo-scale, 1));
}
.home-bottom {
display: grid;
gap: 10px;
@@ -1549,7 +1567,7 @@ a {
.auth-screen {
display: grid;
align-content: center;
align-content: safe center;
}
.auth-card-wrap {
@@ -1568,12 +1586,6 @@ a {
gap: 5px;
}
.login-brand-auth .brand-mark.brand-mark-xl {
width: 116px;
height: 116px;
font-size: 84px;
}
.login-brand h1 {
margin: 0;
overflow-wrap: anywhere;
@@ -2129,9 +2141,9 @@ a {
.home-brand .brand-mark,
.home-brand .brand-mark-lg,
.home-brand .brand-mark-xl {
width: clamp(180px, 18vw, 260px);
height: clamp(180px, 18vw, 260px);
font-size: clamp(124px, 13vw, 184px);
width: calc(clamp(180px, 18vw, 260px) * var(--home-logo-scale, 1));
height: calc(clamp(180px, 18vw, 260px) * var(--home-logo-scale, 1));
font-size: calc(clamp(124px, 13vw, 184px) * var(--home-logo-scale, 1));
}
.home-bottom {
bot/app/web/templates/subscription_webapp.html
+1 -1
View File
@@ -9,7 +9,7 @@
<link id="app-favicon" rel="icon" href="data:," sizes="any">
<title>/minishop</title>
<link rel="stylesheet" href="/subscription_webapp.css">
<link rel="preload" id="logo-preload" href="" as="image" fetchpriority="high" crossorigin="anonymous">
<link rel="preload" id="logo-preload" href="" as="image" fetchpriority="high">
</head>
<body>
bot/app/web/themes/windows95/style.css
+10 -1
View File
@@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap&subset=cyrillic");
.theme-key-windows95 {
color-scheme: light;
image-rendering: pixelated;
@@ -15,7 +17,7 @@
--blue: #000080;
--radius: 0px;
--font-sans: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif;
--font-logo: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif;
--font-logo: "Press Start 2P", "Pixel Cyr", "MS Sans Serif", Tahoma, "Segoe UI", sans-serif;
--font-mono: Consolas, "Courier New", monospace;
--accent-contrast: #ffffff;
--surface-sheen: transparent;
@@ -89,6 +91,8 @@
.theme-key-windows95 svg.lucide-bitcoin,
.theme-key-windows95 svg.lucide-check,
.theme-key-windows95 svg.lucide-check-circle-2,
.theme-key-windows95 svg.lucide-circle-check,
.theme-key-windows95 svg.lucide-circle-check-big,
.theme-key-windows95 svg.lucide-chevrons-up-down,
.theme-key-windows95 svg.lucide-circle-x,
.theme-key-windows95 svg.lucide-coins,
@@ -142,6 +146,7 @@
background-repeat: no-repeat;
background-size: contain;
image-rendering: pixelated;
filter: none !important;
}
.theme-key-windows95 svg.lucide-arrow-left {
@@ -547,6 +552,10 @@
color: var(--accent);
}
.theme-key-windows95 .traffic-top strong {
color: var(--muted);
}
.theme-key-windows95 .btn-primary,
.theme-key-windows95 .bottom-nav button.active {
color: #ffffff;
bot/app/web/webapp/assets.py
+3 -3
View File
@@ -857,12 +857,12 @@ async def index_route(request: web.Request) -> web.Response:
brand_asset_url = _webapp_animated_emoji_asset_path(settings.WEBAPP_LOGO_EMOJI)
if brand_asset_url:
html = html.replace(
'<link rel="preload" id="logo-preload" href="" as="image" fetchpriority="high" crossorigin="anonymous">', # noqa: E501
f'<link rel="preload" href="{brand_asset_url}" as="image" fetchpriority="high" crossorigin="anonymous">', # noqa: E501
'<link rel="preload" id="logo-preload" href="" as="image" fetchpriority="high">',
f'<link rel="preload" href="{brand_asset_url}" as="image" fetchpriority="high">',
)
else:
html = html.replace(
'<link rel="preload" id="logo-preload" href="" as="image" fetchpriority="high" crossorigin="anonymous">', # noqa: E501
'<link rel="preload" id="logo-preload" href="" as="image" fetchpriority="high">',
"",
)
return web.Response(text=html, content_type="text/html", charset="utf-8")
config/webapp_themes_config.py
+11
View File
@@ -38,6 +38,7 @@ class ThemeTokens(BaseModel):
font_sans: Optional[str] = None
font_logo: Optional[str] = None
font_mono: Optional[str] = None
home_logo_scale: Optional[int] = None
admin_bg: Optional[str] = None
admin_surface: Optional[str] = None
admin_surface_2: Optional[str] = None
@@ -64,6 +65,16 @@ class ThemeTokens(BaseModel):
hex_value = "".join(char * 2 for char in hex_value)
return f"#{hex_value}"
@field_validator("home_logo_scale")
@classmethod
def _normalize_home_logo_scale(cls, value: Optional[int]) -> Optional[int]:
if value is None:
return None
scale = int(value)
if scale < 50 or scale > 300:
raise ValueError("home_logo_scale must be between 50 and 300 percent")
return scale
class WebappTheme(BaseModel):
"""Single theme descriptor loaded from WEBAPP_THEMES_DIR/<key>/theme.json."""
tests/test_webapp_themes_config.py
+24 -2
View File
@@ -33,7 +33,7 @@ class WebappThemesConfigTests(unittest.TestCase):
self.assertEqual(win95.tokens.style_preset, "win95")
self.assertFalse(win95.use_primary_accent)
self.assertTrue(win95.use_in_admin)
self.assertEqual(win95.assets_version, 1)
self.assertEqual(win95.assets_version, 3)
ascii_theme = cfg.theme_by_key("ascii")
self.assertIsNotNone(ascii_theme)
self.assertEqual(ascii_theme.css_file, "style.css")
@@ -294,6 +294,25 @@ class WebappThemesConfigTests(unittest.TestCase):
self.assertEqual(cfg.theme_by_key("custom").tokens.accent, "#00ff88")
def test_theme_home_logo_scale_is_public_token(self):
cfg = WebappThemesConfig(
default_theme="custom",
themes=[
{
"key": "custom",
"enabled": True,
"default": True,
"tokens": {"color_scheme": "dark", "home_logo_scale": 135},
}
],
)
payload = public_themes_catalog_payload(cfg, "#abc123")
custom = payload["themes"][0]
self.assertEqual(cfg.theme_by_key("custom").tokens.home_logo_scale, 135)
self.assertEqual(custom["tokens"]["home_logo_scale"], 135)
def test_theme_accent_rejects_non_hex_values(self):
with self.assertRaises(ValueError):
WebappThemesConfig(
@@ -361,11 +380,14 @@ class WebappThemesConfigTests(unittest.TestCase):
descriptor["assets_version"],
cfg.theme_by_key("windows95").assets_version,
)
self.assertEqual(descriptor["assets_version"], 1)
self.assertEqual(descriptor["assets_version"], 3)
self.assertIn("lucide-house", css)
self.assertIn("lucide-earth", css)
self.assertIn("lucide-circle-check", css)
self.assertIn("lucide-circle-check-big", css)
self.assertIn("filter: none !important", css)
self.assertIn("Press Start 2P", css)
self.assertIn(".theme-key-windows95 .traffic-top strong", css)
self.assertTrue((stale_theme_dir / "icons" / "dashboard.png").exists())
def test_resolved_refreshes_stale_builtin_light_assets(self):