Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Make ToastContainer compatible with RTL layout #8230

Merged
merged 14 commits into from
Apr 14, 2022
Merged

Make ToastContainer compatible with RTL layout #8230

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9e81556
Fix _ToastContainer.scss
luixxiul Apr 5, 2022
16dcdca
Merge branch 'develop' into rtl-pick
luixxiul Apr 6, 2022
ed5704c
Merge branch 'develop' into rtl-pick
luixxiul Apr 7, 2022
11fd22a
Merge branch 'develop' into rtl-pick
luixxiul Apr 8, 2022
c41948c
Improve existing rules
luixxiul Apr 8, 2022
9f94cf4
Set the count indicator on the end side of the div
luixxiul Apr 8, 2022
2e5b2a5
Merge branch 'develop' into rtl-pick
luixxiul Apr 8, 2022
419bc5f
Merge branch 'develop' into rtl-pick
luixxiul Apr 8, 2022
bf6af7c
Remove the vertical-align property since it has no longer effect
luixxiul Apr 9, 2022
83916a8
Merge branch 'develop' into rtl-pick
luixxiul Apr 9, 2022
c793887
Merge branch 'develop' into rtl-pick
luixxiul Apr 11, 2022
294b21b
Merge branch 'develop' into rtl-pick
luixxiul Apr 13, 2022
79bd8f9
Merge branch 'develop' into rtl-pick
luixxiul Apr 13, 2022
f0ed532
Merge branch 'develop' into rtl-pick
luixxiul Apr 14, 2022
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
18 changes: 7 additions & 11 deletions res/css/structures/_ToastContainer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,26 +108,25 @@ limitations under the License.
}

.mx_Toast_title {
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.

I don't think we need a flexbox here? What is it fixing?

Copy link
Contributor Author

@luixxiul luixxiul Apr 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

  • it aligns the title and the icon counter (if any) horizontally
  • it assures the gap between the title and the icon counter without using margin padding-left: 8px;
  • it automatically calculates the flow of the child elements

I edited the first post to explain the reason why flexbox should realize what is intended here.

align-items: center;
column-gap: 8px;
width: 100%;
box-sizing: border-box;

h2 {
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
font-size: $font-15px;
font-weight: 600;
display: inline;
width: auto;
vertical-align: middle;
}

span {
padding-left: 8px;
float: right;
Copy link
Member

Choose a reason for hiding this comment

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

this might have been deliberate, even in a RTL language - will have to check with design.

Copy link
Contributor Author

@luixxiul luixxiul Apr 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I don't think this is intended ↓

before2

Unless this would be expected to cover something in addition to <span>{ countIndicator }</span>, this should work.

.mx_Toast_title_countIndicator {
font-size: $font-12px;
line-height: $font-22px;
color: $secondary-content;
margin-inline-start: auto; // on the end side of the div
}
}

Expand All @@ -137,17 +136,14 @@ limitations under the License.
}

.mx_Toast_buttons {
float: right;
display: flex;
justify-content: flex-end;
column-gap: 5px;

.mx_AccessibleButton {
min-width: 96px;
box-sizing: border-box;
}

.mx_AccessibleButton + .mx_AccessibleButton {
margin-left: 5px;
}
}

.mx_Toast_description {
Expand Down
2 changes: 1 addition & 1 deletion src/components/structures/ToastContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
titleElement = (
<div className="mx_Toast_title">
<h2>{ title }</h2>
<span>{ countIndicator }</span>
<span className="mx_Toast_title_countIndicator">{ countIndicator }</span>
</div>
);
}
Expand Down