Чат – пузыри WhatsApp

[chapoi]

Чат всё ещё находится в активной разработке, поэтому этот компонент, вероятно, нестабилен и пока находится в бета-версии. Приветствуются отзывы и сообщения об ошибках.

	Краткое описание	Тема в стиле WhatsApp для чата (мобильная версия)
	Предпросмотр	Theme Creator (только мобильный вид)
	Репозиторий	GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile) · GitHub
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

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

Инструкция для предпросмотра

1. Убедитесь, что вы просматриваете это на небольшом экране.
2. Не забудьте добавить ?mobile_view=1 к URL, чтобы получить правильный вид.
3. Войдите в систему, чтобы получить доступ к чату.

Описание

Сообщения в виде пузырьков, применяется только к мобильной версии.

Настройки

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

Вы также можете выбрать цвета пузырьков и фон за паттерном или полностью отключить паттерн.

Если оставить пустыми настройки для светлой или тёмной темы, пузырьки по умолчанию будут использовать secondary и tertiary-low. Если оставить цвет фона пустым, по умолчанию будет использоваться primary-high.

Использование полного изображения в качестве фона также возможно, но убедитесь, что оно оптимизировано по размеру для мобильного просмотра.

Тёмный режим

Вы можете выбрать разные цвета фона и пузырьков для тёмного режима.
Чтобы не менять фоновый паттерн, в тёмном режиме используется смешивание фона.

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

Известные проблемы

• Метки времени для ваших собственных сообщений расположены иначе, чем для сообщений других пользователей
• Не имеет тёмного режима (пока)
• Тёмный режим работает некорректно на некоторых устройствах
• Плохо работает при включённой ветвлении (threading)

[fbpbdmin (deepblue)]

Это очень здорово!

Одно предложение:
возможно ли дать всем возможность менять собственное фоновое изображение?

Кроме того, SVG-изображение схемы по умолчанию отображается по-разному на iPhone и в тёмной теме Android.
На iPhone линии выглядят более яркими, не так, как в примере в посте документации… Не знаю, почему…

[Jagster (Jakke Flemming)]

Можно ли полностью отключить фоновый узор?

@fbpbdmin

возможно ли разрешить всем пользователям менять своё фоновое изображение

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

Пользователь даже не может настроить панель инструментов композера, а это была бы важная функция.

[chapoi]

@fbpbdmin

Возможно ли разрешить всем менять собственное фоновое изображение?

@Jagster

Думаю, это действительно сложно, и если это вообще возможно, потребуется плагин.

Да, к сожалению, это совершенно другой уровень. Если интерес к этой теме в целом когда-нибудь станет достаточно большим, я с радостью расширю возможности, но пока этого не произойдёт.

@Jagster

Могу ли я полностью отключить фоновый узор?

О да, это вполне просто. Могу выпустить обновление для этого.

[fbpbdmin (deepblue)]

@chapoi не могли бы вы проверить тёмную тему на iPhone? Большинство паттернов отображаются там странно.

Например, в стандартной тёмной теме на iPhone ссылки белые, и это выглядит слишком пёстро.

На Android в тёмной теме всё выглядит нормально…

Спасибо.

[chapoi]

Ого, спасибо! Попробую посмотреть на тёмную тему в эти выходные.

[chapoi]

Я добавил настройку для полного отключения паттерна.

Проблемы с тёмной темой на iPhone вызваны ошибкой в Safari, из-за которой свойство background-mode-blend не работает при использовании background-repeat… Это довольно раздражает, и у меня пока нет обходного пути.

Возможно, придётся делать две отдельные загрузки для тёмного и светлого режимов, что совсем не элегантно.

В любом случае, пока рекомендую использовать паттерн без него, если вы на iPhone и используете устройство в тёмном режиме.

[Falco]

@chapoi

@fbpbdmin

Возможно ли разрешить всем пользователям менять собственное фоновое изображение?

@Jagster

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

Да, к сожалению, это совершенно другой уровень. Если интерес к этой теме в целом когда-нибудь станет достаточно большим, я с радостью расширю функционал, но пока этого не произойдёт.

Может быть, добавить опцию для пользователей, чтобы использовать существующее изображение фона «Карточки пользователя» в качестве фона чата?

[Roi]

@chapoi

Довольно раздражает, и у меня пока нет решения.

Да, у меня то же самое:

Но на Android выглядит отлично:

Без узора выглядит скучно. Пока оставил включённым, но пользователи Apple начали жаловаться.

[digitaldominica]

Привет, @chapoi, есть ли способ изменить иконку ответа в чате на настоящую стрелку влево вместо иконки «поделиться», которая отображается как d-icon-share?

[chapoi]

Нет, не конкретно с этим компонентом темы.

Вы можете следовать чему-то вроде этого:

Help replacing an icon

I am trying to replace the bars icon for opening/closing the sidebar following these instructions Replace Discourse's default SVG icons with custom icons in a theme but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) [image] Created a component and uploaded the spritesheet: [image] And used this code (I only want the change on desktop) [image] But I just get no icon: [image] Any ideas? I’m sure I…

чтобы заменить все вхождения иконки. (Я не думаю, что мы используем share-icon в каком-либо другом месте, так что это, возможно, сработает).

Заменить её только там потребовало бы большей сложности, я просто не уверен, какой именно.

[digitaldominica]

Хорошо, спасибо, я попробую. Я использую тему сообщества Kodular, и в темах, на которые я отвечаю, отображается та же иконка. Интересно, является ли это особенностью именно этой темы. Сейчас я спрошу у разработчика.

[digitaldominica]

Спасибо за этот компонент.

Я внес незначительное изменение в файл mobile.scss, строки 55–62:

.chat-messages-scroll {
  background-color: var(--bubble-bg);
  background-image: url(check-empty($background-pattern, $enable_pattern));
  background-blend-mode: var(--bubble-bg-mode);

}
.chat-messages-container {
  padding: 0;

Ранее фон применялся к .chat-messages-container, и при прокрутке фон двигался вместе с сообщениями, оставаясь при этом на заднем плане.

Я заметил, что в мобильном чате было два экземпляра .chat-messages-container, что и вызывало это дублирование фона.

[chapoi]

Спасибо, отлично подметили глупую оплошность. Исправлено.

[digitaldominica]

Привет, похоже, что фон чата больше не отображается в окне чата, я не вижу, чтобы CSS добавлялся к контейнеру чата. В данный момент я использую версию 3.3.0.beta2.

[chapoi]

Привет! Спасибо за отчёт; в чате произошло много изменений, и, вероятно, мне нужно обновить этот компонент.

Постараюсь сделать это скоро!

[eisammy (Sammy)]

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

[eisammy (Sammy)]

@chapoi Просто замечательно… Ошибки, похоже, исчезли. Планируете внедрить это в десктопную версию?

[Earnie_Baird (Earnie)]

Только что протестировал. Это круто, но, как сообщали другие, похоже, что нельзя изменить цвет или узор фона.

При стандартном светлом фоне белые пузыри действительно сливаются с ним.

[eisammy (Sammy)]

Новая ошибка в ссылке Instagram