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

Commit 8baa46b

Browse files
t3chguyt3chguy
authored
Fix baseline misalignment of thread panel summary by deduplication (#8413)
1 parent 5a5a792 commit 8baa46b

File tree

10 files changed

+147
-143
lines changed

10 files changed

+147
-143
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,7 @@
263263
@import "./views/rooms/_SearchBar.scss";
264264
@import "./views/rooms/_SendMessageComposer.scss";
265265
@import "./views/rooms/_Stickers.scss";
266+
@import "./views/rooms/_ThreadSummary.scss";
266267
@import "./views/rooms/_TopUnreadMessagesBar.scss";
267268
@import "./views/rooms/_VoiceRecordComposerTile.scss";
268269
@import "./views/rooms/_WhoIsTypingTile.scss";

‎res/css/views/right_panel/_ThreadPanel.scss‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ limitations under the License.
140140
// Account for scrollbar when hovering
141141
padding-top: 0;
142142

143-
.mx_ThreadInfo {
143+
.mx_ThreadSummary {
144144
position: relative;
145145
padding-right: 11px;
146146

@@ -257,28 +257,14 @@ limitations under the License.
257257

258258
.mx_ThreadPanel_replies {
259259
margin-top: 8px;
260-
}
260+
display: flex;
261+
align-items: center;
262+
position: relative;
261263

262-
.mx_ThreadPanel_repliesSummary {
263-
&::before {
264-
content: "";
265-
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
266-
mask-position: center;
267-
display: inline-block;
268-
height: 18px;
269-
min-width: 18px;
270-
background-color: currentColor;
271-
mask-repeat: no-repeat;
272-
mask-size: contain;
273-
margin-right: 8px;
274-
vertical-align: middle;
264+
.mx_ThreadSummary_threads-amount {
265+
color: $secondary-content;
266+
font-size: $font-12px;
275267
}
276-
277-
color: $secondary-content;
278-
font-weight: 600;
279-
float: left;
280-
margin-right: 12px;
281-
font-size: $font-12px;
282268
}
283269

284270
.mx_ThreadPanel_viewInRoom::before {

‎res/css/views/right_panel/_TimelineCard.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ limitations under the License.
6969
margin-right: 8px;
7070
}
7171

72-
.mx_ThreadInfo {
72+
.mx_ThreadSummary {
7373
margin-left: 36px;
7474
margin-right: 0;
7575
max-width: min(calc(100% - 36px), 600px);

‎res/css/views/rooms/_EventBubbleTile.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ limitations under the License.
3737
margin-left: 49px;
3838
font-size: $font-14px;
3939

40-
.mx_ThreadInfo {
40+
.mx_ThreadSummary {
4141
clear: both;
4242
width: fit-content;
4343
}
@@ -172,7 +172,7 @@ limitations under the License.
172172
margin-right: 32px;
173173
}
174174

175-
.mx_ThreadInfo {
175+
.mx_ThreadSummary {
176176
float: right;
177177
margin-right: calc(-1 * var(--gutterSize));
178178
}

‎res/css/views/rooms/_EventTile.scss‎

Lines changed: 6 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ $left-gutter: 64px;
7777
background-color: $alert;
7878
}
7979

80-
.mx_ThreadInfo,
80+
.mx_ThreadSummary,
8181
.mx_ThreadSummaryIcon {
8282
margin-left: 64px;
8383
}
@@ -304,15 +304,15 @@ $left-gutter: 64px;
304304
.mx_RoomView_timeline_rr_enabled {
305305
.mx_EventTile[data-layout=group] {
306306

307-
.mx_ThreadInfo,
307+
.mx_ThreadSummary,
308308
.mx_ThreadSummaryIcon,
309309
.mx_EventTile_line {
310310
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
311311
margin-right: 110px;
312312
min-height: $font-14px;
313313
}
314314

315-
.mx_ThreadInfo {
315+
.mx_ThreadSummary {
316316
max-width: min(calc(100% - $left-gutter - 110px), 600px); // leave space on both left & right gutters
317317
}
318318
}
@@ -680,8 +680,9 @@ $left-gutter: 64px;
680680
}
681681
}
682682

683+
.mx_ThreadPanel_replies::before,
683684
.mx_ThreadSummaryIcon::before,
684-
.mx_ThreadInfo::before {
685+
.mx_ThreadSummary::before {
685686
content: "";
686687
display: inline-block;
687688
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
@@ -707,113 +708,12 @@ $left-gutter: 64px;
707708
}
708709
}
709710

710-
.mx_ThreadInfo {
711-
min-width: 267px;
712-
max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters
713-
width: fit-content;
714-
height: 40px;
715-
position: relative;
716-
background-color: $system;
717-
padding-left: 12px;
718-
display: flex;
719-
align-items: center;
720-
border-radius: 8px;
721-
padding-right: 16px;
722-
margin-top: 8px;
723-
font-size: $font-12px;
724-
color: $secondary-content;
725-
box-sizing: border-box;
726-
justify-content: flex-start;
727-
clear: both;
728-
overflow: hidden;
729-
border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
730-
731-
.mx_ThreadInfo_chevron {
732-
position: absolute;
733-
top: 0;
734-
right: 0;
735-
bottom: 0;
736-
width: 60px;
737-
box-sizing: border-box;
738-
// XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
739-
background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
740-
741-
opacity: 0;
742-
transform: translateX(60px);
743-
transition: all .1s ease-in-out;
744-
745-
&::before {
746-
content: '';
747-
position: absolute;
748-
top: 50%;
749-
right: 12px;
750-
transform: translateY(-50%);
751-
width: 12px;
752-
height: 12px;
753-
mask-image: url('$(res)/img/compound/chevron-right-12px.svg');
754-
mask-position: center;
755-
mask-size: contain;
756-
mask-repeat: no-repeat;
757-
background-color: $secondary-content;
758-
}
759-
}
760-
761-
&:hover,
762-
&:focus {
763-
cursor: pointer;
764-
border-color: $quinary-content;
765-
766-
.mx_ThreadInfo_chevron {
767-
opacity: 1;
768-
transform: translateX(0);
769-
}
770-
}
771-
772-
&::before {
773-
align-self: center; // v-align the threads icon
774-
}
775-
}
776-
777-
.mx_MessagePanel_narrow .mx_ThreadInfo {
711+
.mx_MessagePanel_narrow .mx_ThreadSummary {
778712
min-width: initial;
779713
max-width: initial;
780714
width: initial;
781715
}
782716

783-
$threadInfoLineHeight: calc(2 * $font-12px);
784-
785-
.mx_ThreadInfo_sender {
786-
font-weight: $font-semi-bold;
787-
line-height: $threadInfoLineHeight;
788-
text-overflow: ellipsis;
789-
overflow: hidden;
790-
white-space: nowrap;
791-
}
792-
793-
.mx_ThreadInfo_content {
794-
text-overflow: ellipsis;
795-
overflow: hidden;
796-
white-space: nowrap;
797-
margin-left: 4px;
798-
font-size: $font-12px;
799-
line-height: $threadInfoLineHeight;
800-
color: $secondary-content;
801-
flex: 1;
802-
}
803-
804-
.mx_ThreadInfo_avatar {
805-
float: left;
806-
margin-right: 8px;
807-
}
808-
809-
.mx_ThreadInfo_threads-amount {
810-
font-weight: $font-semi-bold;
811-
position: relative;
812-
padding: 0 12px 0 8px;
813-
white-space: nowrap;
814-
line-height: $threadInfoLineHeight;
815-
}
816-
817717
.mx_EventTile[data-shape=ThreadsList] {
818718
--topOffset: 20px;
819719
--leftOffset: 46px;

‎res/css/views/rooms/_IRCLayout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ $irc-line-height: $font-18px;
4040
margin-right: $right-padding;
4141
}
4242

43-
.mx_ThreadInfo {
43+
.mx_ThreadSummary {
4444
margin-right: 0;
4545
margin-left: 0;
4646
}

‎res/css/views/rooms/_ThreadSummary.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
$left-gutter: 64px; // From _EventTile.scss
18+
$threadSummaryLineHeight: calc(2 * $font-12px);
19+
20+
.mx_ThreadSummary {
21+
min-width: 267px;
22+
max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters
23+
width: fit-content;
24+
height: 40px;
25+
position: relative;
26+
background-color: $system;
27+
padding-left: $spacing-12;
28+
display: flex;
29+
align-items: center;
30+
border-radius: 8px;
31+
padding-right: $spacing-16;
32+
margin-top: $spacing-8;
33+
font-size: $font-12px;
34+
color: $secondary-content;
35+
box-sizing: border-box;
36+
justify-content: flex-start;
37+
clear: both;
38+
overflow: hidden;
39+
border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
40+
41+
.mx_ThreadSummary_chevron {
42+
position: absolute;
43+
top: 0;
44+
right: 0;
45+
bottom: 0;
46+
width: 60px;
47+
box-sizing: border-box;
48+
// XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
49+
background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
50+
51+
opacity: 0;
52+
transform: translateX(60px);
53+
transition: all .1s ease-in-out;
54+
55+
&::before {
56+
content: '';
57+
position: absolute;
58+
top: 50%;
59+
right: $spacing-12;
60+
transform: translateY(-50%);
61+
width: 12px;
62+
height: 12px;
63+
mask-image: url('$(res)/img/compound/chevron-right-12px.svg');
64+
mask-position: center;
65+
mask-size: contain;
66+
mask-repeat: no-repeat;
67+
background-color: $secondary-content;
68+
}
69+
}
70+
71+
&:hover,
72+
&:focus {
73+
cursor: pointer;
74+
border-color: $quinary-content;
75+
76+
.mx_ThreadSummary_chevron {
77+
opacity: 1;
78+
transform: translateX(0);
79+
}
80+
}
81+
82+
&::before {
83+
align-self: center; // v-align the threads icon
84+
}
85+
}
86+
87+
// XXX: these classes are re-used outside of the component
88+
.mx_ThreadSummary_threads-amount {
89+
font-weight: $font-semi-bold;
90+
position: relative;
91+
padding: 0 $spacing-12 0 $spacing-8;
92+
white-space: nowrap;
93+
line-height: $threadSummaryLineHeight;
94+
}
95+
96+
.mx_ThreadSummary_sender {
97+
font-weight: $font-semi-bold;
98+
line-height: $threadSummaryLineHeight;
99+
text-overflow: ellipsis;
100+
overflow: hidden;
101+
white-space: nowrap;
102+
}
103+
104+
.mx_ThreadSummary_content {
105+
text-overflow: ellipsis;
106+
overflow: hidden;
107+
white-space: nowrap;
108+
margin-left: $spacing-4;
109+
font-size: $font-12px;
110+
line-height: $threadSummaryLineHeight;
111+
color: $secondary-content;
112+
flex: 1;
113+
}
114+
115+
.mx_ThreadSummary_avatar {
116+
margin-right: $spacing-8;
117+
}

‎src/components/views/rooms/EventTile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -517,7 +517,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
517517
}
518518

519519
return <div className="mx_ThreadPanel_replies">
520-
<span className="mx_ThreadPanel_repliesSummary">
520+
<span className="mx_ThreadSummary_threads-amount">
521521
{ this.state.thread.length }
522522
</span>
523523
<ThreadMessagePreview thread={this.state.thread} />

0 commit comments

Comments
 (0)