Skip to content

Add support for <details> and <summary> #507

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

Merged
merged 12 commits into from
Feb 8, 2021

Conversation

tneotia
Copy link
Contributor

@tneotia tneotia commented Jan 20, 2021

20210120_165459_1.mp4

Add support for HTML <details> dropdowns, along with <summary> which functions as their title.

Use this HTML to test the example in the above video: https://gist.github.com/tneotia/4200782025039d996dade4b2342a6899

I have had one issue with this though - the stuff in the <summary> tag also gets rendered in the dropdown portion and I cannot figure out how to remove/exclude that section of the tree when rendering the dropdown.

@tneotia tneotia marked this pull request as draft January 20, 2021 22:54
@tneotia tneotia marked this pull request as ready for review January 20, 2021 23:38
tneotia and others added 4 commits February 6, 2021 14:37
author Ryan Berger <ryanbberger@gmail.com> 1596906540 -0600
committer tanay <tanay@neotia.in> 1612640392 -0500

Merge changes (fix conflicting files)
…e/details-tag

# Conflicts:
#	lib/html_parser.dart
…into feature/details-tag

� Conflicts:
�	lib/html_parser.dart
�	lib/src/layout_element.dart
Copy link
Contributor

@ryan-berger ryan-berger left a comment

Choose a reason for hiding this comment

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

One small thing I noticed, I've asked for comment for some other things with from Eric. Feel free to chime in on those comments

Copy link
Contributor

@erickok erickok left a comment

Choose a reason for hiding this comment

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

Still doesn't quite seem to do what you intend. I use this html:

<details>
    <summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
    A keyboard.
</details>

But both the summary and the details end up in the dropdown. I can click the widhet and it extends fine, but the summary text should be shown in the dropdown as 'title'.

Collapsed:
Screenshot 2021-02-08 at 15 21 48

Expanded:
Screenshot 2021-02-08 at 15 22 04

@tneotia
Copy link
Contributor Author

tneotia commented Feb 8, 2021

@erickok looked into this and its very odd...
Basically

<details><summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
    A keyboard.
</details>

works as intended but your example doesn't. In your example, the list of children returned is

[TextSpan(" "), TextSpan(inherit: true, color: Color(0xdd000000), backgroundColor: Color(0x00000000), family: Roboto, size: 14.0, weight: 400, height: 1.2x), TextSpan(" A keyboard. ")]

I render the first item as the title of the dropdown so the empty text messes with it. In my example it returns

[TextSpan(inherit: true, color: Color(0xdd000000), backgroundColor: Color(0x00000000), family: Roboto, size: 14.0, weight: 400, height: 1.2x), TextSpan(" A keyboard. ")]

so the dropdown renders correctly. I'll see if there's a way to work around this.

@tneotia
Copy link
Contributor Author

tneotia commented Feb 8, 2021

@erickok can you check this again? I think I've solved it and hopefully prevented errors occurring in any edge case uses.

@erickok
Copy link
Contributor

erickok commented Feb 8, 2021

Screenshot 2021-02-08 at 17 02 26

The title is showing now indeed, but in the center alignment something intentional?

@tneotia
Copy link
Contributor Author

tneotia commented Feb 8, 2021

I noticed that too, it seems this is only happening in your HTML because "A keyboard" isn't in a tag. If you use <p>A keyboard</p> then it goes back to the left side, I think this is something to do with the styling defaults.

Do you have an idea how I would fix this? There is a param on the ExpansionTile for crossAxisAlignment but I think hardcoding that might not go super well since someone might set text direction to LTR or an alignment to the right side.

@tneotia
Copy link
Contributor Author

tneotia commented Feb 8, 2021

@erickok Never mind... it seems that setting this parameter doesn't actually override the alignment if it is set for the tree itself. This PR should be good to merge now.

Copy link
Contributor

@erickok erickok left a comment

Choose a reason for hiding this comment

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

All good now!

@ryan-berger ryan-berger merged commit def53ac into Sub6Resources:master Feb 8, 2021
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