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

Proposal - Inspect page restyling #105

Merged

Conversation

pietromartino
Copy link
Contributor

@pietromartino pietromartino commented Jun 8, 2023

Proposed restyling for the inspect record page. Main highlights:

  • Header and background consistent with other pages (import, export)
  • Improved table accessibility (table borders, contrast, sticky header, show more records with same font size)
  • SLDS-like UX (no SLDS classes actually used)
  • Consistent action bar on the bottom to cancel / save edit

image

image

image

@tprouvot
Copy link
Owner

tprouvot commented Jun 9, 2023

Hi @pietromartino thanks for this PR !
I think it will homogenize the user experience between inspector screen which is great ! 👏

Few small suggestions:

  • Is it possible to match the inspect page body margin to match the one used in export ?
image
  • Could you add a margin to the left of the tab ?
    image

Last but not least, I updated the background image and screen when the org is a prod to warn the user that his actions may have big consequences 😄
image

Since we can update data on this page it would be nice to have the same functionality, what do you think ?

@tprouvot
Copy link
Owner

tprouvot commented Jun 9, 2023

Since this is a major change to UI and from feedbacks I had, I think it would be great to let users decide or configure if they want to have table borders or not.

We would use the localStore to store the user preference with a property named 'displayInspectTableBorders'
image

@pietromartino
Copy link
Contributor Author

Hi @tprouvot , that's a very good point! I added a settings option to the table to allow users to add / remove borders.
Let me know if you think it can work
image

addon/inspect.js Outdated Show resolved Hide resolved
updateShowTableBorder() {
this.showTableBorder = !this.showTableBorder;
localStorage.setItem("displayInspectTableBorders", "true"); // Save to local storage

Copy link
Owner

Choose a reason for hiding this comment

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

Suggested change

@tprouvot
Copy link
Owner

Hi @pietromartino thanks for this great PR !
Just wondering if we could keept the buttons centered for the edit, what do you think ?

Could you merge release candidate in your branche since there was a new released between your branch creation and now ?
Thanks a lot 🙏

@pietromartino
Copy link
Contributor Author

pietromartino commented Jun 28, 2023

Hi @tprouvot, I rebased the branch and centered the buttons in the edit footer bar! Give it a look when you can :)
Thank you!

Copy link
Owner

@tprouvot tprouvot left a comment

Choose a reason for hiding this comment

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

Hi @pietromartino,
Thanks for the updates !

Could you check the rebase you've made ?
Because in the files changes we have some updates that are already in releaseCandidate branch (Version 1.19 updates from CHANGES.md, export query code, pset group button etc.)

Could you also add the Inspect restyling in the CHANGES ?
Thanks !

addon/inspect.css Outdated Show resolved Hide resolved
@pietromartino pietromartino force-pushed the feature/inspectRestyling branch from 9e42a6c to 9669c2b Compare July 7, 2023 13:33
@pietromartino
Copy link
Contributor Author

Hi @tprouvot, you're right! There were some merge errors- should be solved now.
Also updated changes.md 😄 Let me know if it works!

@tprouvot tprouvot merged commit 2147b01 into tprouvot:releaseCandidate Jul 12, 2023
@tprouvot
Copy link
Owner

Thank you very much @pietromartino ! 👏
I'll add a how to enable disable table borders in the issue so that we can communicate on this!

@tprouvot tprouvot mentioned this pull request Jul 18, 2023
tprouvot added a commit that referenced this pull request Jul 18, 2023
Version 1.19
===========

General
-------

* Inspect Page Restyling (UI improvements, red background for PROD,
display / hide table borders)
[PR105](#105)
(contribution by [Pietro Martino](https://github.com/pietromartino))
* Navigate to record detail (Flows, Profiles and PermissionSet) from
shortcut search [feature
118](#118)
* Fix country codes from LocalSidKey convention
[PR117](#117)
(contribution by [Luca Bassani](https://github.com/baslu93))
* Use custom shortcuts [feature
115](#115)
* Add Export Query button [feature
109](#109)
(idea by [Ryan Sherry](https://github.com/rpsherry-starburst))
* Add permission set group assignment button from popup [feature
106](#106)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants