fix: fit json-editor tab list and pane into the window INT-1311 - #1243
fix: fit json-editor tab list and pane into the window INT-1311#1243Onlysudden wants to merge 5 commits into
Conversation
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 21 |
| Duplication | 0 |
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
There was a problem hiding this comment.
Это убого.
Если что, на скрине пол высоты экрана белое поле, зато есть скролл.
Сделайте, пожалуйста, как было до всех ваших изменений. Панель настроек должна занимать всю высоту страницы, тогда не надо постоянно показывать скролл и делать подписи, и будет интуитивно.
Привет, сделать как было не получиться, потому что в таком случае мы откатим удобство работы с большим количеством вкладок слева. Сделаю вариант с расширением до края окна, но он будет расширяться, если тело вкладки справа или количество вкладов слева позволяет |
|
К сожалению, пока это выглядит так, что была сломана работа всего приложения для решения какой-то локальной задачи. Возможно, надо решить вашу локальную задачу иначе, а приложение вернуть к исходному состоянию? |
Изначально проблема была в том, что если у пользователя много сценариев, то ему неудобно их настраивать. Приходилось при каждом выборе вкладки Сценария мотать экран вниз, после мотать вверх, чтобы изменить его настройки. И так для каждого Сценария. Можно попробовать совсем откатить правки скролла и оставить их только внутри Сценариев, что думаешь? Но, если мы вернем расширение окна выбора, только ограничив размерами окна, то все другие вкладки будут отображаться как раньше, до наших правок |
Onlysudden
changed the title
3 participants
Что происходит; кому и зачем нужно:
В «Модули расширения и порты» и других конфигах со вкладками список слева обрезался ровно по границе строки, а на overlay-полосках прокрутки (Firefox на Windows 11, macOS, Edge) в покое полоски нет. Пользователь не видит, что список продолжается. При длинной форме страница крутится целиком, заголовок и кнопка «Записать» уезжают.
Что сделано и почему.
Добавлен
tab-list-layout.ts- вся раскладка списка вкладок вынесена из React-обёртки в модуль, который вешается на корень редактора и возвращает функцию отписки. Логика не зависит от React, а на имя файла ссылаются тема и стили, поэтому ей нужен свой дом. Он же рисует полоску прокрутки списка и тащит ползунок мышью. Пересчёт запускается и по MutationObserver, иначе добавление вкладки в ограниченный по высоте список не меняет размер корня.Список вкладок первого уровня и панель выбранной вкладки ограничены по высоте, каждый крутится внутри себя, страница не крутится. Ограничение считается от непрокрученного положения вкладок и от низа прокручиваемой области страницы, а не от низа окна - иначе при открытой консольной панели список вылезал бы под неё. Пересчёт слушает и размер самой области прокрутки, потому что консольная панель меняет его, не меняя ни окна, ни редактора. Из ограничения вычитается всё, что идёт под вкладками, включая поля после них. Если до низа остаётся меньше 240px (длинная форма над вкладками, как в шлюзах IEC 104 и OPC UA), список остаётся липким и ограничен высотой прокручиваемой области, а страница крутится как раньше.
Вложенные списки вкладок стали обычными - каналы модуля WBIO в «Модули расширения и порты», элементы устройства KNX. Правило прокрутки в master общее для всех списков, поэтому вложенный список тоже прилипал, получал потолок по высоте окна и открывался обрезанным, вырастая при прокрутке страницы. Теперь потолок и липкость достаются только списку первого уровня, а вложенный целиком лежит в панели родительской вкладки и едет с её прокруткой.
Изменён
json-editor.tsx- в обёртке остался один эффект, который подключает раскладку к контейнеру редактора.Изменён
wb-bootstrap3-theme.js- холдер вкладок получает элемент полоски третьим ребёнком, библиотека индексирует только первые два. Имена классов приходят из модуля раскладки, он же полоску позиционирует и показывает.Изменён
styles.css- классыwb-jsonEditor-tabsFitиwb-jsonEditor-tabsStickyна холдере. В первом панель получает внутреннюю прокрутку, во втором списокposition: sticky. Нативная полоска списка скрыта в обоих режимах, цвета своей из палитры, в режиме высокой контрастности ползунок берёт системный цвет, иначе он сливается с фоном списка. Ряды отодвигаются на ширину трека только пока список переполнен, класс отступа снимается перед замером, поэтому строка, которая переносится из-за него, не может переключать решение туда и обратно. Мобильная раскладка не меняется.Добавлен
tab-list-layout.test.ts- выбор режима по остатку высоты, ограничение по области прокрутки вместо окна, вложенный и пустой список, мобильная ширина, отступ под полоску, перетаскивание ползунка и снятие слушателей.Что поменялось для пользователей:
Было:
Стало:
Видео всех правок было:
https://github.com/user-attachments/assets/d3913166-a15a-4ea2-8724-788c80fb858e
Видео всех правок стало:
https://github.com/user-attachments/assets/1e43254f-b6cd-4898-82bd-7bf959cedd94
Список вкладок и форма выбранной вкладки в конфигах со вкладками не выходят за низ страницы и крутятся каждый внутри себя, заголовок и кнопка «Записать» остаются на месте.
Список вкладок всегда показывает полоску прокрутки, в том числе в Firefox на Windows 11 и на macOS.
Вложенный список каналов у модуля WBIO и элементов у устройства KNX открывается целиком и едет вместе с формой.
В шлюзах IEC 104 и OPC UA, где над вкладками длинная форма, список прилипает к верху при прокрутке страницы, а при загрузке показан во всю высоту.
Ползунок списка виден и в режиме высокой контрастности.
Как проверял/а:
tsc,eslint,vitestбез замечаний. Было проверено локально на контроллере - семь конфигов со вкладками при 1400×900, 1400×380 и ширине 800px, с открытой и закрытой консольной панелью, плюс режим высокой контрастности.Проверил через установку пакетом. Все корректно.