Skip to content

Rtl changes#12693

Merged
bramkragten merged 3 commits intohome-assistant:devfrom
yosilevy:RTL-changes
May 16, 2022
Merged

Rtl changes#12693
bramkragten merged 3 commits intohome-assistant:devfrom
yosilevy:RTL-changes

Conversation

@yosilevy
Copy link
Contributor

Breaking change

Proposed change

Removal of host-context to handle RTL so that we support Firefox and Safari properly

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:

margin-left: var(--mdc-list-item-graphic-margin, 16px) !important;
margin-right: 0px !important;
span.material-icons:first-of-type {
margin-inline-start: 0px !important;
Copy link
Member

Choose a reason for hiding this comment

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

Do we need important?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes because otherwise margin-right overwrites it with 16 from

:host([graphic=avatar]) .mdc-deprecated-list-item__graphic, :host([graphic=medium]) .mdc-deprecated-list-item__graphic, :host([graphic=large]) .mdc-deprecated-list-item__graphic, :host([graphic=control]) .mdc-deprecated-list-item__graphic {
    margin-left: 0;
    margin-right: var(--mdc-list-item-graphic-margin, 16px);
}

Copy link
Member

Choose a reason for hiding this comment

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

You should try to use the exact same selector used as you want to override, then you dont need important.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

color: inherit;
}
.header_title {
margin-right: 40px;
Copy link
Member

Choose a reason for hiding this comment

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

Keep this line

Copy link
Contributor Author

Choose a reason for hiding this comment

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

OK. Done

Comment on lines +187 to +188
inset-inline-start: 16px !important;
inset-inline-end: initial !important;
Copy link
Member

Choose a reason for hiding this comment

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

Do we need important?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes otherwise overruled by:

.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
    max-width: calc(100% - 48px);
    left: 48px;
    right: initial;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

@bramkragten
Copy link
Member

bramkragten commented May 16, 2022

I think all of this could work without important if we use the correct selectors

@yosilevy
Copy link
Contributor Author

Many get overruled by MWC

@bramkragten bramkragten merged commit 1bd760b into home-assistant:dev May 16, 2022
}
.card-menu {
float: right;
float: var(--float-end, right);
Copy link
Member

@balloob balloob May 17, 2022

Choose a reason for hiding this comment

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

image

}
.card-menu {
float: right;
float: var(--float-end, right);
Copy link
Member

Choose a reason for hiding this comment

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

image

}
.card-menu {
float: right;
float: var(--float-end, right);
Copy link
Member

Choose a reason for hiding this comment

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

image

this.style.direction = direction;
document.dir = direction;
this.style.setProperty("--direction", direction);
this.style.setProperty("--float-end", "left");
Copy link
Member

Choose a reason for hiding this comment

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

This should be right for LTR.

@balloob
Copy link
Member

balloob commented May 17, 2022

float-end fix in #12707

@github-actions github-actions bot locked and limited conversation to collaborators May 18, 2022
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.

4 participants