Конфликтующие объявления для двух компонентов: макет на всю ширину и поиск в заголовке

Похоже, что оба компонента перестраивают div .contents в заголовке.

Структура с макетом на всю ширину:
image

Структура с header-search:
image

Поэтому я не могу использовать их вместе. Но не уверен, где лучше всего это исправить?

На прошлой неделе я столкнулся с этой же проблемой с этими двумя компонентами… Это немного сложно, потому что я планировал компонент на всю ширину как временный эксперимент, но в дорожной карте у нас ничего нет для его интеграции по умолчанию, поэтому он остаётся дольше, чем я ожидал.

Компонент на всю ширину не идеален, так как требует изменения шаблона заголовка (это единственный способ, которым я смог преодолеть некоторые проблемы с макетом).

На первый взгляд… я не думаю, что переопределение шаблона в компоненте поиска в заголовке необходимо, поэтому я могу посмотреть на перенос этого в декоратор виджета, что позволит избежать проблемы.

В качестве временного решения я не менял виджет содержимого заголовка в компоненте на всю ширину. Таким образом, переключатель боковой панели и заголовок не сгруппированы под __toggle-and-logo. А затем просто разместил оба элемента в сеточной области toggle. Пока проблем с макетом не заметил, но, возможно, что-то упустил?

Думаю, он очень популярен. У меня три текущих проекта по кастомизации, и все выбрали вариант на всю ширину. Именно поэтому я и написал об этом: я бы предпочёл не править официальные компоненты ради реализации того, что, судя по всему, стало распространённым выбором.

Если я правильно помню, дополнительный обертка упрощает выравнивание заголовка с содержимым темы, поскольку я могу установить ширину .header-contents__toggle-and-logo равной var(--d-sidebar-width), и она всегда совпадает с шириной боковой панели, независимо от содержимого.

Без дополнительной обертки макет работоспособен… но при использовании двух колонок сетки я не могу полагаться на единую ширину для обеих.

Мне нужно исходить из того, что переключатель боковой панели всегда имеет фиксированную ширину, а затем вычислять максимальную ширину логотипа на её основе. Это работает, но, насколько я помню, такой подход менее надёжен… Я давно не рассматривал эту задачу, но, возможно, стоит попробовать ещё раз :thinking:

Возвращаюсь к этому вопросу… Теперь я понимаю, почему было использовано переопределение. Без него приходится декорировать виджеты заголовка или иконок, что приводит к добавлению содержимого внутрь .title или .panel. Это усложняет центрирование строки поиска… и требует CSS-правки, которые делают макет менее надёжным и усложняют совместимость с другими компонентами заголовка. В идеале содержимое строки поиска должно находиться вне этих div-элементов, но нет точек подключения для этого.

Теперь мы можем добавлять точки подключения плагинов в виджеты, что может помочь…

Это позволит добавлять содержимое перед div-элементом .panel, а не внутрь него через decorateWidget. В этом случае переопределение шаблона можно будет убрать из компонента header-search и добавить новый коннектор к:

javascripts/discourse/connectors/before-header-panel

который будет содержать

<MountWidget @widget="search-banner" />

Однако добавление точки подключения плагина в виджет, чтобы затем добавить виджет в эту точку подключения, кажется немного запутанным… @david/@cvx, знаете ли вы, может ли это негативно сказаться на производительности или вызвать какие-либо другие проблемы?

Кстати, вот что я попробовал в качестве исправления для компонента на всю ширину: https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents

А именно:

  • использовать стандартную разметку шаблона без дополнительного обёрточного div вокруг переключателя и логотипа заголовка
  • сопоставить элементы с областями сетки

Однако я заметил, что логотип заголовка снова переключается на маленький, когда в заголовке отображаются названия тем. Это также происходит здесь на Meta в макете на всю ширину. Я не совсем понимаю, какие аргументы шаблона использовать здесь, чтобы всегда отображать полный логотип.

Ах, понятно, вы разместили их оба в одной области сетки и добавили отступ к логотипу… это выглядит как разумный компромисс!

Вот почему home-logo здесь снова открыт:

Если боковая панель не отображается, используется логика логотипа по умолчанию для переключения между большим/маленьким… если боковая панель отображается, он всегда возвращает большой логотип.

Это может быть немного медленнее, но в данном случае я не слишком беспокоюсь, так как на странице есть только один экземпляр выхода плагина (в отличие, например, от выхода плагина элемента списка тем, который будет отображаться 25+ раз).

Добавление выхода там звучит отлично :white_check_mark:

Окей, я обновил оба компонента, чтобы избежать переопределения шаблонов —

Теперь они должны работать вместе :rocket: спасибо за предложения, @manuel!