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

Make wavy underline markings smaller #4989

Merged
merged 6 commits into from
Sep 21, 2023
Merged

Make wavy underline markings smaller #4989

merged 6 commits into from
Sep 21, 2023

Conversation

jorg-vr
Copy link
Contributor

@jorg-vr jorg-vr commented Sep 20, 2023

This pull request replaces wavy underline with custom svg styling. I copied the svg from codemirror.

The background image has to be defined within the theme as we cannot use css variables inside the image. I wrote a mixin to avoid a lot of duplicate sass.

The styles are also moved to static css classes, which should render more efficiently.

Chrome

Old

image

New

image

Firefox

Old

image

New

image

Closes #4943

@jorg-vr jorg-vr added the enhancement A change that isn't substantial enough to be called a feature label Sep 20, 2023
@jorg-vr jorg-vr requested a review from a team as a code owner September 20, 2023 09:42
@jorg-vr jorg-vr self-assigned this Sep 20, 2023
@jorg-vr jorg-vr requested review from bmesuere and chvp and removed request for a team September 20, 2023 09:42
Copy link
Member

@bmesuere bmesuere left a comment

Choose a reason for hiding this comment

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

I can live with using an image mask for this, but I don't think this is implemented in the most efficient way.

Right now, the style is added inline to each instance of the custom element (it is added to the template). I would expect it to be in a general css file, or in the static styles of the element.

@jorg-vr jorg-vr marked this pull request as draft September 20, 2023 10:00
@jorg-vr
Copy link
Contributor Author

jorg-vr commented Sep 20, 2023

The styling is also broken in combination with comments
image

I knew about the inefficiency of inline style, but this problem has indeed become worse now that we use svg images

@jorg-vr jorg-vr marked this pull request as ready for review September 20, 2023 13:56
@chvp chvp added the deploy mestra Request a deployment on mestra label Sep 21, 2023
@chvp chvp temporarily deployed to mestra September 21, 2023 07:49 — with GitHub Actions Inactive
@github-actions github-actions bot removed the deploy mestra Request a deployment on mestra label Sep 21, 2023
@jorg-vr jorg-vr merged commit 8854cba into main Sep 21, 2023
14 of 15 checks passed
@jorg-vr jorg-vr deleted the enhance/smalle-underline branch September 21, 2023 08:29
@jorg-vr jorg-vr temporarily deployed to naos September 21, 2023 08:29 — with GitHub Actions Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement A change that isn't substantial enough to be called a feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Avoid using wavy text decoration for multiline annotations
3 participants