Новая фотогалерея, помощник и работа с клавиатурой
Рассказываю о пяти нововведениях в редакторе для написания статей, которые появились в этом месяце. 1. Новая фотогалерея Раньше мы использовали слайдер: клик справа перелистывал снимки вперед, клик слева — назад. Такое решение содержало несколько проблем. Во-первых, не всегда понятно, что перед нами именно фотогалерея. От обычной картинки её отличало только наличие небольших точек в нижнем правом углу — «листалок». В какой-то момент мы добавили интерфейсный «костыль» в виде иконки в левом верхнем углу — получилось, честно говоря, так себе. Во-вторых, подписи к снимкам. У каждого снимка в фотогалерее может быть разная длина подписи. Непонятно, что делать с текстом статьи, который находится после галереи: делать так, чтобы он «прыгал» в зависимости от высоты подписи или оставлять «дыру» в верстке. В-третьих, размер фотографий. Непонятно, что делать с картинками разного размера: подстраивать размер всей фотогалереи под самый большой снимок и оставлять пустоту по краям у остальных или делать так, чтобы всё статья «прыгала» в зависимости от высоты картинки. Накопившиеся проблемы привели к тому, что мы решили вовсе отказаться от формата слайдеров в пользу плиточной структуры. Как здесь: В плиточной структуре предусмотрено несколько вариаций — две фотографии рядом, одна большая с двумя вертикальными маленькими и так далее. Снимки, которые не вместились, скрываются под цифрой с плюсом. По клику можно посмотреть полноценную фотографию с подписью. 2. Помощник Для новых участников сообщества в правом нижнем углу редактора появился помощник. Он показывает короткие советы о том, что и как можно писать на DTF, какие шорткаты можно использовать в редакторе. В будущем мы будем использовать его для анонса важных обновлений в редакторе — чтоб не пропустить что-то интересное. 3. Проблема больших фотографий Раньше было тяжело (в буквальном смысле) писать статьи с большими фотографиями — редактор отображал исходники фотографий и страница получалось очень тяжелой. Иногда даже браузер мог зависнуть. Теперь после загрузки снимка в редакторе отображается оптимизированная версия снимка. 4. Работа с клавиатурой Работа с клавиатурой — одно из самых приоритетных направлений в развитии редактора. Сейчас работа в нём перешла в область обработки микрокейсов. Например: написал имя автора цитаты, нажал на Enter — но вместо того, чтобы перейти в следующее поле цитаты, я оказался в новом текстовом блоке под цитатой. Из-за таких мелочей работа с редактором не кажется бесшовной и стабильной. В этом обновлении редактора мы проработали целый набор таких микрокейсов. Вот несколько примеров: Загружаю фотографию в статью, нажимаю Enter на клавиатуре, фотография появилась в редакторе. Но чтобы продолжить написание статьи нужно тянуться за мышкой и кликать в текстовое поле под картинкой. Исправили: теперь курсор самостоятельно встаёт в текстовое поле сразу под фотографией. Пишем подпись к картинке. Жмем Enter и в подписи появляется еще один параграф в подписи. Исправили: теперь по Enter выходим из подписи в пустой текстовый блок под фотографией. Заходим в редактирование статьи и ставим курсор в заголовок. Жмем Enter, а новый текстовый блок создается в конце статьи. Исправили: курсор встаёт в самое начало статьи. Создаем список, заполняем его. Жмем два раза на Enter — бац, и теперь мы вышли из списка в обычное текстовое поле. Можем продолжать писать текст без мышки. По Tab во всех модулях редактора происходит переход в следующее поле. Таких небольших кейсов еще много. Продолжаем их отлавливать и исправлять — спасибо всем за вашу помощь в этом! 5. Затемнение страницы при клике на мини-редактор Чтоб ничего не отвлекало. #редактор #обновления
