João Henrique
b541f502ba
- Adicionado estrutura completa do projeto - Configurado MCP server para Premiere Pro - Adicionado documentação e skills - Configurado Gitignore para o projeto
62 lines
2.6 KiB
Markdown
62 lines
2.6 KiB
Markdown
# Boas práticas de UI para os nossos painéis (CEP/UXP)
|
||
|
||
Padrão a seguir em qualquer tela nova ou existente deste projeto
|
||
(`cep-plugin/`, `uxp-plugin/`, `chat-plugin/` e afins). Escrito depois de um
|
||
caso real: o painel `cep-plugin` ficou sem scroll e com fonte grande demais
|
||
ao adicionarmos a aba "Cortar silêncio", cortando conteúdo fora da vista.
|
||
|
||
## 1. Scroll sempre habilitado
|
||
|
||
Painéis do Premiere/Adobe rodam num container de tamanho variável e
|
||
imprevisível (o usuário pode redimensionar o painel, encaixá-lo, ou o
|
||
conteúdo pode crescer com o tempo — abas, listas, logs). **Nunca assumir que
|
||
tudo cabe na tela.**
|
||
|
||
- O container raiz do painel (ex: `.panel-shell`) deve ter:
|
||
```css
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
```
|
||
- `height: 100%` continua correto — o scroll é vertical, dentro da altura
|
||
disponível, não uma altura fixa maior que a tela.
|
||
- Não usar `overflow: hidden` no elemento que contém o conteúdo real do
|
||
painel (pode ficar em `body` como reset, mas o container interno com o
|
||
conteúdo precisa poder rolar).
|
||
|
||
## 2. Tamanho de fonte
|
||
|
||
Painéis CEP/UXP são compactos por natureza (encaixados em painéis estreitos
|
||
do Premiere). O padrão desta base é fonte **10% menor** que o tamanho "web
|
||
normal" para caber mais informação sem parecer apertado:
|
||
|
||
- Fonte base do `body`: `10.8px` (era `12px`, reduzida em 10%).
|
||
- Qualquer `font-size` declarado explicitamente em outro seletor deve seguir
|
||
a mesma proporção (multiplicar o valor "normal" por `0.9`).
|
||
- Ao adicionar um elemento novo com fonte própria, comece do tamanho que
|
||
pareceria natural numa web app comum e aplique o fator `× 0.9`.
|
||
|
||
## 3. Ao criar uma aba/seção nova
|
||
|
||
- Reaproveitar as classes existentes (`.config-section`, `.section-heading`,
|
||
`.action-row`, `.field-help`, `.button`, `.log-entry` com `ok`/`err`) em
|
||
vez de inventar estilos novos — mantém a tela inteira visualmente
|
||
consistente.
|
||
- Toda seção com log/atividade deve ter altura própria com scroll interno
|
||
quando fizer sentido (ex: `#log`, `#silenceLog`), mas isso não substitui o
|
||
scroll do painel inteiro — os dois podem coexistir.
|
||
|
||
## 4. Depois de editar o painel CEP, sempre reinstalar
|
||
|
||
O Premiere carrega o painel de uma **cópia instalada** em
|
||
`~/Library/Application Support/Adobe/CEP/extensions/MCPBridgeCEP/`, não
|
||
direto da pasta `cep-plugin/` deste repositório. Editar os arquivos fonte
|
||
não é suficiente — é preciso rodar:
|
||
|
||
```bash
|
||
node dist/index.js --install-cep
|
||
```
|
||
|
||
(ou `admin/PremiereMCP.command`, que já faz isso automaticamente) e depois
|
||
**reiniciar o Premiere Pro por completo** — o painel não recarrega sozinho
|
||
nem com um simples fechar/abrir da aba.
|