Кнопка заголовка новой темы

:discourse2: Краткое описание New Topic Header Button добавляет удобную кнопку «Создать тему» в заголовок всех страниц
:eyeglasses: Предварительный просмотр Предварительный просмотр в Discourse Theme Creator
:hammer_and_wrench: Репозиторий https://github.com/discourse/discourse-new-topic-button-theme-component
:question: Инструкция по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Возможности

Простой компонент темы для добавления кнопки + Создать тему в заголовок. Кнопка будет отображаться на каждой странице — даже внутри тем.

Скриншоты:

Настольная версия:

Мобильная версия:

Настройки:

Имя Описание
new topic button icon Выберите значок для кнопки. Можно использовать любое бесплатное имя иконки FontAwesome 6, например music или star .
new topic button text Введите текст, который должна отображать кнопка. Если вы хотите использовать только значок, это поле можно оставить пустым.
new topic button title Введите заголовок, который будет отображаться при наведении на кнопку. Если это поле оставить пустым, заголовок будет таким же, как текст кнопки
hide default button Скрыть стандартную кнопку «Создать тему» в списках тем
show to anon Показывать кнопку незарегистрированным посетителям, перенаправляя их на страницу входа при нажатии

:discourse2: Хостинг у нас? Компоненты тем доступны для использования на наших тарифах Standard, Business и Enterprise.

57 лайков

Pretty awesome. Now we’re talking!

FYI, we pushed the button yesterday and it was our 2nd biggest day in registrations for the past 30 days. Not sure if it was coincidence or not, but I have a feeling it’s a good way to onboard new users. Will keep an eye on the metrics

(Realizing now it must have been a coincidence, because the button only appears for users who have already logged in. Nonetheless, activity does seem to be higher)

5 лайков

Hi,

Is it possible to change the color of the button, but not change the color of all buttons in the site?

If so, which is the css code for the button only?

thanks!

1 лайк

Use this code, changing the color obviously.

#new-create-topic {
    background-color: red;
}
3 лайка

Hm, how about showing the new topic button for everyone and make it act like the default Reply-to-topic button, i.e. as the user to login/sign up if they’re not logged in?

In fact, this might be something to consider for the default new topic button too, but I guess this feature would be most effective in this theme component…

4 лайка

Inviting every random visitor to create a new topic.. will end in tears :sob:

Nothing kills a site quicker than a page full of low-value or gibberish topics.

7 лайков

Well, they can’t create that topic unless they sign up. And encouraging people to sign up is obviously a good thing (and is being done by default via the sign-up button and the reply-to-topic button). So I don’t really see why the new topic button should cause any problems.

6 лайков

Is it possible to hide the button on mobile but show the floating button?

To hide the button on mobile add

.header-buttons #new-create-topic {
    display:none;
}

in your mobile > CSS tab

The floating button you are referring is the one used on the Material Design Theme component? If so you need to copy and paste the part of CSS relative to the floating button (New Topic Fab) from material-design-stock-theme/desktop/desktop.scss at main · discourse/material-design-stock-theme · GitHub to your mobile > CSS tab (deleting the lines that start with @include [...]).

However your requests are going off topic, it’s better if you open another topic.

4 лайка

Thanks, sorry for the offtopicing :slight_smile:

1 лайк

Это хорошо, но с моей точки зрения есть два недостатка.
Во-первых, расположение кнопки в верхней панели. У нас там уже есть другие элементы, и это делает панель немного перегруженной.
Во-вторых, тот факт, что она отображается на каждой странице, даже там, где это выглядит не совсем логично (например, на странице моего профиля или в списке групп).
Основной сценарий использования с моей точки зрения — немного упростить пользователям задачу не писать офф-топические ответы при просмотре темы. Место, где я считаю её действительно необходимой и полезной, — это при просмотре темы/обсуждения, и в идеале я хотел бы, чтобы она отображалась как вверху (на одной линии с заголовком темы), так и внизу рядом с основной синей кнопкой «Ответить».
Компромиссным вариантом было бы показывать её в текущем положении, но только на страницах /t/xxx.
Возможно ли это?

Я не хочу отображать это на мобильных устройствах, как это сделать?

Также я хочу показывать это незарегистрированным пользователям; при нажатии на кнопку будет предложено войти в систему

Ох, облом. Не совсем понимаю, что имеется в виду под «неправильным положением» (на моём тестовом сайте всё выглядит нормально), но я думал, что кнопка будет работать, а теперь вижу, что это не так. Похоже, дело не так просто, как я предполагал. :frowning_face:

1 лайк

Создайте новый компонент темы и добавьте это во вкладку Mobile > CSS:

.mobile-view #new-create-topic {
    display:none
}
4 лайка

Отличная идея — ты это сделал?

Кто-нибудь может подсказать, какой CSS нужно использовать, чтобы кнопка «+ Новая тема» выглядела и работала точно так же, как цветная кнопка «Ответить» на моём сайте? (То есть в обычном состоянии, а также при наведении и при нажатии — активное состояние?)

Вот визуальное объяснение того, что я хочу сделать…

8 апреля 2020 года — запись Loom|видео

изменить его класс на btn-primary?
(не уверен, можно ли иметь два элемента btn-primary на странице)
Если вы хотите решение на чистом CSS, то изучите стилизацию синей основной кнопки (во всех её состояниях) и повторите их.

Спасибо за этот компонент, @Joe.
Он работает отлично, за одним небольшим исключением :slight_smile:
На мобильных устройствах у меня по-прежнему отображаются две кнопки: новая и стандартная + New Topic.

Я заставил стандартную кнопку исчезнуть, изменив следующее определение стиля:


Теперь всё работает корректно как на настольных компьютерах, так и на мобильных устройствах, но было бы здорово, если бы ваш компонент сам решал эту проблему. Особенно учитывая, что если по какой-то причине администратор отключит ваш компонент, кнопка + New Topic вообще не будет отображаться.

4 лайка

@Johani Я сделал pull request с упомянутым выше изменением.

Не могли бы вы его посмотреть?

2 лайка

Спасибо за компонент! Я считаю, что всегда иметь возможность создать новую тему в заголовке — это хорошая идея. Но я столкнулся с одной деталью при реализации и хочу узнать, как другие решают эту проблему:

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

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

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

3 лайка