O editor visual

O editor é onde se desenha o ecrã. Abre-se pelo ícone do lapis na barra superior, ou directamente em /dashboard/<id>/design.

As três zonas

A palete

A coluna da esquerda lista os widgets disponíveis. Arrasta-se um para a tela para o criar no sítio onde se larga.

O KPI e o Gráfico aparecem primeiro por serem os mais usados; o resto segue a ordem do catálogo. Ver Catálogo de widgets.

A tela

Ao centro, o ecrã a escala real, com a grelha visível. Aqui:

• Clicar selecciona um widget; Shift + clique junta a selecção.
• Arrastar move; arrastar pelas pegas redimensiona.
• Arrastar para dentro de um painel reparenta o widget — passa a ser filho do painel e move-se com ele.
• O zoom no canto direito ajusta a escala de trabalho sem alterar nada do desenho.

Os widgets mostram os dados reais durante a edição: um gráfico no editor desenha as mesmas linhas que desenha na vista. Não há modo de pré-visualização separado porque não é preciso.

O inspector

A direita, com dois separadores:

Propriedades — o que o widget seleccionado faz. Tem sempre três blocos:

Bloco	Conteúdo
Layout	Coluna, largura (em colunas), Y e altura (em píxeis), além de Visível e Activo
Aspecto	Título, descrição, cores, borda, alinhamento, tamanho e peso do texto
Propriedades	O que e próprio do tipo: dados, mapeamentos, colunas, indicadores

Estrutura — a árvore de widgets do ecrã, útil para alcançar um widget escondido atrás de outro ou para perceber quem está dentro de quem.

Sem nada seleccionado, o inspector mostra as propriedades do ecrã: rota, parâmetros, comportamento de scroll, se e público, modo de apresentação, filtros do dashboard e eventos do ecrã.

A barra de ferramentas

Da esquerda para a direita:

Grupo	O que faz
Dispositivo	Web (1280px), Tablet (768px), Telemóvel (390px) — ver Web, tablet e telemóvel
Desfazer / refazer	Sobre todas as operações do editor
Ordem	Trazer para a frente, enviar para tras, subir e descer um nível
Duplicar e apagar	Sobre a selecção actual
Alinhar	Esquerda, centro, direita, topo, meio, base
Distribuir	Espacamento igual na horizontal ou na vertical
Zoom	Reduzir, valor actual, aumentar

As ferramentas de alinhamento e distribuição só ficam activas com vários widgets seleccionados, e são a forma rápida de arrumar uma linha de indicadores que ficou desalinhada.

Gravar

O editor grava sozinho. O indicador no canto superior esquerdo mostra o estado: Guardado quando está tudo escrito.

Não há botão de gravar nem risco de perder trabalho por sair sem gravar.

Histórico

O ícone do relógio abre o histórico de versões do dashboard. Cada alteração fica registada com autor e descrição, e é possível voltar a um estado anterior.

Ver Histórico de versões.

Editor de código

O ícone </> abre o documento do ecrã em texto. É o mesmo conteúdo que o editor visual escreve, e serve para:

• ver exactamente o que uma configuração produziu;
• copiar um widget bem configurado de um ecrã para outro;
• corrigir a mao algo que seja mais rápido escrever do que clicar.

O documento é validado antes de ser aceite: um erro de estrutura é recusado com a mensagem exacta, e nada e gravado.

O seletor de ecrãs

No topo, ao lado do título, uma caixa única mostra o ecrã a ser editado: um ícone indica o tipo — ecrã normal, modal ou painel —, seguido do nome do dashboard e do ecrã (principal, ou o nome do auxiliar). O botão + ao lado cria um ecrã auxiliar novo.

É aqui que se alterna entre o ecrã principal e os ecrãs de detalhe. Ver Ecrãs auxiliares.

Atalhos

Os atalhos completos estão em Atalhos de teclado. Os que se usam a toda a hora:

Atalho	Efeito
Setas esquerda/direita	Mover uma coluna da grelha
Setas cima/baixo	Mover um pixel
Shift + setas cima/baixo	Mover oito píxeis
Ctrl/Cmd + Z	Desfazer
Ctrl/Cmd + Shift + Z	Refazer
Ctrl/Cmd + D	Duplicar a selecção
Ctrl/Cmd + A	Seleccionar tudo o que existe neste dispositivo
Delete ou Backspace	Apagar a selecção
Escape	Limpar a selecção