Добавляет кнопку «загрузить картинку»

[nlopin]

Что

Кнопка загрузки картинок для тех, кто не может перетаскивать картинки на форму 🥳

Demo

Как

1. дописал дополнительный обработчик в код загрузки картинок (frontend/static/js/inline-attachment.js)
2. к каждому редактору создаётся контрол выбора файла (<input type="file" />)
3. изменена верстка всех ответов. Кнопка «отправить» теперь визуально часть поля, в котором пишется ответ

До и после

Поле	До	После
Комментарий
Ответ
Ответ (узкий экран)
Баттл
Интро

[trin4ik]

Кайф! Я бы сделал следующее:

• иконка скрепки ужасная, может всё же камеру? смотрится не плохо

• сделать display: none для инпута и обернуть его в label, которому сделать cursor: pointer т.е. типа того

<div class="reply-form-footer">
    <label class="reply-form-attach-image">
        <i class="fa fa-paperclip"></i>
        <input type="file" alt="Добавить картинку" />
    </label>
</div>

.reply-form-attach-image {
  ...
  cursor: pointer;
}
.reply-form-attach-image input[type=file] {
  ...
  display: none;
}

• "подписаться на комментарии" длинновато для мобилки, на правах "мысли вслух", может определим какю-то глобальную переменную во вью, чтобы где надо проверять на isMobile и подобные "подписаться на комментарии" менять на "подписаться"?

[TiraelSedai]

на мой взгляд камера ещё хуже скрепки

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

у гитхаба это тоже синонимичные кнопки

[nlopin]

• сделать display: none для инпута и обернуть его в label, которому сделать cursor: pointer т.е. типа того

в чем будет отличие от того, что сейчас?

[trin4ik]

• сделать display: none для инпута и обернуть его в label, которому сделать cursor: pointer т.е. типа того

в чем будет отличие от того, что сейчас?

было	стало

[nlopin]

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

[trin4ik]

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

хром в убунте, современный. посмотрю в других браузерах линя, отпишу

[trin4ik]

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

ubuntu 22.04
в 127 фаерфоксе всё ок, как и должно быть
в 126 хроме тот баг, что я описал, т.е. иконка курсора работает неверно.

[vas3k]

Скажите когда можно будет тестить :) У нас по понеделькам деплоить нельзя, так что у вас еще есть время

[nlopin]

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

ubuntu 22.04 в 127 фаерфоксе всё ок, как и должно быть в 126 хроме тот баг, что я описал, т.е. иконка курсора работает неверно.

Попробуй новую версию, у меня в хроме заработало. Это микс твоего предложения с предыдущей версией. Мы не можем сделать display:none потому что перестанет работать фокус через Tab.

[nlopin]

Скажите когда можно будет тестить :) У нас по понеделькам деплоить нельзя, так что у вас еще есть время

можно

[trin4ik]

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

ubuntu 22.04 в 127 фаерфоксе всё ок, как и должно быть в 126 хроме тот баг, что я описал, т.е. иконка курсора работает неверно.

Попробуй новую версию, у меня в хроме заработало. Это микс твоего предложения с предыдущей версией. Мы не можем сделать display:none потому что перестанет работать фокус через Tab.

ага, всё норм

[nlopin]

@vas3k что скажешь?

[nlopin]

@vas3k давай снова тестировать.

Изменения:

• иконка скрепки стала картинкой (fa-image)
• загрузка для мобилы работает с простой textarea
• полноценный редактор теперь не инициализируется на мобиле

Пришлось вытащить часть логики из inline-attachment, чтобы не дублировать. Чуть позже хорошо бы этот файл переписать на более современный код, чтобы уйти от IIFE в нем. Это было явно сделано для того, чтобы подключать файл напрямую в браузер и для нас неактуально, мы его бандлим