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.

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

UX Improvements to Immersive Editor #3753

Merged

Conversation

cstns
Copy link
Contributor

@cstns cstns commented Apr 22, 2024

Description

  • adding the ability to resize the editor drawer
  • adding a resize bar and middle drawer collapse button
  • changed the drawer back button to redirect to the instance details page
  • open the editor in the current window when clicking the drawer external link to avoid multiple WS connections and tab discrepancies

Related Issue(s)

ref #3646
closes #3657

Checklist

  • I have read the contribution guidelines
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
    • Upgrade instructions
    • Configuration details
    • Concepts
  • Changes flowforge.yml?
    • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
    • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

  • Backport needed? -> add the backport label
  • Includes a DB migration? -> add the area:migration label

@cstns cstns added the area:frontend For any issues that require work in the frontend/UI label Apr 22, 2024
@cstns cstns requested a review from joepavitt April 22, 2024 09:59
@cstns cstns self-assigned this Apr 22, 2024
@cstns
Copy link
Contributor Author

cstns commented Apr 22, 2024

I'm not fully satisfied with the resizing action as there's a slight delay when dragging the drawer (unlike some vue plugins I checked out) but it'll do for now

Copy link

codecov bot commented Apr 22, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.14%. Comparing base (a5d38bb) to head (75c6084).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #3753   +/-   ##
=======================================
  Coverage   79.14%   79.14%           
=======================================
  Files         278      278           
  Lines       12487    12487           
  Branches     2761     2761           
=======================================
  Hits         9883     9883           
  Misses       2604     2604           
Flag Coverage Δ
backend 79.14% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@joepavitt joepavitt changed the title 3657 optimize the node red immersive editor experience UX Improvements to Immersive Editor Apr 23, 2024
@joepavitt
Copy link
Contributor

joepavitt commented Apr 23, 2024

I'm not fully satisfied with the resizing action as there's a slight delay when dragging the drawer (unlike some vue plugins I checked out) but it'll do for now

Assuming this is because of the CSS transition on the draw height? Just fixed it with abd83ac

Copy link
Contributor

@joepavitt joepavitt left a comment

Choose a reason for hiding this comment

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

Great work @cstns - made a couple of very minor improvements, but otherwise, works great. Just updated to latest of main, will wait for tests to run, but should all be fine.

@joepavitt joepavitt merged commit 79fe612 into main Apr 23, 2024
9 of 10 checks passed
@joepavitt joepavitt deleted the 3657-optimize-the-node-red-immersive-editor-experience branch April 23, 2024 15:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:frontend For any issues that require work in the frontend/UI deploy:pr
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Optimize the Node-RED immersive editor experience
2 participants