req-137: Seleção em Lote no Iframe do Admin-Arquivos, Overlay Fixo nos Modos Compactos e Controle de Tamanhos no Galleries

Descrição do Problema / Contexto

Durante o uso prático do gerenciador de arquivos (admin-arquivos) e do módulo de galerias (galleries), foram identificados três pontos de usabilidade e ergonomia visual que precisam de aprimoramento:

1. Seleção Múltipla Incompleta no Iframe do admin-arquivos: Quando o gerenciador de arquivos é aberto dentro de um modal/iframe (por exemplo, ao adicionar imagens em lote em uma galeria), o usuário pode marcar múltiplos arquivos ou clicar em "Selecionar todos" (#c2f-select-all), porém a barra de seleção (#c2f-selection-bar) só oferece o botão de "Excluir selecionados". Falta um botão dedicado de "Selecionar selecionados" para despachar todos os arquivos marcados de uma só vez para o módulo consumidor pai.

2. Layout Shift / Aumento Indesejado da Caixa no Hover (admin-arquivos): Nos modos de visualização médio (data-view="medium") e pequeno (data-view="small"), o CSS oculta a barra de ações .c2f-actions por padrão (display: none) e a exibe no :hover com display: flex. Isso altera a altura do card .c2f-item repentinamente no fluxo do DOM, empurrando todos os itens ao redor e gerando um efeito visual instável e desconfortável.

3. Falta de Controle de Tamanho de Visualização no Módulo galleries: Na tela de edição/adicionar/clonar de galerias (galleries), a listagem de fotos (#gallery-items) possui um tamanho fixo grande (200x140px por miniatura). Quando a galeria contém dezenas ou centenas de imagens, a visualização e reordenação tornam-se lentas e trabalhosas. É necessário implementar um controle de visualização similar ao c2f-views do admin-arquivos, permitindo alternar entre múltiplos tamanhos de miniatura (Grande, Médio, Pequeno/Compacto).

Escopo Detalhado das Alterações

1. Seleção em Lote no Iframe do admin-arquivos

• Templates HTML (gestor/modulos/admin-arquivos/resources/{pt-br,en}/pages/admin-arquivos/admin-arquivos.html):

  • Na barra de seleção #c2f-selection-bar, adicionar o botão de confirmação em lote ao lado de #c2f-delete-selected:

    <button class="ui right floated mini primary button hidden" id="c2f-pick-selected">
    <i class="check icon"></i> @[[pick-selected]]@
    </button>

• I18n / Variáveis (admin-arquivos.json ou arquivos de recursos de variáveis):

  • Adicionar a chave pick-selected:

  • pt-br: "Selecionar selecionados"

  • en: "Select selected"

• JavaScript (gestor/modulos/admin-arquivos/admin-arquivos.js):

  • Na função atualizarBarraSelecao(), verificar se a página está rodando em modo iframe (gestor.paginaIframe === true ou $_GESTOR['paginaIframe']).

  • Se estiver em iframe e houver 1 ou mais arquivos selecionados, exibir o botão #c2f-pick-selected (removendo a classe .hidden); se estiver em modo normal de navegação (fora de iframe), manter o botão oculto.

  • No evento de clique em #c2f-pick-selected:

  • Obter a lista de itens selecionados em estado.selecionados.

  • Filtrar apenas os itens do tipo arquivo (ignorar pastas).

  • Para cada arquivo selecionado, construir o payload com { id, caminho, imgSrc, nome, data, tipo } e emitir via window.parent.postMessage(JSON.stringify({ moduloId: gestor.moduloId, moduloOpcao: gestor.moduloOpcao, data: JSON.stringify(dados) }), '*').

  • Limpar a seleção atual e/ou emitir feedback visual adequado.

2. Overlay Flutuante / Fixo no Hover do admin-arquivos

• CSS (gestor/modulos/admin-arquivos/resources/{pt-br,en}/pages/admin-arquivos/admin-arquivos.css):

  • Remover o display: none / display: flex dinâmico que altera o fluxo dos cards .view-medium .c2f-actions e .view-small .c2f-actions.

  • Estruturar as ações .c2f-actions nos modos .view-medium e .view-small como uma camada de overlay posicionada de forma absoluta sobre o container da miniatura (.c2f-thumb) ou sobre o card .c2f-item:

  • position: absolute; inset: 0; (ou sobre a área da miniatura).

  • background: rgba(0, 0, 0, 0.55); border-radius: 4px;

  • display: flex; align-items: center; justify-content: center; gap: 6px;

  • opacity: 0; pointer-events: none; transition: opacity .15s ease-in-out; z-index: 4;

  • No :hover do .c2f-item ou .c2f-thumb: aplicar opacity: 1; pointer-events: auto;.

  • Ajustar os botões de ação internos (.ui.mini.icon.button ou ícones brutos) para terem contraste visual nítido sobre o fundo escuro do overlay.

  • Regra Inviolável: As dimensões de largura (width) e altura (height) de .c2f-item, .c2f-thumb e .c2f-meta devem permanecer 100% idênticas com ou sem o mouse sobreposto, eliminando qualquer tremulação ou layout shift no grid.

3. Seletor de Tamanhos de Visualização no Módulo galleries

• Templates HTML (gestor/modulos/galleries/resources/{pt-br,en}/pages/galleries-{adicionar,editar,clonar}/):

  • Imediatamente acima do container #gallery-items (na barra de ferramentas da lista de fotos, ao lado do botão de adicionar imagens), inserir um grupo de botões de controle de visualização c2f-gallery-views:

    <div class="ui right floated mini icon buttons c2f-gallery-views" id="c2f-gallery-views">
    <button class="ui button active" data-view="large" title="@[[view-large-title]]@"><i class="th large icon"></i></button>
    <button class="ui button" data-view="medium" title="@[[view-medium-title]]@"><i class="th icon"></i></button>
    <button class="ui button" data-view="small" title="@[[view-small-title]]@"><i class="grid layout icon"></i></button>
    </div>

• I18n / Variáveis (galleries.json ou variáveis de módulo):

  • Adicionar textos de tooltip/label para os modos de visualização (ex: view-large-title, view-medium-title, view-small-title em pt-br e en).

• CSS de Galerias (gestor/modulos/galleries/galleries.js - injectGalleryStyles ou arquivo CSS dedicado):

  • Estruturar os modos de exibição no container #gallery-items:

  • Modo Grande (.view-large ou padrão):

    • .gallery-item-thumb { width: 200px; height: 140px; }

    • Layout padrão com campos de caption e link abertos/espaçosos.

  • Modo Médio (.view-medium):

    • .gallery-item-thumb { width: 120px; height: 85px; }

    • Padding do .gallery-item reduzido e fontes de caption/nome compactadas.

  • Modo Pequeno (.view-small):

    • .gallery-item-thumb { width: 70px; height: 50px; }

    • Layout ultra-compacto voltado para reordenação rápida de grandes volumes de fotos via drag & drop.

• JavaScript (gestor/modulos/galleries/galleries.js):

  • Implementar o listener para alternância dos botões .c2f-gallery-views button:

  • Ao clicar, alternar a classe .active no botão selecionado.

  • Remover as classes de visualização anteriores do #gallery-items e adicionar view-[tamanho].

  • Persistir a preferência no localStorage sob a chave gestor.moduloId + 'GalleryView'.

  • Na inicialização (document.ready), restaurar o modo salvo no localStorage (com fallback para large).

Plano de Validação e Testes

1. Validação de Sintaxe:

   • php -l em todos os arquivos PHP modificados/tocados.

   • node --check em admin-arquivos.js e galleries.js.

   • Validação de JSON nos arquivos de configuração de módulo (admin-arquivos.json, galleries.json).

2. Suíte de Testes Automatizados:

   • Executar composer test e verificar que todos os testes existentes do core continuam passando sem regressões.

3. Validação Manual & Visual:

   • No admin-arquivos em modo iframe (Image Picker):

     • Clicar em "Selecionar todos" (#c2f-select-all) ou marcar múltiplos checkboxes.

     • Confirmar que a barra de seleção exibe o botão "Selecionar selecionados".

     • Clicar no botão e validar se todas as imagens marcadas são enviadas para a galeria receptora.

   • No admin-arquivos na visualização normal:

     • Alternar para os modos Médio e Pequeno.

     • Passar o mouse sobre múltiplos cards e validar que o overlay surge sem alterar o tamanho do card nem deslocar os itens adjacentes.

   • No galleries:

     • Acessar a tela de editar/adicionar galeria com 10+ fotos.

     • Alternar entre os botões Grande, Médio e Pequeno e verificar a adaptação das miniaturas.

     • Recarregar a página e confirmar que o tamanho selecionado foi mantido pelo localStorage.