Parece que ambos componentes reorganizan el div .contents en la cabecera.
La estructura con el diseño de ancho completo:
Estructura con header-search:
Así que no puedo usarlos juntos. Pero no estoy seguro de dónde es mejor arreglar esto.
3 Me gusta
La semana pasada me encontré con este mismo problema con estos dos componentes… es un poco complicado porque pretendía que el componente de ancho completo fuera un experimento temporal, pero no tenemos nada en la hoja de ruta para integrarlo por defecto, así que se quedará más tiempo de lo que esperaba.
El componente de ancho completo no es ideal porque requiere cambiar la plantilla del encabezado (la única forma en que pude superar algunos problemas de diseño).
A primera vista… creo que la anulación de la plantilla en el componente de búsqueda del encabezado no es necesaria, así que puedo intentar moverla a un decorador de widgets, lo que evitaría el problema.
4 Me gusta
Lo que intenté como solución temporal es no cambiar el widget de contenido de encabezado en el componente de ancho completo. Así, el alternador de la barra lateral y el título no están agrupados bajo __toggle-and-logo. Y luego, simplemente organizar ambos en el área de cuadrícula del alternador. Hasta ahora no he visto problemas de diseño con esto. ¿Pero probablemente me estoy perdiendo algo?
Creo que es muy popular. Tengo tres proyectos de personalización actuales y todos optaron por el ancho completo. Por eso también publiqué esto, preferiría no retocar componentes oficiales para lograr lo que parece ser una elección común.
2 Me gusta
Si mal no recuerdo, el envoltorio adicional facilita la alineación del título con el contenido del tema porque puedo establecer el ancho combinado de .header-contents__toggle-and-logo en var(--d-sidebar-width), y tiene el mismo ancho que la barra lateral independientemente del contenido.
Sin el envoltorio adicional, el diseño es factible… pero con dos columnas de cuadrícula no puedo depender de un solo ancho para ambas.
Tengo que asumir que el alternador de la barra lateral siempre tendrá un ancho estático y luego calcular el ancho máximo del logotipo en función de eso. Eso funciona, pero recuerdo que era más frágil… No he mirado esto en mucho tiempo, pero tal vez valga la pena intentarlo de nuevo 
Volviendo a esto… puedo ver por qué se hizo con una anulación. Sin ella, tienes que decorar el widget de título o iconos de cabecera, por lo que terminas añadiendo contenido dentro de .title o .panel, lo que dificulta la alineación central de la barra de búsqueda… y requiere CSS que hace que el diseño sea más frágil y dificulta la compatibilidad con otros componentes de la cabecera. Idealmente, el contenido de la barra de búsqueda debería estar fuera de estos divs, pero no hay nada a lo que engancharse para hacerlo.
Ahora podemos añadir un plugin outlet a los widgets, así que eso podría ayudar…
Esto permitiría añadir contenido antes del div .panel, en lugar de dentro de él con decorateWidget. En este caso, la anulación de la plantilla podría eliminarse del componente header-search, y se puede añadir un nuevo conector a:
javascripts/discourse/connectors/before-header-panel
que podría contener
<MountWidget @widget="search-banner" />
Sin embargo, añadir un plugin outlet a un widget para poder añadir un widget a un plugin outlet parece un poco complicado… @david/@cvx, ¿saben si esto sería malo para el rendimiento o causaría algún otro problema?
1 me gusta
Por cierto, aquí tienes lo que intenté como solución en el componente de ancho completo: https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents
Eso es:
- usar el diseño de plantilla predeterminado sin un div envolvente adicional alrededor del alternador y el logotipo del título
- hacer coincidir los elementos con las áreas de la cuadrícula
Sin embargo, veo que el logotipo del título vuelve al logotipo pequeño cuando los títulos de los temas se muestran en la cabecera. Esto también ocurre aquí en meta en el diseño de ancho completo. Realmente no entiendo qué argumentos de plantilla usar aquí para mostrar siempre el logotipo completo.
Ya veo, los pones ambos en la misma área de la cuadrícula y aplicas un margen al logo… ¡eso parece un compromiso razonable!
por eso se reabre el home-logo aquí:
Si la barra lateral no se muestra, utiliza la lógica del logo predeterminada para cambiar entre grande/pequeño… si la barra lateral se muestra, siempre devuelve el logo grande.
1 me gusta
Podría ser un poco más lento, pero no me preocupa demasiado en este caso porque solo hay una instancia del outlet de plugin en la página (en lugar de, por ejemplo, un outlet de plugin de topic-list-item que se renderizaría más de 25 veces).
Añadir un outlet ahí me parece genial 
1 me gusta
Ok, he actualizado ambos componentes para evitar anulaciones de plantillas:
Ahora deberían funcionar juntos 
¡Gracias por las sugerencias @manuel!
3 Me gusta