New Topic Header Button

[jrgong]

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

[lollop]

@tophee

@codinghorror

Приглашение каждого случайного посетителя создать новую тему… закончится слезами

Что ж, они не могут создать эту тему, пока не зарегистрируются. А поощрение людей к регистрации — это, очевидно, хорошая вещь (и это уже делается по умолчанию через кнопку регистрации и кнопку ответа на тему). Так что я не вижу, почему кнопка «Новая тема» должна вызывать какие-либо проблемы.

Я тоже хотел иметь эту функциональность, поэтому я сделал форк репозитория и настроил отображение кнопки «Новая тема» как для анонимных, так и для авторизованных пользователей. Если анонимный пользователь нажимает на кнопку, его перенаправляют на модальное окно входа/регистрации.

Репозиторий: GitHub - Peterlollo/discourse-new-topic-button-for-all-users-theme-component: Adds new topic button to header and shows it to every user regardless of logged in status · GitHub

[manuel (Manuel Kostka)]

Некоторые имена классов устарели, поэтому стили отображаются не так, как задумано. Добавлен pull request для их обновления: FIX: update declarations by nolosb · Pull Request #6 · discourse/discourse-new-topic-button-theme-component · GitHub

[kuaza]

Возможно ли обновить этот плагин до новой версии?

[awesomerobot (Kris)]

Я только что объединил рефакторинг этого компонента, чтобы он работал с этими обновлениями: Upcoming Header Changes - Preparing Themes and Plugins

Компонент должен функционировать как и раньше, с небольшими улучшениями (он будет отражать состояние черновика и реагировать на текущие разрешения для категорий и тегов). Если вы заметите какие-либо новые проблемы, пожалуйста, сообщите нам.

[awesomerobot (Kris)]

@lollop

Я тоже хотел иметь эту функциональность, поэтому я сделал форк репозитория и настроил отображение кнопки «Новая тема» как для анонимных, так и для авторизованных пользователей. Если анонимный пользователь нажмёт на кнопку, его перенаправит на модальное окно входа/регистрации.

Я только что добавил новую настройку show_to_anon (по умолчанию отключена), которая реализует это.

[jrgong]

Насколько «реализуемо» было бы добавить выпадающее меню, аналогичное компоненту выпадающего мастера в nolo’s dropdown wizard component?

Поскольку мы используем пользовательский мастер для создания новых тем в конкретных категориях, мы хотели бы по сути связать их с выпадающими меню. Кроме того, мы также хотели бы добавить в кнопку ссылки, доступные только сотрудникам (например, «Новая категория» и «Новая группа»).

[patrickemin]

Привет! Я не могу использовать бесплатный иконку “pencil” из Font Awesome в этом компоненте, даже после добавления её в настройки “подмножество SVG-икон”. Есть какие-то идеи?

[Moin]

@Patrick EMIN

Иконка «pencil» из бесплатного набора Font Awesome

Похоже, что в версии 5 бесплатной иконки pencil нет.

Custom user menu tab

We’re not on Font Awesome 6 yet, so you’ll need to search the version 5 set for available icons here: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome It looks like that icon was renamed shop in version 6, but it did exist in version 5 with a different name: store-alt. So if you update additional icons and custom tab icon to use store-alt it should work!

Кажется, в v5 для иконки карандаша используется pencil-alt.

[patrickemin]

@Moin

Думаю, то же самое для pencil в v5 — это pencil-alt.

Спасибо! Работает!

[David_Ghost]

Привет,

Возможно ли обновить TC с помощью нового чернового обновления?

Спасибо

[alltiagocom (Tiago)]

Запрос: добавить возможность настройки цветов кнопки (фон, текст и иконка) для светлой и тёмной тем. Поскольку создание новых тем способствует росту сообщества, цветная кнопка будет иметь больший визуальный эффект.

Спасибо

[Canapin (Coin-coin le Canapin)]

Это довольно легко сделать с помощью CSS:

New Topic Header Button

Use this code, changing the color obviously. #new-create-topic { background-color: red; }

(с помощью CSS можно нацеливаться на тёмную и светлую темы)

---

редактирование: добавляю правильный пример

#new-create-topic {
    background-color: light-dark(red,green);
}

Это установит цвет кнопки в красный для светлой темы и в зелёный для тёмной темы.

[alltiagocom (Tiago)]

Я всё ещё не знаком с CSS в Discourse. Я знаком с CSS, но просто ещё не начал изучать его в контексте Discourse.
Где и как это добавить?

Я всё ещё считаю, что это может быть функцией, позволяющей избежать усложнения, и для людей, которые совсем не знакомы с CSS, это просто упростит настройку компонента.

[Canapin (Coin-coin le Canapin)]

@alltiagocom

Где и как это добавить?

Либо в вашей теме (темах), либо в новом компоненте темы — который затем должен быть включен в вашу тему (темы):

Я добавил CSS-код в своём сообщении выше.

[alltiagocom (Tiago)]

Я также тестировал :hover, и он работает для кнопки и текста, но не для иконки, если только я не навожу курсор непосредственно на саму иконку. Подскажите, как настроить стилизацию иконки при наведении на кнопку, даже если курсор мыши находится не над иконкой?

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}

#new-create-topic .d-icon:hover {
    color: light-dark(red,white);
}

[Canapin (Coin-coin le Canapin)]

Ваше второе правило означает, что вы нацеливаетесь на иконку при наведении на неё, а не на кнопку.

Используя синтаксис SCSS, который:

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}
#new-create-topic:hover .d-icon {
    color: light-dark(red,white);
}

(также нет необходимости использовать light-dark(red,red);, если вы применяете один и тот же цвет для светлой и тёмной тем)

Я рекомендую SCSS, так как с ним проще привести наш удобный код в порядок, но это требует изучения чего-то нового 😄

#new-create-topic:hover {
    background-color: light-dark(red,red);
    .d-icon, & {
        color: light-dark(red,white);
    }
}

[alltiagocom (Tiago)]

@Canapin

Ваше второе правило означает, что вы нацеливаетесь на иконку при наведении на неё, а не на кнопку.

Вы правы. Моя ошибка… Спасибо!

@Canapin

Также нет необходимости использовать light-dark(red,red);, если вы применяете один и тот же цвет для светлой и тёмной тем.

Это просто тесты. На самом деле я использую тему по умолчанию и не знаю, поддерживает ли она оба варианта?

Что касается SCSS, я изучил его несколько лет назад, но он мне никогда по-настоящему не пригодился, так как я не разработчик. Я часто использую HTML и CSS, поэтому мне они более знакомы.

[David_Ghost]

Я нашел этот код для внесения такого изменения, но не уверен, что это лучший способ его реализовать:

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const newTopicButton = document.querySelector('.header-create-topic');
    const draftsButton = document.querySelector('.topic-drafts-menu-trigger');

    if (newTopicButton && draftsButton && !document.querySelector('.fk-header-buttons')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'fk-header-buttons';

      const parent = newTopicButton.parentNode;
      parent.insertBefore(wrapper, newTopicButton);

      wrapper.appendChild(newTopicButton);
      wrapper.appendChild(draftsButton);
    }
  });
</script>
```