Replace native action with floating app control
This commit is contained in:
Codex
parent
135d7f0203
commit
d928811e7e
3 changed files with 34 additions and 30 deletions
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
function bindNavigation() {
|
||||
document.querySelectorAll(".bottom-nav button").forEach((button) => {
|
||||
document.querySelectorAll(".nav-tabs button").forEach((button) => {
|
||||
button.addEventListener("click", () => showView(button.dataset.view));
|
||||
});
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
const nextIndex = viewOrder.indexOf(viewId);
|
||||
const direction = nextIndex >= previousIndex ? "forward" : "backward";
|
||||
|
||||
document.querySelectorAll(".bottom-nav button, .view").forEach((item) => item.classList.remove("active"));
|
||||
document.querySelectorAll(".nav-tabs button, .view").forEach((item) => item.classList.remove("active"));
|
||||
$(`#${viewId}`).classList.add("active");
|
||||
document.querySelector(`.bottom-nav button[data-view="${viewId}"]`)?.classList.add("active");
|
||||
state.currentView = viewId;
|
||||
|
|
@ -114,30 +114,24 @@
|
|||
}
|
||||
|
||||
function setupNativeControls() {
|
||||
const isTelegramClient = Boolean(tg?.platform && tg.platform !== "unknown");
|
||||
if (!isTelegramClient || !tg?.MainButton) return;
|
||||
safeTelegram(() => tg.MainButton.onClick(() => {
|
||||
$("#appActionButton").addEventListener("click", () => {
|
||||
if (state.currentView === "addView") {
|
||||
$("#transactionForm").requestSubmit();
|
||||
} else {
|
||||
openAddView();
|
||||
}
|
||||
}));
|
||||
safeTelegram(() => tg.BackButton?.onClick(closeAddView));
|
||||
});
|
||||
if (tg) safeTelegram(() => tg.BackButton?.onClick(closeAddView));
|
||||
updateNativeControls();
|
||||
}
|
||||
|
||||
function updateNativeControls() {
|
||||
const isTelegramClient = Boolean(tg?.platform && tg.platform !== "unknown");
|
||||
if (!isTelegramClient || !tg?.MainButton) return;
|
||||
const isForm = state.currentView === "addView";
|
||||
safeTelegram(() => tg.MainButton.setParams({
|
||||
text: isForm ? "Сохранить операцию" : "Добавить запись",
|
||||
color: "#f0d28a",
|
||||
text_color: "#17130b",
|
||||
is_active: true,
|
||||
is_visible: true,
|
||||
}));
|
||||
const action = $("#appActionButton");
|
||||
action.textContent = isForm ? "Сохранить" : "+";
|
||||
action.setAttribute("aria-label", isForm ? "Сохранить операцию" : "Добавить запись");
|
||||
if (!tg) return;
|
||||
safeTelegram(() => tg.MainButton?.hide());
|
||||
safeTelegram(() => isForm ? tg.BackButton?.show() : tg.BackButton?.hide());
|
||||
}
|
||||
|
||||
|
|
@ -220,13 +214,16 @@
|
|||
return false;
|
||||
}
|
||||
if (!canSendViaTelegram()) return false;
|
||||
const action = $("#appActionButton");
|
||||
try {
|
||||
safeTelegram(() => tg.MainButton?.showProgress());
|
||||
action.disabled = true;
|
||||
action.textContent = "Сохраняем…";
|
||||
tg.HapticFeedback?.notificationOccurred("success");
|
||||
tg.sendData(encoded);
|
||||
return true;
|
||||
} catch (error) {
|
||||
safeTelegram(() => tg.MainButton?.hideProgress());
|
||||
action.disabled = false;
|
||||
updateNativeControls();
|
||||
console.error("Telegram sendData failed", error);
|
||||
showToast("Telegram не принял запись. Обновите приложение и попробуйте снова");
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<meta name="color-scheme" content="dark" />
|
||||
<meta name="theme-color" content="#111111" />
|
||||
<title>Пожитки</title>
|
||||
<link rel="stylesheet" href="./styles.css?v=8" />
|
||||
<link rel="stylesheet" href="./styles.css?v=10" />
|
||||
<script src="./telegram-web-app.js"></script>
|
||||
<script src="./app.js?v=8" defer></script>
|
||||
<script src="./app.js?v=10" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
|
|
@ -123,9 +123,12 @@
|
|||
</main>
|
||||
|
||||
<nav class="bottom-nav" aria-label="Основная навигация">
|
||||
<button id="dashboardTab" class="active" data-view="dashboardView"><span>◫</span>Обзор</button>
|
||||
<button id="historyTab" data-view="historyView"><span>☷</span>История</button>
|
||||
<button id="leaderboardTab" data-view="leaderboardView"><span>♜</span>Рейтинг</button>
|
||||
<div class="nav-tabs">
|
||||
<button id="dashboardTab" class="active" data-view="dashboardView"><span>◫</span>Обзор</button>
|
||||
<button id="historyTab" data-view="historyView"><span>☷</span>История</button>
|
||||
<button id="leaderboardTab" data-view="leaderboardView"><span>♜</span>Рейтинг</button>
|
||||
</div>
|
||||
<button id="appActionButton" class="app-action" type="button" aria-label="Добавить запись">+</button>
|
||||
</nav>
|
||||
|
||||
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
min-height: 190px;
|
||||
padding: 27px;
|
||||
min-height: 148px;
|
||||
padding: 21px 23px;
|
||||
border-radius: 29px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text);
|
||||
|
|
@ -186,11 +186,15 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
|
|||
.leader-percent.negative { color: var(--danger); }
|
||||
.friend-hint { margin: 13px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
|
||||
|
||||
.bottom-nav { position: fixed; z-index: 10; right: max(12px, var(--tg-content-safe-area-inset-right, 0px), env(safe-area-inset-right)); bottom: max(12px, var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom)); left: max(12px, var(--tg-content-safe-area-inset-left, 0px), env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: auto; max-width: 540px; margin: 0 auto; padding: 8px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
||||
.bottom-nav button { display: grid; place-items: center; gap: 2px; padding: 3px; border: 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; }
|
||||
.bottom-nav button > span { font-size: 22px; line-height: 30px; }
|
||||
.bottom-nav button.active { color: var(--accent); }
|
||||
.form-open .bottom-nav { display: none; }
|
||||
.bottom-nav { position: fixed; z-index: 10; right: max(12px, var(--tg-content-safe-area-inset-right, 0px), env(safe-area-inset-right)); bottom: max(12px, var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom)); left: max(12px, var(--tg-content-safe-area-inset-left, 0px), env(safe-area-inset-left)); display: flex; align-items: stretch; gap: 10px; width: auto; max-width: 540px; height: 62px; margin: 0 auto; }
|
||||
.nav-tabs { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: 4px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
||||
.nav-tabs button { display: grid; place-items: center; gap: 1px; min-width: 0; padding: 2px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; }
|
||||
.nav-tabs button > span { font-size: 20px; line-height: 26px; }
|
||||
.nav-tabs button.active { color: var(--accent); background: rgba(255, 255, 255, .07); }
|
||||
.app-action { display: grid; flex: 0 0 62px; place-items: center; width: 62px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 34px; font-weight: 500; line-height: 1; box-shadow: var(--shadow); transition: flex-basis .24s ease, width .24s ease, border-radius .24s ease; }
|
||||
.app-action:disabled { opacity: .72; cursor: default; }
|
||||
.form-open .nav-tabs { display: none; }
|
||||
.form-open .app-action { flex-basis: 100%; width: 100%; border-radius: 999px; font-size: 16px; font-weight: 800; }
|
||||
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(92px + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))); max-width: calc(100% - 36px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; transform: translate(-50%, 20px); background: rgba(0, 0, 0, .62); color: var(--text); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
||||
.toast.show { opacity: 1; transform: translate(-50%, 0); }
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue