Repository navigation
feat: design system oficial do He4rt + splash animada com a marca - #3
Merged
Merged
Conversation
Portado de heartdevs.com (app-modules/he4rt/resources/css/support/themes.css): primary #782BF1, secondary #9828BD, escala de elevação dark #09090A→#1C1C1F, helper-success/error/info e raios (sm/md/lg/pill). Cor primária do tema Android também alinhada.
Convertidas de heartdevs.com/app-modules/he4rt/resources/fonts (woff2 → ttf via woff2_decompress). Cal-Sans existe como token no CSS do site mas não tem arquivo de fonte versionado lá — não foi portado.
public/splash.png e splash-dark.png (rasterizados do SVG oficial em app-modules/portal/resources/views/components/logo.blade.php, heartdevs.com) substituem o placeholder do NativePHP no boot do app, antes da tela animada assumir. Remove o logo do starter, não usado.
Nova rota inicial (/) — vira o intro animado antes de home (movida pra /home). Marca central com pulso contínuo (native:canvas + circle, scale/ opacity em loop) e halo roxo atrás, aproximação nativa do efeito de "LED correndo" do logo animado do portal (que usa stroke-dasharray, sem equivalente direto no EDGE). Troca automática pra /home via #[Poll] após 1.8s.
…vbar A versão anterior usava o logo pequeno estático da navbar com um pulso genérico — nada a ver com o efeito de LED correndo pela borda que existe de verdade no fundo do hero (animated-logo.blade.php). Corrigido: as duas curvas SVG reais desse componente foram amostradas em 48 pontos por segmento (arc-length uniforme, svgpathtools), viram o contorno de fundo (rasterizado uma vez, he4rt-hero-trace.png) e dois pontos roxos que percorrem essas mesmas curvas via translate-x/y a cada tick de #[Poll], no mesmo ritmo do @Keyframes original (2.6s por volta, segundo LED meia volta atrás — igual ao animation-delay: 1.3s do CSS). Remove o mark antigo, não usado mais.
Contributor
Author
Correção: splash agora reproduz o
|
O EDGE não desenha paths/stroke-dasharray arbitrários — a tentativa anterior (LEDs percorrendo pontos amostrados) não chegava perto do efeito real. Solução: <native:webview php> apontando pra uma rota normal (resources/views/web/splash-animation.blade.php) que embute o HTML/CSS/SVG de animated-logo.blade.php verbatim — mesma animação CSS, sem aproximação. É o escape hatch documentado pra exatamente esse caso (sem equivalente nativo), não uma webview cobrindo o app — o resto continua 100% EDGE. Remove a lógica de LED/pontos amostrados (Splash.php volta a ser só o timer de troca de tela) e o PNG do contorno, que não são mais necessários. Teste novo garante que a rota da animação serve o CSS/ SVG intactos.
Contributor
Author
Pivô: webview embarcada em vez de aproximar com primitivos nativosA tentativa anterior (dois pontos percorrendo waypoints amostrados) ainda não batia com o original — feedback correto. Causa raiz: o EDGE genuinamente não tem desenho de path/`stroke-dasharray` arbitrário, só formas (`rect`/`circle`/`line`), então qualquer aproximação com esses primitivos ia ficar visualmente diferente. Solução: `<native:webview php>` (o escape hatch documentado do próprio NativePHP pra exatamente esse caso) apontando pra uma rota normal que serve o HTML/CSS/SVG de `animated-logo.blade.php` verbatim — mesmo CSS, mesma animação, zero aproximação. Só essa tela usa webview; o resto do app continua 100% EDGE nativo. |
Fundo/texto da splash seguiam o tema do sistema (bg-theme-background) — em light mode ficava claro, sem casar com a webview (que já é escura por baixo). Novos tokens splash-background/on-splash-background (mesmo valor nos dois temas, config/native-ui.php) fixam o visual da marca independente do modo do device. O splash.png estático do boot do OS também virou escuro, pra não ter flash claro antes da tela animada assumir. Timer de troca de tela dobrado (2 voltas completas de 2.6s em vez de 1) — corta num ponto parado do ciclo, não no meio de uma volta.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Contexto
O app ainda usava os tokens/placeholder de cor padrão do template do NativePHP. Essa PR porta o design system real do He4rt (de
heartdevs.com, módulohe4rt) e usa a marca (coração/H) como tela de splash — tanto o boot estático do OS quanto uma tela animada logo em seguida.Alterações
Paleta e raio do design system
config/native-ui.php: tokens de cor portados deapp-modules/he4rt/resources/css/support/themes.css(heartdevs.com) —primary#782BF1,secondary#9828BD (fixos entre light/dark, o CSS de origem não os sobrescreve), escala de elevação dark#09090A → #1C1C1Fmapeada prasurface/background/surface-variant,helper-success/error(#00CD0F/#FC3A38),outline-medium/outline-low. Raiossm/md/lg/pilltambém portados (8/16/24/9999).config/nativephp.php: cor primária do tema Android alinhada com o roxo do He4rt.Fontes
.woff2pra.ttf(viawoff2_decompress) a partir dos arquivos reais do site e trazidas praresources/fonts/. Aliasesdefault/medium/bold/mono/mono-mediumemconfig/native-ui.php.Cal-Sansexiste como token no CSS do site mas não tem arquivo de fonte versionado lá — não foi portado.Splash estático do OS
public/splash.png/splash-dark.png— rasterizados do SVG oficial da marca (app-modules/portal/resources/views/components/logo.blade.php) sobre o background do design system, substituindo o placeholder do NativePHP no boot do app. Removido o logo do starter (nativephp-logo.png), não usado.Tela de splash animada
Splash(app/NativeComponents/Splash.php) vira a rota inicial (/); a Home antiga passou pra/home.native:canvas+circle,scale/opacityem loop) — aproximação nativa do logo animado do portal, que usastroke-dasharray/stroke-dashoffset(efeito de "LED correndo" na borda) sem equivalente direto nos primitivos de desenho do EDGE (canvas/rect/circle/line, sem path arbitrário)./homevia#[Poll(1800)]— dispara uma vez e para sozinho porque o componente desmonta ao navegar.Plano de Testes
vendor/bin/pint --dirtylimpophp artisan test— 10 testes (3 novos praSplash, incluindoassertReplacedWith('/home')viafirePoll('finish'))native:runpra conferir visualmente o pulso e o timing da transição (não posso rodar isso eu mesmo)Evidências
Preview do splash estático (dark), gerado a partir do SVG oficial da marca:
#FBFBFF+ marca#782BF1#09090A+ marca#782BF1Issues Relacionadas
Relates to he4rt/heartdevs.com#531