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.

Sign up for GitHub

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

Update developer-tools-state.js: fix alignment for ha-tips #17608

Merged
merged 1 commit into from
Oct 9, 2023
Merged

Update developer-tools-state.js: fix alignment for ha-tips #17608

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/panels/developer-tools/state/developer-tools-state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
ha-tip {
display: flex;
Copy link
Member

Choose a reason for hiding this comment

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

Can we remove display: flex, I feel like ha-tip should handle that?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

W/o flex:
image

Copy link
Contributor Author

@ildar170975 ildar170975 Aug 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Probably the correct style should be defined for the "standard" ha-tip component. Now it is "block" - which looks ok when text-align=center:
image
but not ok when text-align=left:
image

So, probably we need to change a style for the ha-tip component itself (to display=flex).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I can propose a PR for ha-tip component if you agree this way.

Copy link
Member

Choose a reason for hiding this comment

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

It will need more than just display: flex (the icon changes size for example, and the text is not vertically centered) but yeah, that's fine by me.

Copy link
Contributor Author

@ildar170975 ildar170975 Aug 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Tested with display: flex for the "ha-tip" component - and I do not like results.

Check this for some iPhone with the current default settings:
image

And with these:

    display: flex;
    justify-content: center;
    align-items: center;

image

Or with this (align-items: start):
image

The default style looks much nicer!
So I propose to use the display: flex style for Dev tools -> Set state only, not globally.

Another unrelated proposal: let's get rid of the "Tip!" label, the "bulb" icon is self-explanatory (btw this label is hidden in "Dev tools -> Set state"):

image

padding: 8px 0;
text-align: left;
}

th.attributes {
Expand Down