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

feature(UI): Tables with rows that navigate on click #923

Merged
merged 9 commits into from Dec 12, 2023
Merged

feature(UI): Tables with rows that navigate on click #923

merged 9 commits into from Dec 12, 2023

Conversation

Flix6x
Copy link
Contributor

@Flix6x Flix6x commented Dec 11, 2023

Description

  • Tables with rows that navigate on click.
  • Hover effect: background and tooltip.
  • Rows may still contain <a href> elements that navigate elsewhere.
  • Handles CTRL+click.
  • Tested for touchscreen actions.
  • Best for last: the Name header is finally aligned with the asset names rather than with their icons.

Look & Feel

Peek 2023-12-11 22-56

How to test

Just navigate your local UI. If you find out that this requires a hard refresh in the browser (to reload flexmeasures.js), please let me know.

Use ngrok http 5000 to test on a different (touchscreen) device.

@Flix6x
feature(UI): Tables with rows that navigate on click. Also handles CT…
e388091 
…RL+click and touchscreen actions.

Signed-off-by: F.N. Claessen <felix@seita.nl>
@Flix6x Flix6x added the UI label Dec 11, 2023
@Flix6x Flix6x added this to the 0.18.0 milestone Dec 11, 2023
@Flix6x Flix6x requested a review from nhoening December 11, 2023 21:58
@Flix6x Flix6x self-assigned this Dec 11, 2023
nhoening
nhoening approved these changes Dec 12, 2023
View reviewed changes
Copy link
Contributor

@nhoening nhoening left a comment

Choose a reason for hiding this comment

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

Works great.

  • Worth a changelog entry
  • Copying text from the tables isn't possible anymore (only when starting the copying with a click right outside the table, user needs to be crafty). Not sure how annoying that might be.

@Flix6x
fix: keep support for selecting text from table entries
2558efa 
Signed-off-by: F.N. Claessen <felix@seita.nl>
@Flix6x
Copy link
Contributor Author

Flix6x commented Dec 12, 2023

Copying text from the tables isn't possible anymore (only when starting the copying with a click right outside the table, user needs to be crafty). Not sure how annoying that might be.

Great catch!

@Flix6x
docs: changelog entry
d6f4533 
Signed-off-by: F.N. Claessen <felix@seita.nl>
nhoening
nhoening approved these changes Dec 12, 2023
View reviewed changes
Copy link
Contributor

@nhoening nhoening left a comment

Choose a reason for hiding this comment

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

Great fix

flexmeasures/ui/static/js/flexmeasures.js Show resolved Hide resolved
@Flix6x
fix: also ignore button clicks
2f8da2b 
Signed-off-by: F.N. Claessen <felix@seita.nl>
@Flix6x
fix: missing closing tag
9afcd95 
Signed-off-by: F.N. Claessen <felix@seita.nl>
@Flix6x
style: indentation
25bdfc7 
Signed-off-by: F.N. Claessen <felix@seita.nl>
@Flix6x
fix: initialize dataTable after setting defaults
bf355fa 
Signed-off-by: F.N. Claessen <felix@seita.nl>
@Flix6x
docs: add review comment
30019d0 
Signed-off-by: F.N. Claessen <felix@seita.nl>
@Flix6x Flix6x merged commit c510994 into main Dec 12, 2023
9 checks passed
@Flix6x Flix6x deleted the feature/table-navigation-ux branch December 12, 2023 16:22
@victorgarcia98 victorgarcia98 mentioned this pull request Dec 22, 2023
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nhoening nhoening nhoening approved these changes

Assignees

@Flix6x Flix6x

Labels
UI
Projects
None yet
Milestone
0.18.0
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@Flix6x @nhoening