Комментарии в приложении


Функциональность

Пользователь может оставлять лайки и комментарии в разделах мобильного приложения:

При нажатии на иконку количества комментариев открывается экран списка комментариев

image-20240703-063132.png

Список комментариев

Экран состоит:

  • Панель навигации

  • Список комментариев (если комментариев нет, отображается заглушка).

    • Комментарий состоит из:

      • Аватар автора комментария (или заглушка)

      • Имя Фамилия автора комментария — по нажатию происходит переход к разделу Личный кабинет пользователя

      • Дата публикации комментария — в формате дат на портале

      • Контент комментария — может содержать текст, упоминания пользователей, прикреплённые изображения и файлы

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

          • Превью для файлов форматов .pdf, .doc, .docx, .xls, .xlsx:

            • Состав первью:

              • Название файла — обрезается по ширине карточки

              • Формат

              • Вес

            • По нажатию на превью файла — он открывается по ссылке в браузере устройства. Исключение: файлы формата .pdf — по нажатию на превью такого файла открывается инструмент просмотра PDF-файлов. Подробнее в Инструмент просмотра PDF-файлов в МП

          • Превью для форматов .png, .jpg, .jpeg — выводится миниатюра загружаемого изображения

            • По нажатию на превью изображения — оно открывается для просмотра в полноэкранном режиме

      • Кнопка лайка — в состоянии непоставленного / поставленного лайка пользователем. По нажатию происходит смена состояния. Если у комментария есть лайки, то рядом с кнопкой лайков отображается их количество

      • Кнопка Ответить — механика описана в таблице ниже в блоке Ответ на комментарий

  • Блок ввода комментария — состояние по умолчанию описано в таблице ниже.

    • Особенности:

      • Закреплён внизу экрана и статичен при скролле.

      • Выводится поверх списка комментариев

      • Когда появляется блок редактирования или блок ответа, они располагаются над блоком ввода (выезжают)

Особенности:

  • Сортировка: по дате добавления комментария — от самой поздней даты к более ранним

  • Ответы на комментарии располагаются в общем одноуровневом списке комментариев, без вложенности

  • По нажатию на комментарий снизу появляется меню действий над комментарием (при открытом меню происходит затемнение выбранного комментария). Состав приведен в таблице.

Блок ввода комментария

Состояние

Состав

Вид

Состояние

Состав

Вид

По умолчанию

  • Поле ввода — по умолчанию фокус находится не в поле. По нажатию на поле фокус становится в поле

    • Плейсхолдер: Сообщение


  • Кнопка прикрепления файла — доступна для нажатия


  • Кнопка отправки комментария — неактивна по умолчанию. Становится доступной для нажатия, если в поле введён хотя бы 1 символ или прикреплён хотя бы 1 файл / изображение. По нажатию происходит отправка комментария и он выводится в списке

 

 

 

 

Ввод комментария

  • Поле ввода — если фокус в поле ввода, то открывается клавиатура, сдвигая выше блок ввода комментария и список комментариев (если есть).

    • Многострочное поле

    • Ограничение по символам: 3000 символов.

    • За 100 символов до конца лимита над полем появляется счётчик символов.

    • При превышении лимита символов — кнопка отправки комментария становится неактивной до тех пор, пока количество символов не достигнет лимита

    • В поле доступно упоминание пользователя портала.


  • Кнопка прикрепления файла — по нажатию доступен системный выбор файла (стандартное поведение в зависимости от ОС и устройства).

  • Особенности:

    • Количество прикрепляемых элементов за один раз: 1

    • Общее количество элементов: не больше 5 (и файлов и изображений суммарно)

      • При загрузке максимального количества файлов кнопка прикрепления становится неактивной. По нажатию выводится подсказка: Не более 5 файлов

    • Форматы: .png, .jpg, .jpeg, .pdf, .doc, .docx, .xls, .xlsx

      • Файлы недопустимых форматов недоступны для добавления и отображаются неактивными при системного выбора файлов

      • При загрузке недопустимого формата файла выводится ошибка: Недопустимое расширение файла, разрешено загружать: png, jpg, jpeg, pdf, doc, docx, xls, xlsx

    • Размер одного файла: не больше 20 Мб

      • При попытке загрузки файла большего размера выводится ошибка, которая исчезает через 30 секунд: Максимальный размер 20 Мб

Прикрепляемые файлы и изображения выводятся над текстовым контентом комментария в виде превью. При прикреплении максимального количества файлов (5 штук) в блоке превью появляется горизонтальный скролл.

Превью для файлов форматов .pdf, .doc, .docx, .xls, .xlsx:

  • Состав первью:

    • Название файла — обрезается по ширине карточки

    • Формат

    • Вес

    • Иконка удаления — по нажатию прикрепляемый файл удаляется

  • По нажатию на превью файла — он открывается по ссылке в браузере устройства

Превью для форматов .png, .jpg, .jpeg состоит из:

  • Состав превью:

    • Миниатюра загружаемого изображения

    • Иконка удаления — по нажатию прикрепляемый файл удаляется

  • По нажатию на превью изображения — оно открывается для просмотра в полноэкранном режиме


  • Кнопка отправки комментария — неактивна по умолчанию. Становится доступной для нажатия, если в поле введён хотя бы 1 символ или прикреплён хотя бы 1 файл / изображение. По нажатию происходит отправка комментария и он выводится в списке

 

 

 

 

 

Редактирование комментария

(долгое нажатие на свой комментарий)

  • Блок редактирования:

    • Иконка редактирования

    • Заголовок: Редактирование

    • Текстовый контент комментария — выводится в одну строку и обрезается многоточием по ширине блока. Некликабельный.

      • Упоминание пользователя при редактировании комментария отображается как упоминание в опубликованном комментарии

    • Кнопка крестика — по нажатию отменяет редактирование

  • Блок ввода комментария:

    • Предзаполнен текстом редактируемого комментария:

      • Текст может располагаться на нескольких строках

      • Текст сразу доступен для редактирования — фокус сразу в поле ввода в конце комментария

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

    • Вместо кнопки отправки сообщения содержит кнопку подтверждения редактирования (галочку):

      • При нажатии происходит применение правок, на экране отображается обновленный список комментариев

 

 

 

Ответ на комментарий

  • Блок ответа:

    • Иконка ответа

    • Заголовок: автор комментария

    • Тело комментария:

      • Упоминание пользователя при ответе на комментарий отображается как текст

      • Если комментарий содержит хотя бы один файл, то выводится счётчик в формате: X файлов, где X количество прикреплённых файлов

        • Счётчик выводится вне зависимости от наличия текста в комментарии

      • Если комментарий содержит стикер, то выводится подзаголовок Стикер

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

    • Крестик — отменяет ответ на комментарий, при этом блок ввода комментариев остается в состоянии Ввод текста и в нем остаются введенные в нем до закрытия ответа символы

  • Блок ввода комментария: состояние Ввод текста. По умолчанию комментарий-ответ начинается с обращения к пользователю (на чей комментарий выполняется ответ) в формате: {Имя пользователя},

Создание комментария с упоминанием пользователя

В комментариях есть возможность добавить упоминание имени и фамилии пользователя. Пользователь, упомянутый в комментарии, получает уведомление в "колокольчик" (в веб-версии).

Механика

Описание

Механика

Описание

Поиск пользователя для упоминания

Поиск осуществляется по имени и фамилии юзера. 

  • Чтобы добавить упоминание, необходимо ввести символ "@". Перед "@" не должно быть буквенных и числовых символов.

  • Поиск срабатывает после ввода второго символа после "@".

  • Разрешенные символы для поиска: буквы, цифры, дефисы, апострофы

  • Поисковой строкой считается весь текст, идущий после символа "@" до курсора, если нет пробелов и знаков пунктуации. Пример:

  • Поиск осуществляется по одному слову, а также по нескольким словам, разделенным символом "_". Нижних подчеркиваний может быть не более двух в одном поисковом запросе, в противном случае поиск прекращается. Таким образом, поиск может осуществляться по имени, фамилии и отчеству, например "Алёшин_Алексей_Юрьевич".

  • Поиск по ФИО: пользователя можно искать как по имени, так и по фамилии, вводя символы как слитно, так и через нижнее подчеркивание

Список пользователей

  • После ввода второго символа появляется список с пользователями, подходящими под критерии. Список динамически обновляется при уточнении запроса.

  • Список содержит: аватар пользователя, те, id.

  • В видимой области списка отображается не более 5 юзеров. Список сокращается по мере уточнения поискового запроса.

  • Пользователи выводятся по алфавиту.

  • Если совпадений нет, список скрывается.

  • Скрытые пользователи не отображаются в выпадающих списках.

  • Удаленные и неактивные пользователи не отображаются в выпадающих списках. 

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

Трансформация имени пользователя (до публикации комментария)

  • Если пользователь не выбирает человека из выпадающего списка и продолжает вводить текст комментария, то в поле ввода упоминание отображается в формате "@ФИО". 

  • Если пользователь выбирает человека из выпадающего списка, то упоминание трансформируется в текст формата "@idN (ФИО)", где "ФИО" - изменяемый параметр для ввода альтернативного текста (этот текст будет содержать упоминание пользователя в опубликованном комментарии). 

  • Для счётчика символов учитывается каждый введённый символ (включая собаку, скобки и т.д.).

Публикация комментария с упоминанием

  • Введенные вручную ФИО без выбора пользователя из списка не трансформируются в ссылку и выводятся, как обычный текст (комментарий публикуется без упоминания)

  • Если ФИО были выбраны из списка, то при публикации комментария такое упоминание считается успешно опубликованным.

Действия над комментариями

Меню открывается при долгом нажатии на комментарий. При повторном нажатии меню закрывается. Также закрывается свайпом вниз.

Элемент меню

Состояние

Когда отображается действие

Что происходит при нажатии

Что происходит при завершении действия

Элемент меню

Состояние

Когда отображается действие

Что происходит при нажатии

Что происходит при завершении действия

Ответить

 

Всегда

Блок ввода комментария принимает вид “Ответ на комментарий”

Отображается обновленный список комментариев

Копировать

 

  • Если комментарий содержит стикер, не отображается

  • Если комментарий содержит файл:

    • Только файл / изображение — пункт меню не отображается

    • Кроме файла есть текст или смайлы — отображается

  • Если комментарий содержит текст и/или смайлы, отображается

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

-

Пожаловаться

Активная кнопка “Пожаловаться”

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

  • Отображается поп-ап с выбором причины жалобы, кнопками “Отменить” и “Отправить” (некликабельна до выбора причины)

  • После отправки жалобы появляется подтверждающий поп-ап "Жалоба отправлена. Спасибо за бдительность!", содержит кнопку “Отлично”, которая закрывает поп-ап

-

Неактивная кнопка “Жалоба отправлена”

Если жалоба на комментарий уже была отправлена текущим пользователем

Некликабельна

-

Редактировать

 

  • Если комментарий содержит стикер, не отображается

  • Если комментарий содержит файл / изображение, то пункт контекстного меню отображается

  • Если комментарий содержит текст и/или смайлы, отображается:

    • Только для своего комментария в течение 24 часов после публикации

      • Если у пользователя есть разрешение на администрирование комментариев, то выводится всегда

  • Блок ввода комментария принимает вид “Редактирование комментария”

Отображается обновленный список комментариев

Удалить

 

Отображается только для своего комментария в течение 24 часов после публикации.

  • Если у пользователя есть разрешение на администрирование комментариев, то выводится всегда.

  • Удаление происходит сразу (без попапа подтверждения). Удаление мягкое: появляется снекбар с возможностью отменить действие

  • После окончательного удаления комментарий пропадает из списка

Отображается обновленный список комментариев