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

UI Redesign #2110

Merged
merged 9 commits into from
Feb 27, 2023
Merged

UI Redesign #2110

merged 9 commits into from
Feb 27, 2023

Conversation

texodus
Copy link
Member

@texodus texodus commented Feb 21, 2023

A redesigned UX by Thought Merchants and the Prospective Co.

Superstore Demo.

screen

UI changes:

  • New themes, Pro Light and Pro Dark, replace Material Light and Material Dark.
    • New icons, new colors, new attitude.
  • New plugin selector with fancy indicator icons.
  • Move settings origin to the top-right corner.
  • Moves the config selector controls (Group By, Split By, Order By, Where) to vertical orientation and places them above the column selector, with which it now shares a scroll panel.
  • Aggregate selectors no longer expand the drag container.
  • Expression delete button is now inside the expression dropdown.
  • Adds a title persistence field, as well as an user-editable title control that persists when the settings panel closes if it is non-empty.
  • StatusBar now shows total/virtual rows and total/virtual columns.
  • Adds section labels for all plugins, including perspective-viewer-datagrid.
  • Makes Treemap and Sunburst charts render when Group By is empty (even though this is not yet a particularly useful view due to the coupling of Group By with the axis label)

Non-UI changes:

  • Switch to serde_wasm_bindgen, improves performance and asset payload.
  • Refactor ScrollPanel to
    • Take inconsistently-sized children.
    • Scroll via transform: translateY() to reduce screen-shear.
  • Adds Table.num_rows and Table.num_columns to @finos/perspective.

TODO:

  • Missing axis-switching icons.
  • Missing boolean column icons.

@texodus texodus added enhancement Feature requests or improvements breaking labels Feb 21, 2023
@thoughtmerchant
Copy link

Looks great dude!

@timkpaine
Copy link
Member

timkpaine commented Feb 21, 2023

chrome:
Screenshot 2023-02-21 at 12 44 48

safari, settings button is present but invisible
Screenshot 2023-02-21 at 12 44 45

it has opacity: 0 which is not being set to 1 during whatever event handler is in place

@mhkeller
Copy link

mhkeller commented Feb 21, 2023

In Firefox 110.0 I don't see the Configure button on the right side. It shows up in Chrome, though.
Screenshot 2023-02-21 at 4 21 29 PM

vs Chrome:

Screenshot 2023-02-21 at 4 22 27 PM

It may also be nicer to have Configure float above the column headers instead of overlap

@finos finos deleted a comment from finos-cla-bot bot Feb 22, 2023
@texodus
Copy link
Member Author

texodus commented Feb 22, 2023

Thanks @timkpaine @mhkeller looks like :host-context is only supported on Chrome. This should be fixed now on the updated demo.

Re: the positioning of the button, there is now an optional header displayed even when the config panel is closed which removes this overlap. It can currently be enabled by giving the viewer a title:

Screen.Recording.2023-02-21.at.9.26.24.PM.mov

@texodus texodus force-pushed the tm-redesign branch 2 times, most recently from 4ebae6b to 4627c48 Compare February 22, 2023 15:40
@GREEB
Copy link

GREEB commented Feb 22, 2023

great design i like it a lot, there is a weird problem with the theme drop-down (export and copy drop-down work as expected)

after opening and closing the dropdown without choosing an option it seems to be in a weird state.
If choosing an option is seems fine. Firefox 110
firefox

@texodus
Copy link
Member Author

texodus commented Feb 23, 2023

@GREEB Thanks for the feedback!

This bug doesn't look related to this PR, as it repros on the current release 1.9.4. Also, while we want to fix Firefox bugs when they are reported, we don't currently have the capability to run automated tests against this browser and it is therefore not officially supported yet (Chrome only). There is some effort being put in to fix this (and an initial PR #2114).

I've opened a bug for this #2115

@texodus texodus merged commit 4267dce into master Feb 27, 2023
@davisford
Copy link

This was some solid work. Kudos to all the players that made this happen!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking enhancement Feature requests or improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants