Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Дополнения сервиса » Реакции в сообщениях


Реакции в сообщениях

Сообщений 1 страница 20 из 20

1

https://forumupload.ru/uploads/0003/ac/ce/7316/913962.png

На всех форумах Квадро теперь есть возможность ставить под сообщениями реакции. До этого модуль можно было подключить к форуму самостоятельно в рамках тестовой версии — и хотим поблагодарить всех, кто помог выявить баги и недоработки, высказывал пожелания. :flag: К объективным мы постарались прислушаться.

По умолчанию реакции подгружаются к .post-body последним контейнером и работают во всех разделах форума со стандартными пресетами иконок emoji, в стандартной цветовой гамме. Теперь администраторы могут более гибко их настраивать через ReactionsPlugin.setConfig, прописанный в хтмл-форме. Они работают независимо от репутации и подразумевались дополнением к ней для тех, кому нравится такой вариант оценок сообщений.
Один пользователь может ставить по несколько оценок под одним сообщением. Гости видят реакции под постами, но сами ставить их не могут.
Цветовая гамма окошка и кнопки реакций меняются через CSS. ПОСТ-ПОМОЩЬ СО СТИЛЯМИ И ПЕРЕКРАШИВАНИЕМ.

Список настроек | Примеры готовых конфигов


Индивидуальные настройки


Расположение реакций
Стандартные коллекции emoji
Свой набор картинок
Ограничение количества оценок на один пост
Включение/отключение реакций в отдельных категориях, форумах или темах


Расположение реакций

Для того, чтобы его изменить, в ReactionsPlugin.setConfig нужно вписать следующее:

elemSelector: '.post-rating',

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

Важно! Реакции в теле сообщения являются такой же его частью, как и другие объекты (подпись, репутация, параграфы). Они подхватывают форумные стили и позиционирование. Место в .post-body, по нашим наблюдениям, самое технически нейтральное, и требует минимальных правок со стороны администратора. Если вставлять их куда-то в гущу объектов поста (например, в .post-content или .post-rating), то нужно будет подгонять CSS модуля индивидуально под дизайн форума.
Мы честно думали над этой проблемой и рассматривали разные варианты для её решения, но пришли к тому, что сколько дизайнов — столько будет и вариантов, к сожалению. Учесть все возможные варианты авторских дизайнов нереально чисто технически. Еще больше ограничивать и усложнять текущую возможность прописи своих стилей тоже неправильно.


Стандартные коллекции emoji

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

includeCategories: ['people', 'foods', 'nature']

В примере синим обозначены коллекции, красным отмечены обязательные запятые в массиве. Между названиями запятые нужны, после последнего названия перед скобкой — нет. Если в конфигурации указывать includeCategories, то отображаться в выборке будут только те наборы эмодзи, которые вы перечислили.

Названия коллекций в массиве: 'people', 'nature', 'foods', 'activity', 'places', 'objects', 'symbols', 'flags'.


Свой набор картинок в реакциях

https://forumupload.ru/uploads/0003/ac/ce/7316/877227.png

Добавляется как массив. Пример с нашего форума:

Пример

customEmojis: [
    {
      id: '_discoblob',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/920763.gif',
    },
    {
      id: '_peace',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/237553.png',
      category: 'Discord',
    },
    {
      id: '_lul',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/166019.png',
      category: 'Discord',
    },
    {
      id: '_omg',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/819774.png',
      category: 'Discord',
    },
    {
      id: '_geek',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/790047.png',
      category: 'Discord',
    },
    {
      id: '_love',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/241049.png',
      category: 'Discord',
    },
    {
      id: '_emm',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/394670.gif',
      category: 'Classic Smiles',
    },
    {
      id: '_fcp',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/41162.gif',
      category: 'Classic Smiles',
    },
    {
      id: '_cool',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/82005.gif',
      category: 'Classic Smiles',
    },
    {
      id: '_weee',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/99411.gif',
      category: 'Classic Smiles',
    },
    {
      id: '_rofl',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/58792.gif',
      category: 'Classic Smiles',
    },
  ],

Айди (ID): обязательно для каждого изображения. Допускается только латиница без пробелов, перед названием картинки обязательно должна стоять нижняя черта (_).
Ссылка на изображение (URL): подгонять картинки пиксель в пиксель именно под размер эмоджика не нужно, он ужмется до нужного размера сам. Это нужно только в случае, если вы хотите, чтобы они в превью выглядели без искажений. Нужны квадратные картинки, иначе они будут сплющены. Ограничений на анимацию или статику нет. В нашем примере на форуме я специально добавил в наборы разные смайлики, не все одинаково ровные и не все в размер.
Категории (category): необязательна. Можно добавлять картинки в разные категории, а можно вообще её не указывать — тогда все изображения без категории будут отображаться под одним заголовком "кастомные".


Ограничение количества оценок на один пост

limitReactionsNumber: 0,

Там, где отмечено синим — ставим свое допустимое количество оценок, которые может воткнуть пользователь под сообщение.
0 — значение по умолчанию, т.е. без ограничений.
Если выставлять ограничение уже после того, как пользователи где-то их превысили — всё останется как было, но если пользователь, превысивший лимит под одним постом, захочет поставить там же еще что-нибудь, то ему придется сначала снять старые оценки до количества нового лимита.


Включение/отключение реакций в отдельных категориях, форумах или темах

По умолчанию реакции работают во всех разделах. Но можно отдельно отключить их в разделах, где они не требуются.

Пример синтаксиса:

excludeForumIds: [3, 11, 9, 8],

Список доступных параметров

Общее пояснение:
include* - показывать только здесь.
exclude* - показывать везде, кроме.

То есть, например, если указать includeForumIds: [1] - то реакции будут работать только в темах раздела с ID 1. В других разделах их не будет. Если указать excludeForumIds: [1] - то реакции будут работать во всех разделах, кроме раздела с ID 1.

Синтаксис везде такой же, как и в первом примере: excludeForumIds: [3, 11, 9, 8], - последнее число в квадратных скобках без запятой.

Включить/отключить реакции в категориях

includeForumCategoryIds: [1, 2],
excludeForumCategoryIds: [1, 2],


Включить/отключить реакции в форумах (разделах)

includeForumIds: [1, 2],
excludeForumIds: [1, 2],


Включить/отключить реакции в темах

includeTopicIds: [1, 2],
excludeTopicIds: [1, 2],

Нужный параметр указываем в ReactionsPlugin.setConfig. На месте выделенных синим чисел ставим ID категорий/разделов/тем, в зависимости от выбранного фильтра.
Одновременно в конфиге можно указать только один фильтр. Например, если указать одновременно форумы и темы, вместе они не будут работать, фильтр по темам перекроет фильтр по форумам как более приоритетный.
Одновременно include/exclude одного типа (форум и форум, тема и тема, например) тоже нельзя использовать, ReactionsPlugin.setConfig на такое выдаст ошибку в консоли.

Можно сделать конструкцию типа "показывать реакции в этой категории везде, кроме одного форума" — для этого уже нужно писать свой дополнительный фильтр под конкретную ситуацию. Возможность сразу сочетать фильтры мы рассматривали, но пока решили оставить их на стороне дополнительных уточнений непосредственно в пользовательском конфиге.

ID категорий и форумов можно узнать в админ-панели, в коде страницы, форумы — еще и по ссылкам.
ID тем можно узнать из ссылок и из кода страницы.



Примеры готовых конфигов


Для тех, кому нужны шаблоны (данные меняйте на свои):

Без дополнительных смайлов
Код:
<script>
ReactionsPlugin.setConfig({
  includeCategories: ['people', 'foods'],
  elemSelector: '.post-rating',
  excludeForumIds: [3, 8],
});
</script>
С дополнительными смайлами
Код:
<script>
ReactionsPlugin.setConfig({
  elemSelector: '.post-content',
   customEmojis: [
    {
      id: '_discoblob',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/920763.gif',
    },
    {
      id: '_peace',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/237553.png',
      category: 'Discord',
    },
    {
      id: '_lul',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/166019.png',
      category: 'Discord',
    },
    {
      id: '_omg',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/819774.png',
      category: 'Discord',
    },
    {
      id: '_geek',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/790047.png',
      category: 'Discord',
    },
    {
      id: '_love',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/241049.png',
      category: 'Discord',
    },
    {
      id: '_emm',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/394670.gif',
      category: 'Classic Smiles',
    },
    {
      id: '_fcp',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/41162.gif',
      category: 'Classic Smiles',
    },
    {
      id: '_cool',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/82005.gif',
      category: 'Classic Smiles',
    },
    {
      id: '_weee',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/99411.gif',
      category: 'Classic Smiles',
    },
    {
      id: '_rofl',
      url: 'https://forumupload.ru/uploads/0003/ac/ce/7316/58792.gif',
      category: 'Classic Smiles',
    },
  ],
  excludeForumIds: [3, 8],
});
</script>

Если вам что-то из настроек не нужно, то строчку с ненужными параметрами просто убираем. Следим за запятыми и скобками, чтобы всё работало.

Отключение реакций

Код:
<script>
ReactionsPlugin.setConfig({
  disable: true
});
</script>

Хорошего дня! :flag:

Теги: реакции

+2

2

Вспомнил еще один момент, про который вчера уже запамятовал.
Были жалобы на странную замыленность emoji у отдельных пользователей. Я сначала говорил, что это мы переоптимизировали картинки случайно, но на деле всё оказалось немного не так, - как раз картинки работавший над ними человек и не трогал. В процессе попыток понять, в чем вообще дело, мы пришли к тому, что это, судя по всему, зависит от экрана устройства. В том числе на них, видимо, влияет, включен или отключен в системе так называемый ClearType.  %-) Не уверен, что это будет как-то фикситься.

+1

3

Это все конечно очень здорово, а где кнопка отключить эту штуку на всем форуме? Из за неё неудобно теперь обычные плюсы ставить и она мешает

Отредактировано Asmi (04.11.2022 09:04:10)

+4

4

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

Потому что у нас на форуме с коричневым дизайном она выглядит, как белое пятно — имхо, не очень)

+1

5

не плюсую, а умножаю комментарий asmi: можно как-то убрать эту функцию вообще, а не в отдельных подфорумах? если честно, то не вижу в ней смысла; обычных плюсов вполне достаточно, по крайней мере на нашем форуме такая штука не нужна

+1

6

Поддержу комментаторов. Дайте возможность отключать эту функцию. Она абсолютна бесполезна для ролевых форумов ((

+1

7

Плюс, вопрос, есть ли возможность добавить реализацию не "как скрыть из некоторых тем", а как, наоборот, "открыть её только в некоторых темах"? Во флудилке заходит на ура)

0

8

Обновил первое сообщение, дополнили скриптом для отключения реакций целиком.

+1

9

Duka написал(а):

Обновил первое сообщение, дополнили скриптом для отключения реакций целиком.

спасибо, а куда его? в хтмл верх/низ?

0

10

March Fox написал(а):

спасибо, а куда его? в хтмл верх/низ?

я поставила в низ, всё работает

+1

11

А есть ограничение на количество реакций на одно сообщение от одного пользователя? Или как-то поставить его.

+1

12

March Fox написал(а):

спасибо, а куда его? в хтмл верх/низ?

полагаю, работает и в верху, и внизу, как и сам скрипт, когда его только выкатили

0

13

Есть ли возможность подкрутить размер самого плюса на кнопке? И как это сделать?

+1

14

Harikatri написал(а):

А есть ограничение на количество реакций на одно сообщение от одного пользователя? Или как-то поставить его.

Пока нет. Но запрос на добавление такой возможности решили рассмотреть.

kheel написал(а):

Есть ли возможность подкрутить размер самого плюса на кнопке? И как это сделать?

Есть, через svg path. Ближе к вечеру постараюсь расписать, как эту кнопку в стилях редактировать. Пока что не у компьютера.

+2

15

первый балбес на деревне написал(а):

Плюс, вопрос, есть ли возможность добавить реализацию не "как скрыть из некоторых тем", а как, наоборот, "открыть её только в некоторых темах"? Во флудилке заходит на ура)

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

+1

16

первый балбес на деревне написал(а):

интересует, каким образом я могу поменять цвет кнопки самостоятельно и все к ней прилегающие цвета)
Потому что у нас на форуме с коричневым дизайном она выглядит, как белое пятно — имхо, не очень)

kheel написал(а):

Есть ли возможность подкрутить размер самого плюса на кнопке? И как это сделать?


Пост помощи для тех, кто слабо знает CSS


Выписываю основной список селекторов, чтобы не-кодеры могли хоть цвета заменить на свои без помощи дизайнеров.  :flag:
Подставляем свои значения и копируем коды в "свой стиль" (в любое окно).


Перекрашиваем кнопки и редактируем плюсик

0.

Цвет цифр счетчика оценок.

.topic .reaction-counter__count {
    color: #FFF;
}

Цвет счетчика оценок при наведении мыши.

.topic .reaction-counter__count:hover {
    color: #000;
}

Синим - цвет цифр.

1.

Базовые цвета кнопок.

.topic .reaction-chip {
    background-color: #FFF;
    border: 1px solid #ccc;
}

Базовые цвета при наведении мыши.

.topic .reaction-chip:not(.reaction-chip--disabled):hover {
    background-color: #e5e5e5;
}

.topic .reaction-chip:hover {
    border: 1px solid #777;
}

2.

Этим цветом пользователь видит оценки, которые сам поставил.

.topic .reaction-chip.reaction-chip--clicked {
    background-color: #85c3f2;
    border: 1px solid #2a91f5;
}

"Свои" выставленные оценки при наведении мыши:

.topic .reaction-chip.reaction-chip--clicked:not(.reaction-chip--disabled):hover {
    background-color: #b6e3ff;
    border: 1px solid #2a91f5;
}

Синим — цвет фона кружка и овалов с эмодзи, вставляем на это место нужный цветовой код.
Если фон не нужен, то пишем на этом месте none или transparent.
Если нужен прозрачный фон, то тут уже посложнее, поскольку доступнее всего сделать через консоль.

Зелёным — цвет рамки кнопки и овалов, в которых появляются поставленные эмодзи.

Красным — толщина рамки. Если хотим рамку убрать, то пишем на этом месте 0.

3. Редактируем крестик.

Цвет крестика.

#pun-viewtopic .reaction-picker button svg path {
    fill: #ccc;
}

Цвет крестика при наведении.

#pun-viewtopic .reaction-picker button:hover svg path {
    fill: #777;
}

Синим — цвет крестика.

Если нужно изменить размер крестика.

.reaction-picker .reaction-picker-button svg {
    width: 14px!important;
    height: 14px!important;
}

Где выделенное красным — подставляем нужное вам число (одинаковое в обе строки!).


Как перекрасить выпадающую табличку с эмодзи.

Фон всей таблички.

.topic .reactions-root .emoji-mart {
    background: #eee;
    border: 1px solid #d9d9d9;
}

Фон верхней таблички с кнопками для переключателей коллекций (если требуется)

.topic .reactions-root .emoji-mart-bar:first-child {
    background-color: #FFF;
}

Синим — цвет фона, вставляем на это место нужный цветовой код.
Если фон не нужен, то пишем на этом месте none или transparent.
Если нужен прозрачный фон, то тут уже посложнее, поскольку доступнее всего сделать через консоль.

Зелёным — цвет рамки.

Красным — толщина рамки. Если хотим рамку убрать, то пишем на этом месте 0.

Цвет кнопок-иконок в табличке.

#pun .emoji-mart-anchor {
    color: #000!important;
}

Цвет кнопок-иконок в табличке при наведении мыши.

#pun .emoji-mart-anchor:hover {
    color: #FFF!important;
}

Цвет выбранной кнопки-иконки в табличке (второй код - полоска).

#pun .emoji-mart-anchor-selected {
    color: #000!important;
}

#pun .emoji-mart-anchor-bar {
   background-color:#000!important;
}

Цвет выбранной кнопки-иконки в табличке при наведении мыши.

#pun .emoji-mart-anchor-selected:hover {
    color: #FFF!important;
}

Синим — цвет иконок (и полоски).


Поля в табличке.

Форма поиска.

#pun .punbb .reactions-root .emoji-mart-search input {
  color: #000;
  background-color: #FFF;
}

Иконка с лупой.

.topic .reactions-root .emoji-mart-search-icon {
   fill:#000;
}

Нижний отступ поиска.

.topic .reactions-root .emoji-mart-search {
   margin-bottom:6px;
}

Заголовки наборов эмодзи.

.topic .reactions-root .emoji-mart-category-label span {
    color:#000;
    background: #fff;
}

Синим — цвет текста.
Красным — цвет фона.
Зелёным — цвет иконки поиска.
Пурпурным — величина отступа.


Передвинуть реакции влево-вправо поста (может не сработать в таком виде либо потребовать дополнительных индивидуальных правок)

.topic .reactions-container {
    justify-content: flex-end;
}

flex-start - расположение слева
flex-end - расположение справа

Ставим на место выделенного синим статуса нужное.

.topic .reaction-picker-panel {
    right:0;
}

Если использовать этот код, панелька будет появляться "влево" от кнопки. По умолчанию она появляется "вправо".

Я выписал тут самое основное. Если кому-то нужно будет убирать-добавлять закругление углов — допишу и это.


В отмеченных местах подставляем свои значения.  :flag: Если есть вопросы или что-то не срабатывает (или срабатывает не так) — смело задаем. Желательно сразу приложив ссылку на свой форум.

+3

17

https://forumupload.ru/uploads/0003/ac/ce/8848/t293526.jpg
Только пять последних имен отображает(и во втором варианте должно показывать "еще 2 пользователя"). Это самое оптимальное число для вывода?
У нас не самый активный форум (~30 человек), с посещаемостью 50 и более наверно ощутимое малое отображение будет, хотя никто по этому поводу не отозвался пока, как вижу)

0

18

Harikatri написал(а):

Только пять последних имен отображает(и во втором варианте должно показывать "еще 2 пользователя").

Понял, ошибку отдам программисту.

Harikatri написал(а):

Это самое оптимальное число для вывода?
У нас не самый активный форум (~30 человек), с посещаемостью 50 и более наверно ощутимое малое отображение будет, хотя никто по этому поводу не отозвался пока, как вижу)

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

+1

19

Arakhen написал(а):

Понял, ошибку отдам программисту.

Потестила, если нужно такое уточнение. Там не сколько в числе ошибка сколько в том, что при добавлении реакции число не увеличивается без обновления страницы. Если убирать реакцию, то изменяет корректно в реальном времени.

Arakhen написал(а):

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

Да, понимаю, что может нагружать это всё страницу, так что на увеличении не настаиваю. Тут скорее легкий диссонанс от того, что вместо "еще 1 пользователь" вполне бы и влезло имя этого пользователя)

0

20


Обещанные правки — расширили настройки для конфига реакций.


Ограничение количества оценок на пост

limitReactionsNumber: 0,

Там, где отмечено синим — ставим свое допустимое количество оценок, которые может воткнуть пользователь под сообщение.
0 — значение по умолчанию, т.е. без ограничений.


Arakhen написал(а):

Отключение реакций в отдельных форумах

Были расширены фильтры по выводу реакций. Мы немного подумали над запросом и решили охватить все основные возможные варианты. Теперь реакции можно включать/отключать по категориям, разделам и темам, где это требуется.

Список добавленных параметров

Общее пояснение:
include* - показывать только здесь.
exclude* - показывать везде, кроме.

То есть, например, если указать includeForumIds: [1] - то реакции будут работать только в темах раздела с ID 1. В других разделах их не будет. Если указать excludeForumIds: [1] - то реакции будут работать во всех разделах, кроме раздела с ID 1.

Синтаксис везде такой же, как и в первом примере: excludeForumIds: [3, 11, 9, 8], - последнее число в квадратных скобках без запятой.

Включить/отключить реакции в категориях

includeForumCategoryIds: [1, 2],
excludeForumCategoryIds: [1, 2],


Включить/отключить реакции в форумах (разделах)

includeForumIds: [1, 2],
excludeForumIds: [1, 2],


Включить/отключить реакции в темах

includeTopicIds: [1, 2],
excludeTopicIds: [1, 2],

Нужный параметр указываем в ReactionsPlugin.setConfig. На месте выделенных синим чисел ставим ID категорий/разделов/тем, в зависимости от выбранного фильтра.
Одновременно в конфиге можно указать только один фильтр. Например, если указать одновременно форумы и темы, вместе они не будут работать, фильтр по темам перекроет фильтр по форумам как более приоритетный.
Одновременно include/exclude одного типа (форум и форум, тема и тема, например) тоже нельзя использовать, ReactionsPlugin.setConfig на такое выдаст ошибку в консоли.

Можно сделать конструкцию типа "показывать реакции в этой категории везде, кроме одного форума" — для этого уже нужно писать свой дополнительный фильтр под конкретную ситуацию. Возможность сразу сочетать фильтры мы рассматривали, но пока решили оставить их на стороне дополнительных уточнений непосредственно в пользовательском конфиге.

ID категорий и форумов можно узнать в админ-панели, в коде страницы, форумы — еще и по ссылкам.
ID тем можно узнать из ссылок и из кода страницы.

Вот. Надеемся, облегчили людям жизнь. :flag:

+2


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Дополнения сервиса » Реакции в сообщениях


Рейтинг форумов | Создать форум бесплатно