Я внес несколько простых правок в страницу чата, чтобы улучшить дизайн и сделать интерфейс более плавным. Вот краткий обзор изменений:
- Перемещение индикатора набора текста:
Я переместил индикатор набора текста так, чтобы он теперь отображался над полем ввода, а не под ним. Это выглядит более естественно и позволяет быстрее заметить, когда кто-то печатает. - Увеличение размера шрифта индикатора набора текста:
Я немного увеличил размер шрифта индикатора набора текста. Теперь он более заметен и лучше выделяется, что облегчает его считывание с первого взгляда. - Очистка изображений:
Я убрал название документа/URL, которые раньше окружали изображения, и добавил им небольшой радиус скругления. Это придает изображениям более чистый и отполированный вид, устраняя ненужный визуальный шум. - Добавление динамики индикатору набора текста:
Я добавил небольшую динамическую анимацию к индикатору набора текста. Теперь, когда он появляется, сообщения немного сдвигаются вверх, освобождая место, а когда индикатор исчезает, сообщения плавно возвращаются вниз. Такая плавная анимация делает весь процесс более естественным и интерактивным.
Это лишь небольшие правки в дизайне. На мой взгляд, теперь всё выглядит чище, работает плавнее и в целом более отполированно. Дайте знать, что вы думаете, и не стесняйтесь предлагать любые другие изменения или улучшения!
Вот код:
// индикатор набора текста
/* Добавляем пространство под индикатором ответа */
.chat-replying-indicator-container {
order: -1; /* Перемещает индикатор ответа над полем ввода */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* Заполняет контейнер, сохраняя радиус скругления */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* Скруглённые углы */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* При необходимости измените значение */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* Позиция по умолчанию, когда набор не ведётся */
transition: margin-top 0.3s ease; /* Плавная анимация */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* Позиция при наборе текста */
}
PS: Это особенно актуально для мобильных устройств.
Вот как это выглядит сейчас:
