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

Add screen condition to conditional card. #18041

Merged
merged 12 commits into from
Oct 9, 2023
Merged

Conversation

piitaya
Copy link
Member

@piitaya piitaya commented Sep 27, 2023

Proposed change

New condition type : screen.

This will be used in the energy dashboard to hide the date card on desktop so we don't have to have dynamic config based on the screen size in energy strategy.
The screen condition has only one parameter media_query. The user can define any media query using yaml.
In the UI, 4 screen sizes are displayed (mobile, tablet, desktop, wide). The editor will build the media query according to the user selection.

New editor

  • Migration to ha-form
  • A toggle icon has been added to switch between ui and yaml editor.
  • A delete icon has been added to delete the condition. Before, the user had to click on the clear button in the entity picker which resulted to an error. This bug has been fixed too.
  • The state input now uses state translations.
  • A "add condition" button to select the condition type.

CleanShot 2023-10-03 at 11 16 39

CleanShot 2023-10-03 at 11 16 52

CleanShot 2023-10-03 at 11 17 04

Type of change

  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Example configuration

Additional information

  • This PR fixes or closes issue: fixes #
  • This PR is related to issue or discussion:
  • Link to documentation pull request:

Checklist

  • The code change is tested and works locally.
  • There is no commented out code in this PR.
  • Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

@bramkragten
Copy link
Member

We should make the UI editor backwards compatible, if there is an entity param in the condition, we should add condition: state to it so the UI editor will just work.

@piitaya piitaya marked this pull request as draft September 28, 2023 14:24
@piitaya piitaya force-pushed the conditional_card_responsive branch from 8b08666 to 3a03abb Compare September 29, 2023 09:17
@piitaya
Copy link
Member Author

piitaya commented Sep 29, 2023

I added screen sizes to the UI editor, I improved the editor and improved performance for the case with only one condition.

@piitaya piitaya marked this pull request as ready for review September 29, 2023 11:11
@piitaya piitaya requested a review from bramkragten September 29, 2023 11:11
@piitaya piitaya force-pushed the conditional_card_responsive branch from d57cf2a to 22d1184 Compare September 29, 2023 13:56
@piitaya piitaya changed the title Add responsive condition to conditional card. Add screen condition to conditional card. Oct 3, 2023
@piitaya piitaya force-pushed the conditional_card_responsive branch from 54c43fc to d473a30 Compare October 4, 2023 12:20
@@ -352,22 +325,13 @@ export class HuiConditionalCardEditor
.condition {
margin-top: 8px;
border: 1px solid var(--divider-color);
Copy link
Member

Choose a reason for hiding this comment

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

(unrelated, but we should add a border-radius)

@bramkragten bramkragten merged commit 86c014b into dev Oct 9, 2023
@bramkragten bramkragten deleted the conditional_card_responsive branch October 9, 2023 13:06
@bramkragten
Copy link
Member

We do need docs for this :-)

@github-actions github-actions bot locked and limited conversation to collaborators Oct 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants