search

zyfra / Prizm

Other
46 stars 16 forks source link

[Feature] PrizmSplitterComponent - кастомизация splitter-gutter #70

Closed digital-plant-guard closed 1 year ago

digital-plant-guard commented 1 year ago

Библиотека

Компонент

PrizmSplitterComponent

Предложение

Сейчас prizm-splitter-gutter имеет фиксированную ширину. Зачастую в приложениях требуется такой слайдер, где ширина gutter'а нулевая и есть только "слайдер" (класс .slider) за который можно тянуть для изменения ширины панелей. Пробовали переопределять стили через ::ng-deep но это приводит к образованию пустой зоны в контейнере, тк ширина панелей контролируется через flex-basis а при вычислении учитывается ширина gutter'a.

Хотелось бы иметь возможность более гибко стилизовать gutter'ы PrizmSplitterComponent и чтобы их ширина корректно учитывалась при формировании панелей.

image

Пустая зона при модификации стилей вручную:

image

image

digital-plant-guard commented 1 year ago

Возможно тут помогут CSS переменные --custom-properties - их удобно использовать и для стилизации и в геттерах для вычислений

AleksandrSibiakov commented 1 year ago

А что если сделать и заэкспортить директиву, которая будет рисовать в определенном месте элемент, за который можно потянуть? По сути гаттер сплиттера станет частным применением этой директивы (т.е. взять и вынести реализацию оттуда). Тогда можно будет просто эту директиву применить к меню (или его контейнеру, зависит от разработчика), и тем самым управлять его шириной (т.е. не использовать непосредственно сплиттер). Это, кстати, поможет не решать проблему с расчетами ширины, и не надо убирать border который по умолчанию splitter так же провайдит. @skkonstantin @digital-plant-guard

AleksandrSibiakov commented 1 year ago

@ZurabDev @skkonstantin Подскажите статус по задаче? Нужна ли помощь? (in_progress стоит давно)

Есть еще идея пофиксить эту задачу через использование flex: 1 1 auto для последней панели (или более генерализованное решение - поддержка auto для размера). Применили такое решение локально на уровне CSS - полет нормальный. Правая панель (у нас их 2) занимает все доступное пространство, ей по сути не нужен calc и не надо учитывать вручную ширину border & gutter. Если интересно, могу сделать PR.

skkonstantin commented 1 year ago

После обсуждения с дизайнерами было принято решение, что splitter-gutter не кастомизируется

skkonstantin commented 1 year ago

Если это прям сильно нужно, можно провести встречу и обсудить

AleksandrSibiakov commented 1 year ago

Тогда нужна рекомендация как реализовать поведение, описанное в дизайн документе image

Сплиттер, выходит, в данном случае не применим - он имеет бордер и гаттер, которые не кастомизируются.

skkonstantin commented 1 year ago

border у сплитера можно убрать, он на хосте. по поводу кастомизации поговорю с дизайнерами еще раз, но также надо понять почему у вас на проекте сделано не по дизайн системе

AleksandrSibiakov commented 1 year ago

Вот я скриншот скинул - это из Figma дизайн-системы. И у нас в приложении так же. Просто видимо тут не надо использовать сплиттер, а какой то свой drag-n-drop механизм. К сожалению в Prizm на текущий момент кроме splitter ничего похожего нет.