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

Seperate icons from background on panel heading #2788

Merged
merged 1 commit into from
Nov 12, 2024

Conversation

jevenski
Copy link
Contributor

  1. Oblivion - side panel on mobile

image

Originally posted by @koblack in #2721 (comment)

This patch fixes an issue of the heading background of the side panel in Oblivion theme. But under the hood, the change is not limited to the Oblivion theme. The fundamental structure of the headings were altered a bit, for ease of maintenance in the future.

  • Previously on the headings of the side panel, open/close icons were defined using the heading background image, which also contains the actual background images for some themes like MaterialDesign and Oblivion. In this patch, the icons are extracted from the background of headings and implemented using the ::before pseudo-elements. This seperates the icons from the heading background images, thus allowing defining heading background using CSS gradient without affecting the icons.
  • Dedupe some panel background images in MaterialDesign and Oblivion.
  • Fix Oblivion panel heading background width limitation. The new CSS gradient implementation can grow infinitely.

- Previously on the headings of the side panel, open/close icons
  were defined using the heading background image, which also
  contains the actual background images for some themes like
  MaterialDesign and Oblivion. In this patch, the icons are
  extracted from the background of headings and implemented using
  the `::before` pseudo-elements. This seperates the icons from
  the heading background images, thus allowing defining heading
  background using CSS gradient without affecting the icons.
- Dedupe some panel background images in MaterialDesign and Oblivion.
- Fix Oblivion panel heading background width limitation. The new
  CSS gradient implementation can grow infinitely.
@koblack
Copy link
Contributor

koblack commented Nov 12, 2024

Looks good! A few screenshots from me:

Screenshot_20241112_173933_Chrome
Screenshot_20241112_173911_Chrome
Screenshot_20241112_173847_Chrome
Screenshot_20241112_173826_Chrome
Screenshot_20241112_173750_Chrome
Screenshot_20241112_173724_Chrome
Screenshot_20241112_173659_Chrome

@stickz
Copy link
Collaborator

stickz commented Nov 12, 2024

Thanks for the help testing this @koblack. I'm now able to merge this right away!

@stickz stickz merged commit a1ef182 into Novik:master Nov 12, 2024
@jevenski jevenski deleted the panel-bg branch November 12, 2024 22:33
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