Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

12787 resizable layout component #13044

Merged
merged 47 commits into from
Jul 11, 2024
Merged

12787 resizable layout component #13044

merged 47 commits into from
Jul 11, 2024

Conversation

Jondyr
Copy link
Member

@Jondyr Jondyr commented Jun 28, 2024 •
edited
Loading

Description

  • New component in studio-components using flexbox and flex-grow to create a resizable layout that keeps proportions when scaled
    • StudioResizableLayoutContainer
      • Should be used as parent element to StudioResizableLayoutElement
      • Can be defined as either a vertical or horizontal layout
      • Saves resize state in local storage (uniquely identified by localStorageContext prop)
      • Custom styling can be added with the style prop
    • StudioResizableLayoutElement
      • Can restrict resizing with minimumSize
      • Collapsing can be toggled with collapsed and size controlled with collapsedSize
      • Custom styling can be added with the style prop
    • StudioResizableLayoutHandle
      • Automatically added between Element components
      • Handles mouse and keyboard events for resizing
  • Container is a wrapper to set up the resizable layout container. Element is used to create individual resizable boxes within the container and should only be used inside a Container component
  • New storybook entry
  • Moved useLocalStorage and useWebStorage hooks to studio-components hooks folder
  • Moved layoutSet dropdown from components pane to new toolbar similar to the one on the datamodels page

Related Issue(s)

Verification

  • Your code builds clean without any errors or warnings
  • Manual testing done (required)
  • Relevant automated test added (if you find this hard, leave it and we'll help out)

Documentation

  • User documentation is updated with a separate linked PR in altinn-studio-docs. (if applicable)
  • Storybook entry added

Jondyr added 15 commits June 27, 2024 13:00
@Jondyr
PoC resizable layout
a4c422e
@Jondyr
Alter FormDesigner view to test out resizable layout
56ec604
@Jondyr
Remove commented code
ac8454e
@Jondyr
Undo deletion of css rule
ce56af3
@Jondyr
Move LayoutSet selector to own toolbar similar to SchemaEditor
9b43d1f
@Jondyr
Refactor ResizableLayout implementation
eb58be2
@Jondyr
Make preview collapsing also collapse the resizable layout element
823884f
@Jondyr
Refactor css and use negative inset to increase grab area of handles
ee9552b
@Jondyr
Update layout on minimumSize change
727a53a
@Jondyr
Add storybook entry for Resizable Layout
8074bc2
@Jondyr
Refactor StudioResizableLayout
d479f5f
@Jondyr
Add toolbar and add state to block iframe preview
3241dc1
@Jondyr
Update ResizableLayout storybook entry
84f1ec9
@Jondyr
Move localstorage hook to studio-components hook folder
90a6060 
As these are completely isolated and app independent they are better
suited in this folder
@Jondyr
Remove unnecessary ref proxying with imperativehandle
8498b7e
@github-actions github-actions bot added area/process Area: Related to app process (e.g. signing, receipt, fill inn, payment, etc). area/ui-editor Area: Related to the designer tool for assembling app UI in Altinn Studio. area/dashboard Area: Related to the dashboard application solution/studio/designer Issues related to the Altinn Studio Designer solution. area/text-editor labels Jun 28, 2024
@Jondyr Jondyr marked this pull request as ready for review July 4, 2024 06:57
@mlqn mlqn self-requested a review July 9, 2024 07:34
@mlqn mlqn self-assigned this Jul 9, 2024
mlqn
mlqn approved these changes Jul 9, 2024
View reviewed changes
Copy link
Contributor

@mlqn mlqn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! 🚀

...ents/StudioResizableLayout/StudioResizableLayoutContainer/StudioResizableLayoutContainer.tsx Outdated Show resolved Hide resolved
frontend/packages/ux-editor/src/containers/FormDesigner.tsx Show resolved Hide resolved
frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.module.css Outdated Show resolved Hide resolved
frontend/packages/ux-editor/src/containers/FormDesigner.tsx Show resolved Hide resolved
@mlqn mlqn removed their assignment Jul 9, 2024
@Jondyr Jondyr force-pushed the 12787-resizable-layout-component branch from 9e6118b to 7f1b23e Compare July 11, 2024 12:42
@Jondyr Jondyr merged commit 9267ccf into main Jul 11, 2024
9 checks passed
@Jondyr Jondyr deleted the 12787-resizable-layout-component branch July 11, 2024 13:28
This was linked to issues Jul 11, 2024
It should be possible to adjust the sizes of the panels by dragging them narrower or wider #12787
Closed
Control widths of tabs in Datamodel Tool #12730
Closed
Move "Sidegruppe" select on lage page to the top of the page #13006
Closed
@Jondyr Jondyr restored the 12787-resizable-layout-component branch July 15, 2024 09:43
@Jondyr Jondyr deleted the 12787-resizable-layout-component branch July 15, 2024 09:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mlqn mlqn mlqn approved these changes

Assignees
No one assigned
Labels
area/dashboard Area: Related to the dashboard application area/data-modeling Area: Related to data models - e.g. create, edit, use data models. area/process Area: Related to app process (e.g. signing, receipt, fill inn, payment, etc). area/ui-editor Area: Related to the designer tool for assembling app UI in Altinn Studio. quality/testing Tests that are missing, needs to be created or could be improved. solution/studio/designer Issues related to the Altinn Studio Designer solution.
Projects
None yet
Milestone
No milestone
2 participants
@Jondyr @mlqn