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 support for state content customization in tile card #18180

Merged
merged 7 commits into from
Oct 24, 2023

Conversation

piitaya
Copy link
Member

@piitaya piitaya commented Oct 10, 2023

Card

The state can be replaced by one or multiple attribute to avoid the usage of templating. state and last-changed key are allowed too. An option as been added to totally state the state.

CleanShot 2023-10-10 at 12 16 57

Config

Two new options has been added.

hide_state?: boolean
state_content?: string | string[]

Editor

The editor uses a multiple select to let the user choose attributes. Items are draggable for re-ordering.

CleanShot 2023-10-16 at 14 47 44

Demo

CleanShot.2023-10-16.at.14.45.23.mp4

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:

@piitaya piitaya added Tile card Do Not Review PR is not ready for any kind of review labels Oct 10, 2023
private async _createSortable() {
const Sortable = await loadSortable();
this._sortable = new Sortable(
this.shadowRoot!.querySelector("ha-chip-set")!,
Copy link
Member

Choose a reason for hiding this comment

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

We should probably also add sort support to the checkbox option then?

Copy link
Member Author

Choose a reason for hiding this comment

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

I think we should force the dropdown layout if reorder selector option is true. We already do that if there is a custom value. Reordering checkbox is weird.

Copy link
Member

Choose a reason for hiding this comment

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

works for me

@piitaya piitaya force-pushed the tile-card-state-content branch 3 times, most recently from 4e9955c to b920cda Compare October 16, 2023 12:10
@piitaya piitaya marked this pull request as ready for review October 16, 2023 12:52
@piitaya
Copy link
Member Author

piitaya commented Oct 16, 2023

@bramkragten I also added a hide_state option. We can also use state_content: none but having a hide_state boolean is easier to understand.

@piitaya piitaya force-pushed the tile-card-state-content branch 2 times, most recently from e8f6eba to 50fe8fd Compare October 16, 2023 13:10
@piitaya piitaya removed the Do Not Review PR is not ready for any kind of review label Oct 18, 2023
@frenck frenck added the Noteworthy Marks a PR as noteworthy and should be in the release notes (in case it normally would not appear) label Oct 23, 2023
@frenck frenck requested a review from bramkragten October 23, 2023 08:20
this.selector.select?.reorder
) {
this._createSortable();
} else if (!this.value?.length && this._sortable) {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
} else if (!this.value?.length && this._sortable) {
} else if (this._sortable && (!this.selector.select?.reorder || !this.value?.length)) {

bramkragten
bramkragten previously approved these changes Oct 23, 2023
@piitaya piitaya force-pushed the tile-card-state-content branch from 039bb3b to 1dcb95e Compare October 23, 2023 15:01
@piitaya piitaya enabled auto-merge (squash) October 23, 2023 16:25
@frenck frenck requested a review from bramkragten October 23, 2023 21:02
@piitaya piitaya merged commit 6ffc062 into dev Oct 24, 2023
12 checks passed
@piitaya piitaya deleted the tile-card-state-content branch October 24, 2023 10:08
@github-actions github-actions bot locked and limited conversation to collaborators Oct 23, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla-signed hacktoberfest Noteworthy Marks a PR as noteworthy and should be in the release notes (in case it normally would not appear) Tile card
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants