feat(ui): paint VK status bar to the app theme (VKWebAppSetViewSettings)
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 58s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 2m13s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 58s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 2m13s
Parity with the Telegram chrome painting: on a VK Mini App launch and on every theme change, set VK's status-bar appearance (and, on Android, the action/navigation bar colours) from the app's live theme tokens, so the VK chrome matches the UI instead of clashing. syncVKChrome mirrors syncTelegramChrome; the status-bar appearance is derived from the --bg token's luminance (appearanceForBg, unit-tested). Wired into the VK onScheme handler (fires on launch + on theme change) and setTheme. Docs: UI_DESIGN VK integration.
This commit is contained in:
@@ -198,3 +198,42 @@ export async function vkDisableSwipeBack(): Promise<void> {
|
||||
// Outside VK / unsupported: VK's default gesture handling stays as-is.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* appearanceForBg maps a background colour to the VK view appearance: a dark background wants the
|
||||
* 'dark' appearance (light status-bar icons), a light one 'light'. It accepts a `#rgb` / `#rrggbb`
|
||||
* string (the app's `--bg` token); anything unparseable defaults to 'light'. Pure, so it is
|
||||
* unit-tested.
|
||||
*/
|
||||
export function appearanceForBg(bg: string): 'light' | 'dark' {
|
||||
const hex = bg.trim().replace(/^#/, '');
|
||||
const full = hex.length === 3 ? [...hex].map((c) => c + c).join('') : hex;
|
||||
if (full.length !== 6 || /[^0-9a-fA-F]/.test(full)) return 'light';
|
||||
const r = parseInt(full.slice(0, 2), 16);
|
||||
const g = parseInt(full.slice(2, 4), 16);
|
||||
const b = parseInt(full.slice(4, 6), 16);
|
||||
// Rec. 601 luma; below the midpoint is a dark background.
|
||||
return 0.299 * r + 0.587 * g + 0.114 * b < 128 ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
/**
|
||||
* vkSetViewSettings paints VK's status bar — and, on Android, the action and navigation bars — to
|
||||
* match the app. appearance is the VK status-bar appearance ('light' | 'dark'); actionBarColor and
|
||||
* navigationBarColor are Android-only hex colours (ignored elsewhere). Best-effort; a no-op outside
|
||||
* VK or on a client without the method.
|
||||
*/
|
||||
export async function vkSetViewSettings(
|
||||
appearance: 'light' | 'dark',
|
||||
actionBarColor: string,
|
||||
navigationBarColor: string,
|
||||
): Promise<void> {
|
||||
try {
|
||||
await (await bridge()).send('VKWebAppSetViewSettings', {
|
||||
status_bar_style: appearance,
|
||||
action_bar_color: actionBarColor,
|
||||
navigation_bar_color: navigationBarColor,
|
||||
});
|
||||
} catch {
|
||||
// Outside VK / unsupported: the client keeps its default bars.
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user