Parece que ambos os componentes reorganizam a div .contents no cabeçalho.
A estrutura com o layout de largura total:
Estrutura com header-search:
Então não posso usá-los juntos. Mas não tenho certeza de onde é melhor corrigir isso?
3 curtidas
Encontrei exatamente este problema com estes dois componentes na semana passada… é um pouco complicado porque eu pretendia que o componente de largura total fosse um experimento temporário, mas não temos nada no roteiro para integrá-lo por padrão, então ele está permanecendo por mais tempo do que eu esperava.
O componente de largura total não é ideal porque requer a alteração do template do cabeçalho (a única maneira que eu poderia superar alguns problemas de layout).
À primeira vista… eu acho que a substituição do template no componente de busca do cabeçalho não é necessária, então posso dar uma olhada em mover isso para um decorador de widget, o que evitaria o problema.
4 curtidas
O que tentei como correção temporária é não alterar o widget de cabeçalho no componente de largura total. Assim, o alternador de barra lateral e o título não são agrupados sob __toggle-and-logo. E então, apenas organize ambos na área de grade do alternador. Não vi problemas de layout com isso até agora. Mas provavelmente estou perdendo algo?
Acho que é muito popular. Tenho três projetos de personalização atuais e todos optaram pela largura total. É também por isso que postei isso, eu preferiria não ajustar componentes oficiais para conseguir o que parece ser uma escolha comum.
2 curtidas
Se bem me lembro, o wrapper extra facilita o alinhamento do título com o conteúdo do tópico porque posso definir a largura combinada de .header-contents__toggle-and-logo como var(--d-sidebar-width), e ela tem a mesma largura da barra lateral, independentemente do conteúdo.
Sem o wrapper extra, o layout é funcional… mas com duas colunas de grid, não posso depender de uma única largura para ambas.
Preciso assumir que o toggle da barra lateral sempre terá alguma largura estática e, em seguida, calcular a largura máxima do logo com base nisso. Isso funciona, mas me lembro de ser mais frágil… Não olho para isso há algum tempo, mas talvez valha a pena tentar novamente 
Voltando a isso… consigo ver por que foi feito com uma substituição. Sem ela, você tem que decorar o widget de título ou ícones do cabeçalho, então você acaba adicionando conteúdo dentro de .title ou .panel, o que torna o alinhamento central da barra de pesquisa mais difícil… e requer algum CSS que torna o layout mais frágil e a compatibilidade com outros componentes do cabeçalho mais difícil. Idealmente, o conteúdo da barra de pesquisa deveria estar fora dessas divs, mas não há nada para se conectar para fazer isso.
Agora podemos adicionar um plugin outlet aos widgets, o que pode ajudar…
Isso permitiria que o conteúdo fosse adicionado antes da div .panel, em vez de dentro dela com decorateWidget. Neste caso, a substituição do template poderia ser removida do componente header-search, e um novo conector pode ser adicionado a:
javascripts/discourse/connectors/before-header-panel
que poderia conter
<MountWidget @widget="search-banner" />
Adicionar um plugin outlet a um widget para que possamos adicionar um widget a um plugin outlet parece um pouco complicado, no entanto… @david/@cvx vocês sabem se isso seria ruim para o desempenho ou causaria outros problemas?
1 curtida
Aliás, aqui está o que tentei como correção no componente de largura total: https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents
Ou seja:
- usar o layout de template padrão sem div de encapsulamento adicional em torno do alternador e do logo do título
- corresponder os itens às áreas da grade
No entanto, vejo que o logo do título volta para o logo pequeno quando os títulos dos tópicos são exibidos no cabeçalho. Isso também acontece aqui no meta no layout de largura total. Eu realmente não entendo quais argumentos de template usar aqui para sempre mostrar o logo completo.
Ah, entendi, você colocou ambos na mesma área de grade e aplicou uma margem ao logo… parece um bom compromisso!
é por isso que o home-logo é reaberto aqui:
Se a barra lateral não for exibida, ele usa a lógica padrão do logo para alternar entre grande/pequeno… se a barra lateral for exibida, ele sempre retorna o logo grande.
1 curtida
Pode ser um pouco mais lento, mas não estou muito preocupado neste caso porque há apenas uma instância do ponto de extensão de plugin na página (em oposição a, por exemplo, um ponto de extensão de plugin topic-list-item que seria renderizado mais de 25 vezes).
Adicionar um ponto de extensão lá soa ótimo para mim 
1 curtida
ok, então atualizei ambos os componentes para evitar substituições de template —
Então agora eles devem funcionar juntos 
obrigado pelas sugestões @manuel!
3 curtidas