feat: add adjustable sidebar width with drag handles#1682
feat: add adjustable sidebar width with drag handles#1682sank64 wants to merge 4 commits intomaplibre:mainfrom
Conversation
sank64
force-pushed
the
feature/sidebar-resize
branch
from
3fdeea3 to
586b2ba
Compare
sank64
changed the title
- Convert AppLayout from class to functional component - Add outer resize handle between sidebar and map (drag to resize) - Add inner resize handle between layer list and properties drawer - Use CSS custom properties for dynamic sidebar/panel widths - Persist both sidebar width and list/drawer ratio to localStorage - Fix layer click selection: clicking layer name text now opens properties - Extract sidebar helpers to src/libs/sidebar.ts - Add unit tests for sidebar helpers - Add Cypress e2e test for resize handles
sank64
force-pushed
the
feature/sidebar-resize
branch
from
586b2ba to
08e73f6
Compare
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1682 +/- ##
==========================================
+ Coverage 71.30% 71.85% +0.54%
==========================================
Files 102 103 +1
Lines 7002 7167 +165
Branches 2146 2172 +26
==========================================
+ Hits 4993 5150 +157
- Misses 2006 2014 +8
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
src/components/AppLayout.tsx
Outdated
| className="maputnik-layout-resize-handle" | ||
| data-testid="sidebar-resize-handle" | ||
| onMouseDown={handleMouseDown} | ||
| title="Drag to resize sidebar" |
There was a problem hiding this comment.
This probably needs translation too.
There was a problem hiding this comment.
You're right — will wrap both resize handle titles with t() and add the corresponding keys to the translation files.
There was a problem hiding this comment.
Can you add some AI generated translations?
There was a problem hiding this comment.
I've added translations to the PR
sank64
force-pushed
the
feature/sidebar-resize
branch
2 times, most recently
from
5bcd6f5 to
b33a920
Compare
|
Hi Harel, I've tried to implement all needed changes. I still get an error on [modals.cy.ts] (1 failing out of 37). I don't see how it is connected to the changes I made in the PR.
|
|
Is there a react plugin that can facilitate for this? When I look at it now it looks like a lot of code and I'm wording if this can be solved using some plugin...? |
I let you decide. We are using the code I PR to begin with. I wanted to help back the great maputnik team as a thanks for a great project. Unfortunately I won't have time to rewrite the PR or adjust it any more than I did. |
|
I think this should be possible with: It also has a good drag handle appearance for accessibility. I'll see if I can find the time for this. |
3 participants
Summary
Adds draggable resize handles to the sidebar, allowing users to adjust both the total sidebar width and the layer list / properties drawer split. Also fixes a bug where clicking on layer name text did not open properties.
Address all corrections required in #1677
Changes
src/libs/sidebar.tsNote: CI e2e failures are all
Failed to initialize WebGL- a Chrome 145 headless GPU issue on GitHub Actions, unrelated to this PR.