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

Implement state-dependent accordion background colors #1038

Merged
merged 6 commits into from
Dec 30, 2024

Conversation

edan-bainglass
Copy link
Member

@edan-bainglass edan-bainglass commented Dec 27, 2024

This PR uses the experimental :has CSS selector to apply background colors to the accordion item headers bases on the state of the accordion item's content (the wizard steps). If :has is not supported by the browser (old version), the colors simply do not apply.

Closes #989


image
image
image
image
image

@edan-bainglass
Copy link
Member Author

@superstar54 @AndresOrtegaGuerrero please test this 🙏 I'm wondering how well it works. Also, please comment on the colors. Happy to change. Wasn't sure if READY and CONFIGURED should have different background colors.

Copy link

codecov bot commented Dec 27, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.65%. Comparing base (1ad6fd2) to head (def74fe).
Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1038      +/-   ##
==========================================
+ Coverage   67.60%   67.65%   +0.04%     
==========================================
  Files         117      117              
  Lines        6488     6498      +10     
==========================================
+ Hits         4386     4396      +10     
  Misses       2102     2102              
Flag Coverage Δ
python-3.11 67.63% <100.00%> (+0.03%) ⬆️
python-3.9 67.67% <100.00%> (+0.06%) ⬆️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@edan-bainglass edan-bainglass marked this pull request as ready for review December 27, 2024 06:38
@@ -1160,6 +1160,7 @@ def __init__(self, model: QWSM, **kwargs):
super().__init__(children=[self.loading_message], **kwargs)
self._model = model
self.rendered = False
self._bg_class = ""

Choose a reason for hiding this comment

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

what does "bg" stands for ?

Copy link
Member Author

Choose a reason for hiding this comment

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

Standard short for background in CSS classes, but since it's not immediately clear, maybe I change it.

@AndresOrtegaGuerrero
Copy link
Member

AndresOrtegaGuerrero commented Dec 29, 2024

@edan-bainglass I tested , it looks nice , i dont have any preference regarding the colors you choose (i liked them) i just had some comments in the code.

Copy link
Member

@AndresOrtegaGuerrero AndresOrtegaGuerrero left a comment

Choose a reason for hiding this comment

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

LGTM! , thanks @edan-bainglass , lets see if @superstar54 is ok with the colors?

@edan-bainglass
Copy link
Member Author

LGTM! , thanks @edan-bainglass , lets see if @superstar54 is ok with the colors?

For the sake of time, I'll proceed. We can modify colors later if necessary.

@edan-bainglass edan-bainglass merged commit 68cdb8d into aiidalab:main Dec 30, 2024
8 checks passed
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.

Colour step "tabs" based on their state and required action
2 participants