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

Fine grained CSS support #2969

Merged
merged 26 commits into from
Jan 4, 2024
Merged

Fine grained CSS support #2969

merged 26 commits into from
Jan 4, 2024

Conversation

amolenaar
Copy link
Member

@amolenaar amolenaar commented Dec 31, 2023

PR Type

What kind of change does this PR introduce?

  • Bug fix
  • Feature
  • Chore (refactoring, formatting, local variables, other cleanup)
  • Documentation content changes

What is the current behavior?

CSS can only be applied to elements (class, association). We can not write CSS that target specific parts in the element, e.g. attributes shown in a Class.

Issue Number: #2919, #3023

What is the new behavior?

  • I added a new shape type: CssNode. With this shape we can tell Gaphor to update the style sheet for a specific element, such as an attribute owned by a class.
  • Add support for the ::after pseudo-element. This allows us to create custom tags (e.g. {abstract} to make it more clear a class/operation is abstract).
  • Added more type annotations.
  • Computed styles are cached
  • Style names have been applied to names (at least the ones shown in bold) and compartments.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

There's still some work ahead:

  • Add CssNodes for all elements that makes sense.
  • Move inline styling to a style sheet.
  • Support for classes, so we can address styling for compartments in a Class item as .compartment. I think this makes more sense that referring to it as an element.
  • Currently the CSS model is rooted in the Element. E.i. an element that is contained by another element does not inherit any properties from its owner. Should this change too? (Make style sheets cascade #2977)
  • Add a way to figure out what CSS nodes are used in an item. (Make style sheets cascade #2977)

!! NB. The caching is still a bit flaky. I disabled caching for now, but that may result in a lot more style computations.

@amolenaar amolenaar marked this pull request as draft December 31, 2023 11:58
@github-actions github-actions bot added the python Pull requests that update Python code label Dec 31, 2023
@amolenaar amolenaar force-pushed the pseudo-element branch 2 times, most recently from 9efe2f6 to 251b8e9 Compare January 1, 2024 16:56
@amolenaar amolenaar changed the title Add basic support for ::after pseudo element Fine grained CSS support Jan 1, 2024
@github-actions github-actions bot added the packaging Update to packaging aspects label Jan 2, 2024
@amolenaar amolenaar marked this pull request as ready for review January 2, 2024 20:49
@amolenaar amolenaar requested a review from danyeaw January 2, 2024 20:49
Copy link
Member

@danyeaw danyeaw left a comment

Choose a reason for hiding this comment

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

This is a really nice feature!!

Would you mind please adding a changelog entry so that we keep the release ready?

@danyeaw danyeaw added feature A new feature and removed python Pull requests that update Python code packaging Update to packaging aspects documentation labels Jan 3, 2024
@github-actions github-actions bot added python Pull requests that update Python code packaging Update to packaging aspects documentation labels Jan 3, 2024
@amolenaar amolenaar mentioned this pull request Jan 4, 2024
6 tasks
@amolenaar
Copy link
Member Author

amolenaar commented Jan 4, 2024

@danyeaw I added a change log entry.

I'm not really happy with how pseudo styles and inherited styles are calculated (with the "private" -gaphor-style-node and -gaphor-compiled-style-sheet CSS properties). Instead it should be a proper class, I suppose. It would be really nice if we can keep the type information TypedDict is providing, though.

BTW. My long term (ultimate) goal is to get rid of the inline styles we use a lot currently, because they cannot be overridden.

It's causing trouble with nested elements, attributes and such.
@danyeaw danyeaw removed python Pull requests that update Python code packaging Update to packaging aspects documentation labels Jan 4, 2024
@danyeaw danyeaw merged commit ffaf04d into main Jan 4, 2024
20 checks passed
@danyeaw danyeaw deleted the pseudo-element branch January 4, 2024 20:47
@danyeaw
Copy link
Member

danyeaw commented Jan 4, 2024

Thanks @amolenaar!

@amolenaar
Copy link
Member Author

It needs a little work to fix the linting errors introduced by this PR. Linting was less strict before #2979 was merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature A new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add option to show abstract classifier by textual annotation {abstract}
2 participants