Просмотр файлов

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

В SPA файл может открываться не только в полноэкранном просмотрщике, но и в боковой панели справа. Такой режим используется на больших экранах (LG/XL) при работе с задачами, чатами и Диском, чтобы сохранить видимым основной контент. На Диске боковая панель появляется при клике на файл и позволяет просматривать содержимое без переключения контекста. На небольших экранах файл открывается сразу во весь экран. При необходимости из бокового просмотрщика можно перейти в полноэкранный режим. Поведение открытия зависит от ширины экрана и от режима просмотра задачи. Если для задачи используется режим просмотра «снизу», файл открывается сразу в полном экранном просмотре, а не в правой панели.

Тип данных	Расширения
Изображения	jpg, jpeg, png, gif, webp, svg, jfif
Видео	mp4, webm, ogg, mov
Аудио	mp3, ogg, aac
PDF	pdf
Офисные документы	doc, docx, xls, xlsx, csv, ppt, pptx, ods, mpp, vsd, vsdx, pub и др.
Текст и код	txt, md, json, xml, html, sql, js, ts, cs, py, java, css, yaml, sh, log и др.
Письма Outlook	msg
Письма (стандарт)	eml

Все остальные форматы при клике скачиваются.

Оформление просмотрщика

В SPA просмотрщик файлов использует единое системное оформление как в боковой панели справа, так и в полноэкранном модальном окне.

Шапка просмотрщика оформляется в системных цветах интерфейса: фон шапки, цвет текста имени файла и цвет кнопок зависят от текущей темы приложения.

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

Область просмотра файла использует системный фон интерфейса. В светлой теме фон отображается в светлых тонах, в тёмной теме — в тёмных.

Модальное окно просмотрщика также подчиняется теме приложения: затемняющий фон заменён на системный нейтральный фон интерфейса.

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

Внешнее оформление просмотрщика (шапка, кнопки, рамка, фон контейнера) подчиняется теме приложения. При этом особенности отображения содержимого конкретного формата файла могут зависеть от самого viewer-компонента этого формата. Например, для Markdown-файлов отдельные параметры отображения по-прежнему доступны в самом просмотрщике.

Панель инструментов в режиме просмотра файла

Кнопка	Описание
кнопку поворота Повернуть	Каждое нажатие поворачивает изображение на 90 градусов по часовой стрелке.
кнопку увеличения Увеличить масштаб	Изменение масштаба.
кнопку уменьшения Уменьшить масштаб
кнопку информации Информация	Открывает модальное окно с информацией о файле.
Кодировка	Выбор кодировки, которую следует использовать для отображения (декодирования) текста.
Еще
кнопку «Открыть в новой вкладке» Открыть в новой вкладке	Открывает файл в новой вкладке.
кнопку копирования Скопировать ссылку	По клику на кнопку в буфер обмена копируется прямая полная ссылка на текущую открытую версию файла (не на открытый файл в просмотрщике). Просмотрщик при этом не закрывается. Ссылка идентична ссылке для действия Открыть файл в новой вкладке и также ведет в просмотрщик. При открытии файла таким способом контекст (чат, задача или список других вложений) не передается — пользователь видит только этот конкретный файл без возможности переключения на соседние
кнопку скачивания Скачать	Скачивает файл
кнопку «скачать все» Скачать все	Скачивает все файлы zip-архивом. В архив не включаются файлы из параметров, в настройках которых активна опция Защитить файл от загрузки
кнопку «Просмотр версий» Просмотр версий	Открывает окно с историей версий файла и информацией по каждой версии: версия файла, вложивший файл пользователь, дата вложения, размер файла.

ℹ️ Файл не может быть скачан, если у пользователя нет на него прав. Это правило действует даже в случае перевоплощения: если администратор или другой пользователь перевоплощается в пользователя без доступа к файлу, скачивание остается запрещенным.

При открытии изображения система автоматически подбирает начальный масштаб. Если изображение меньше рабочей области экрана — оно будет увеличено так, чтобы заполнить доступное пространство (но не более чем позволяет разрешение файла). Если изображение крупнее экрана — оно уменьшается, чтобы поместиться целиком. Пользователь может изменить масштаб колесом мыши или кнопками панели инструментов.

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

По ссылкам под текстом сообщения вы можете перейти в историю версий или открыть самую свежую версию документа.

Настройки отображения Markdown

При просмотре .md-файлов доступны дополнительные настройки отображения. Кнопка настроек появляется в панели инструментов только для Markdown-файлов.

Тема оформления

Значение	Описание
Как в приложении	Тема просмотрщика совпадает с текущей темой приложения (светлая или тёмная)
Светлая	Всегда светлая тема, независимо от настроек приложения
Тёмная	Всегда тёмная тема, независимо от настроек приложения

Оформление просмотрщика Markdown

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

Ширина контента

Значение	Описание
По умолчанию	Максимальная ширина 800 px, контент центрирован
Растянуть на всю ширину	Контент занимает всю доступную ширину окна просмотра

Выбранные настройки сохраняются автоматически и применяются ко всем Markdown-файлам при следующих открытиях.

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

При открытии Markdown-файла на отдельной странице в панели инструментов доступно меню настроек, где можно изменить тему оформления и ширину контента.

Поддерживаемые элементы Markdown

Просмотрщик корректно отображает основные элементы синтаксиса Markdown:

Элемент	Описание
Абзац	Обычный текст, жирный, курсив, жирный курсив
Заголовки	H1, H2, H3, H4
Ссылки	Кликабельны; в тёмной теме всегда подчёркнуты, в светлой — при наведении
Горизонтальный разделитель	---
Цитата	Блок > текст
Списки	Маркированные и нумерованные
Таблица	Рендерится с разделителями и выделенной шапкой
Inline-код	Отображается моноширинным шрифтом с фоновой подсветкой
Блок кода	Отображается с подсветкой синтаксиса, если указан язык программирования; цвета подсветки адаптируются к выбранной теме
Изображение	Встроенные изображения отображаются inline

Навигация по ссылкам в Markdown-файлах

При просмотре .md-файла относительные ссылки на другие .md-файлы кликабельны — по клику открывается целевой файл в том же окне просмотра. Поддерживается навигация между папками (ссылки вида ../../folder/file.md). Если ссылка содержит якорь (файл.md#раздел), после открытия файл автоматически прокручивается к указанному разделу. Ссылки на папки открывают соответствующую папку на Диске. При переходе по ссылке в панели инструментов появляется кнопка Назад для возврата к исходному файлу. Абсолютные ссылки (http/https) открываются в новой вкладке, как обычно. Если целевой файл или папка не найдены — отображается уведомление об ошибке.

ℹ️ В веб и мобильных браузерах Firefox и Safari не поддерживается воспроизведение видео в формате .webm

Горячие клавиши

Сочетание	Действие
Cmd+E (MacOS) / Ctrl+E (Windows)	Закрыть превью справа
Esc	Закрыть превью во весь экран

Сочетание Cmd/Ctrl+E работает из любого места, где открыто превью: грид, канбан, лента, Диск.

Если одновременно открыты превью и карточка задачи, то первое нажатие Cmd/Ctrl+E закроет превью, второе - карточку задачи.

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

Выделение текста при открытом файле

Когда файл открыт в боковой панели или полноэкранном просмотрщике, сочетание Ctrl+A (Windows) / Cmd+A (Mac) работает в зависимости от расположения фокуса: - Фокус в поле комментария — выделяется весь текст комментария - Фокус в области просмотра файла — выделяется текст файла - Фокус на странице задачи (вне полей ввода) — выделяется весь текст страницы