[FEAT]: Adjust page layout of Workflow to maximize canvas screen real estate #5477
Labels
Enhancement
Improvements to features already in the application
feature
New feature or request
Front End/HMI
This is a nice to have, not critical, but should improve UX by giving users 17% more screen real estate to work with.
![Image](https://private-user-images.githubusercontent.com/120480244/385462574-a294efbc-6015-4d84-b2f9-cad42ca24073.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk2NzI4NzAsIm5iZiI6MTczOTY3MjU3MCwicGF0aCI6Ii8xMjA0ODAyNDQvMzg1NDYyNTc0LWEyOTRlZmJjLTYwMTUtNGQ4NC1iMmY5LWNhZDQyY2EyNDA3My5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNlQwMjIyNTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03YmFhMjA1ZGU1ZWVjZjVmNWZjZTYzYjIxM2IxYTFlMGUxMWE3MGQxODMyMjQ2MjdiN2M5MzA0YjFkNzY5MjJlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Z936afJa5B-ufIm6H7c7QiyYZfSEGSSrgDtaPIyvcVI)
The trick to pulling this off is removing the "terarium" letters from the logo and not showing the project selector when we are in the workflow view. Users will have to go back to the overview page to see the project selector, or they can select different projects from the home page.
Here's the design:
![Image](https://private-user-images.githubusercontent.com/120480244/385464388-d4ca75ca-3d91-487d-834e-2c8e4fc5d044.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk2NzI4NzAsIm5iZiI6MTczOTY3MjU3MCwicGF0aCI6Ii8xMjA0ODAyNDQvMzg1NDY0Mzg4LWQ0Y2E3NWNhLTNkOTEtNDg3ZC04MzRlLTJjOGU0ZmM1ZDA0NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNlQwMjIyNTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zZWJmYzBlZDlhZTgzZTAzZGZjYzc3NmRhNTQwYzYyZWIzOGQ0NDM0OTBkMmM1MmVkZTg3MjAwOGRjYzRlNzM0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.YsumN1jkpYThOVnpQAoLe3bq09FPJApBCGsjYDKBfbQ)
Note, I moved all the header and footer buttons (About, Documentation, Report an issue, Request a feature) into a new dropdown menu in the header with a (?) icon (pi-question-circle).
![Image](https://private-user-images.githubusercontent.com/120480244/385466241-b4262706-0775-4b46-b145-597293e5cb1e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk2NzI4NzAsIm5iZiI6MTczOTY3MjU3MCwicGF0aCI6Ii8xMjA0ODAyNDQvMzg1NDY2MjQxLWI0MjYyNzA2LTA3NzUtNGI0Ni1iMTQ1LTU5NzI5M2U1Y2IxZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNlQwMjIyNTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hMTY5M2RmYmNkYTk4MjdlN2I0YTQ5NmNiMTUyNDNlNjZmMWM0MjcxMmM5ODM0YjVmM2VlYzk0MjkyMmZjYjNkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.arHfQMfzVJgpztqdDn5-Qy4eQdLctJbnzkXg9m5HqbY)
Finally, since we're removing the 3-dot menu next to the header name where you can rename a workflow, we need to add that functionality into the resource panel. Instead of showing an X on hover, we should show a 3-dot menu icon. Click it to get a popup menu with options to rename or delete. If you choose 'rename', the label turns into an input box where you can rename it. Click enter or anywhere else on the page to submit.
The icon-only logo file is here:
![Image](https://private-user-images.githubusercontent.com/120480244/385468738-2363159b-1a34-424f-9411-9427167fdba2.svg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk2NzI4NzAsIm5iZiI6MTczOTY3MjU3MCwicGF0aCI6Ii8xMjA0ODAyNDQvMzg1NDY4NzM4LTIzNjMxNTliLTFhMzQtNDI0Zi05NDExLTk0MjcxNjdmZGJhMi5zdmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNlQwMjIyNTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05NjdmNjQ0NWMxYzkxNDM5ZmNjYWFmNDRlOGNkNTZkMDhjNzMyYWEyZWM5ZDM0YzBkYTFlODkyM2M0ZWUxOWZkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Xc78NjE6PBTJGXh7XN9xfGTNdLG1p-7n4dQsluyCyRg)
The text was updated successfully, but these errors were encountered: