Skip to content

Convert state-card-display to LitElement and use timestamp display#8150

Merged
spacegaier merged 6 commits intohome-assistant:devfrom
spacegaier:state-card-display-lit
Jan 14, 2021
Merged

Convert state-card-display to LitElement and use timestamp display#8150
spacegaier merged 6 commits intohome-assistant:devfrom
spacegaier:state-card-display-lit

Conversation

@spacegaier
Copy link
Copy Markdown
Member

@spacegaier spacegaier commented Jan 13, 2021

Breaking change

Proposed change

Convert state-card-display to LitElement. Driving force behind the change was that I wanted to use the hui-timestamp-display in it.

Before:
image

After:
image

One minor issue: The datetime value is a bit too long and crosses into the padding area of the card, because it is classified as having a unit of measure which prevents wrapping. But without it, it looks slightly weird because of the comma at the end of the first line.

image

image

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
Copy Markdown
Member

About the issue, the value can't be more to the left?

Comment on lines +43 to +50
${computeDomain(this.stateObj?.entity_id) === "sensor" &&
this.stateObj.attributes.device_class === "timestamp" &&
!UNAVAILABLE_STATES.includes(this.stateObj.state)
? html` <hui-timestamp-display
.hass=${this.hass}
.ts=${new Date(this.stateObj.state)}
.format=${"datetime"}
></hui-timestamp-display>`
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can we do this inside computeStateDisplay?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I had thought about but decided against because so far computeStateDisplay never returns any HTML but always only a string representation of the state and leaves the rest up to the caller.

@spacegaier
Copy link
Copy Markdown
Member Author

About the issue, the value can't be more to the left?

I will remove the max-width: 40% from the state display. That is the reason why it gets pushed to the right if it is no allowed to line break.
The state name will take up as much space as possible with flex-grow and then show ellipsis which is fine and consistent with other places int he UI.

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
@spacegaier spacegaier merged commit 1aa40cb into home-assistant:dev Jan 14, 2021
@spacegaier spacegaier deleted the state-card-display-lit branch January 14, 2021 11:49
@github-actions github-actions bot locked and limited conversation to collaborators Jan 15, 2021
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.

3 participants