Horizontal42/summarum
1
0
Fork 0
mirror of https://github.com/Horizontal42/summarum.git synced 2026-11-10 22:41:58 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

design: market status matches rates styling, shows a loading pulse

Browse source 
#market-info had no CSS at all — different font size and color from
#rates-info right next to it, and its own hardcoded English "Market"
text ignored the language setting. Merged its styling into the same
rule as #rates-info and gave it the same .spin pulse while a fetch
is in flight, so a market refresh is as visible as a rates refresh.
This commit is contained in:
Horizontal42 2026-07-03 12:55:32 +03:00
parent 88a60c4e73
commit 5205c9fb63
3 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/i18n.ts
View file

@ -27,6 +27,7 @@ const dict: Record<string, Record<string, string>> = {
resultswidth: "Results column", resultswidth: "Results column",
selection: "Selection", selection: "Selection",
rates: "Rates", rates: "Rates",
market: "Market",
justNow: "just now", justNow: "just now",
minAgo: "{}m ago", minAgo: "{}m ago",
hourAgo: "{}h ago", hourAgo: "{}h ago",
@ -104,6 +105,7 @@ const dict: Record<string, Record<string, string>> = {
resultswidth: "Колонка результатов", resultswidth: "Колонка результатов",
selection: "Выделение", selection: "Выделение",
rates: "Курсы", rates: "Курсы",
market: "Рынок",
justNow: "только что", justNow: "только что",
minAgo: "{} мин назад", minAgo: "{} мин назад",
hourAgo: "{} ч назад", hourAgo: "{} ч назад",

6
src/main.ts
View file

@ -495,8 +495,10 @@ async function refreshMarket(force = false): Promise<void> {
if (!isTauri()) return; if (!isTauri()) return;
const info = $("#market-info") as HTMLElement; const info = $("#market-info") as HTMLElement;
info.style.display = ""; info.style.display = "";
info.textContent = "Market…"; info.classList.add("spin");
info.textContent = t("market");
const prices = await fetchMarketData(MARKET_SYMBOLS); const prices = await fetchMarketData(MARKET_SYMBOLS);
info.classList.remove("spin");
if (Object.keys(prices).length > 0) { if (Object.keys(prices).length > 0) {
marketPrices = prices; marketPrices = prices;
marketFetchedAt = Math.floor(Date.now() / 1000); marketFetchedAt = Math.floor(Date.now() / 1000);
@ -529,7 +531,7 @@ function renderMarketInfo(): void {
const el = $("#market-info") as HTMLElement; const el = $("#market-info") as HTMLElement;
if (marketFetchedAt === 0) { el.style.display = "none"; return; } if (marketFetchedAt === 0) { el.style.display = "none"; return; }
el.style.display = ""; el.style.display = "";
el.textContent = `Market: ${agoText(marketFetchedAt)} ↺`; el.textContent = `${t("market")}: ${agoText(marketFetchedAt)} ↺`;
el.title = t("refreshRates"); el.title = t("refreshRates");
} }

6
src/ui/app.css
View file

@ -213,14 +213,14 @@ body {
flex-shrink: 0; flex-shrink: 0;
gap: 8px; gap: 8px;
} }
#rates-info { #rates-info, #market-info {
font-size: 11.5px; font-size: 11.5px;
color: var(--fg-muted); color: var(--fg-muted);
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
#rates-info:hover { color: var(--fg); } #rates-info:hover, #market-info:hover { color: var(--fg); }
#rates-info.spin { pointer-events: none; animation: rates-pulse 1s ease-in-out infinite; } #rates-info.spin, #market-info.spin { pointer-events: none; animation: rates-pulse 1s ease-in-out infinite; }
@keyframes rates-pulse { @keyframes rates-pulse {
0%, 100% { opacity: 0.5; } 0%, 100% { opacity: 0.5; }
50% { opacity: 0.95; } 50% { opacity: 0.95; }