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

Fix editor shadow appearing under the selected line background when horizontal scroll is active #5020

Merged
merged 1 commit into from
Jan 18, 2023

Conversation

InspiredGuy
Copy link
Contributor

Issue description

Now, when horizontal scroll is active (triggered by line length exceeding editor width), editor displays shadow on the left side of it. It is an inset shadow, which means it is displayed below the content (see box-shadow docs for details). This shadow is overlapped by active line background colour. On the default theme it's not visible, because it has background colour, which is almost transparent (with 0.07 alpha channel value). If you try it on a theme with rgb background color without alpha channel like Clouds, issue becomes visible (see screenshots below).

Fix description

The issue is fixed by moving the shadow to the :after pseudo-element, which comes as a last child of the container. It is rendered above all other children, which leads to shadow appearing correctly above the active line.

Before

Screenshot 2023-01-12 at 18 04 01

After

Screenshot 2023-01-12 at 18 03 44

This PR also updates README with a path to correct tests.html location.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov
Copy link

codecov bot commented Jan 13, 2023

Codecov Report

Base: 86.11% // Head: 86.11% // No change to project coverage 👍

Coverage data is based on head (4327faa) compared to base (1e0b5a9).
Patch has no changes to coverable lines.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #5020   +/-   ##
=======================================
  Coverage   86.11%   86.11%           
=======================================
  Files         546      546           
  Lines       41627    41627           
  Branches     6555     6555           
=======================================
  Hits        35847    35847           
  Misses       5780     5780           
Flag Coverage Δ
unittests 86.11% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/css/editor.css.js 100.00% <ø> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@andrewnester andrewnester merged commit ab4f788 into ajaxorg:master Jan 18, 2023
@InspiredGuy InspiredGuy deleted the horizontal-scroll-shadow branch January 19, 2023 16:02
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.

2 participants