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

Commit 376533e

Browse files
t3chguyt3chguy
authored
Merge pull request #3553 from maunium/compact-reply-rendering
2 parents f1bb223 + 5d0afdb commit 376533e

File tree

18 files changed

+637
-289
lines changed

18 files changed

+637
-289
lines changed

‎res/css/_components.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@
164164
@import "./views/messages/_MEmoteBody.scss";
165165
@import "./views/messages/_MFileBody.scss";
166166
@import "./views/messages/_MImageBody.scss";
167+
@import "./views/messages/_MImageReplyBody.scss";
167168
@import "./views/messages/_MJitsiWidgetEvent.scss";
168169
@import "./views/messages/_MNoticeBody.scss";
169170
@import "./views/messages/_MStickerBody.scss";
@@ -213,6 +214,7 @@
213214
@import "./views/rooms/_PinnedEventTile.scss";
214215
@import "./views/rooms/_PresenceLabel.scss";
215216
@import "./views/rooms/_ReplyPreview.scss";
217+
@import "./views/rooms/_ReplyTile.scss";
216218
@import "./views/rooms/_RoomBreadcrumbs.scss";
217219
@import "./views/rooms/_RoomHeader.scss";
218220
@import "./views/rooms/_RoomList.scss";

‎res/css/views/elements/_ReplyThread.scss

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,46 @@ limitations under the License.
1818
margin-top: 0;
1919
}
2020

21-
.mx_ReplyThread .mx_DateSeparator {
22-
font-size: 1em !important;
23-
margin-top: 0;
24-
margin-bottom: 0;
25-
padding-bottom: 1px;
26-
bottom: -5px;
27-
}
28-
2921
.mx_ReplyThread_show {
3022
cursor: pointer;
3123
}
3224

3325
blockquote.mx_ReplyThread {
3426
margin-left: 0;
27+
margin-right: 0;
28+
margin-bottom: 8px;
3529
padding-left: 10px;
36-
border-left: 4px solid $blockquote-bar-color;
30+
border-left: 4px solid $button-bg-color;
31+
32+
&.mx_ReplyThread_color1 {
33+
border-left-color: $username-variant1-color;
34+
}
35+
36+
&.mx_ReplyThread_color2 {
37+
border-left-color: $username-variant2-color;
38+
}
39+
40+
&.mx_ReplyThread_color3 {
41+
border-left-color: $username-variant3-color;
42+
}
43+
44+
&.mx_ReplyThread_color4 {
45+
border-left-color: $username-variant4-color;
46+
}
47+
48+
&.mx_ReplyThread_color5 {
49+
border-left-color: $username-variant5-color;
50+
}
51+
52+
&.mx_ReplyThread_color6 {
53+
border-left-color: $username-variant6-color;
54+
}
55+
56+
&.mx_ReplyThread_color7 {
57+
border-left-color: $username-variant7-color;
58+
}
59+
60+
&.mx_ReplyThread_color8 {
61+
border-left-color: $username-variant8-color;
62+
}
3763
}

‎res/css/views/messages/_MFileBody.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,12 @@ limitations under the License.
8383
mask-size: cover;
8484
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
8585
background-color: $message-body-panel-icon-fg-color;
86-
width: 13px;
86+
width: 15px;
8787
height: 15px;
8888

8989
position: absolute;
9090
top: 8px;
91-
left: 9px;
91+
left: 8px;
9292
}
9393
}
9494

‎res/css/views/messages/_MImageReplyBody.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
Copyright 2020 Tulir Asokan <[email protected]>
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+
.mx_MImageReplyBody {
18+
display: flex;
19+
20+
.mx_MImageBody_thumbnail_container {
21+
flex: 1;
22+
margin-right: 4px;
23+
}
24+
25+
.mx_MImageReplyBody_info {
26+
flex: 1;
27+
28+
.mx_MImageReplyBody_sender {
29+
grid-area: sender;
30+
}
31+
32+
.mx_MImageReplyBody_filename {
33+
grid-area: filename;
34+
}
35+
}
36+
}
37+

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,24 @@ limitations under the License.
2929
}
3030

3131
.mx_ReplyPreview_header {
32-
margin: 12px;
32+
margin: 8px;
3333
color: $primary-fg-color;
3434
font-weight: 400;
3535
opacity: 0.4;
3636
}
3737

38+
.mx_ReplyPreview_tile {
39+
margin: 0 8px;
40+
}
41+
3842
.mx_ReplyPreview_title {
3943
float: left;
4044
}
4145

4246
.mx_ReplyPreview_cancel {
4347
float: right;
4448
cursor: pointer;
49+
display: flex;
4550
}
4651

4752
.mx_ReplyPreview_clear {

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/*
2+
Copyright 2020 Tulir Asokan <[email protected]>
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+
.mx_ReplyTile {
18+
padding-top: 2px;
19+
padding-bottom: 2px;
20+
font-size: $font-14px;
21+
position: relative;
22+
line-height: $font-16px;
23+
24+
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
25+
mask-image: url("$(res)/img/element-icons/speaker.svg");
26+
}
27+
28+
&.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
29+
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
30+
}
31+
32+
.mx_MFileBody {
33+
.mx_MFileBody_info {
34+
margin: 5px 0;
35+
}
36+
37+
.mx_MFileBody_download {
38+
display: none;
39+
}
40+
}
41+
}
42+
43+
.mx_ReplyTile > a {
44+
display: flex;
45+
flex-direction: column;
46+
text-decoration: none;
47+
color: $primary-fg-color;
48+
}
49+
50+
.mx_ReplyTile .mx_RedactedBody {
51+
padding: 4px 0 2px 20px;
52+
53+
&::before {
54+
height: 13px;
55+
width: 13px;
56+
top: 5px;
57+
}
58+
}
59+
60+
// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
61+
.mx_ReplyTile .mx_EventTile_content {
62+
$reply-lines: 2;
63+
$line-height: $font-22px;
64+
65+
pointer-events: none;
66+
67+
text-overflow: ellipsis;
68+
display: -webkit-box;
69+
-webkit-box-orient: vertical;
70+
-webkit-line-clamp: $reply-lines;
71+
line-height: $line-height;
72+
73+
.mx_EventTile_body.mx_EventTile_bigEmoji {
74+
line-height: $line-height !important;
75+
// Override the big emoji override
76+
font-size: $font-14px !important;
77+
}
78+
79+
// Hide line numbers
80+
.mx_EventTile_lineNumbers {
81+
display: none;
82+
}
83+
84+
// Hack to cut content in <pre> tags too
85+
.mx_EventTile_pre_container > pre {
86+
overflow: hidden;
87+
text-overflow: ellipsis;
88+
display: -webkit-box;
89+
-webkit-box-orient: vertical;
90+
-webkit-line-clamp: $reply-lines;
91+
padding: 4px;
92+
}
93+
94+
.markdown-body blockquote,
95+
.markdown-body dl,
96+
.markdown-body ol,
97+
.markdown-body p,
98+
.markdown-body pre,
99+
.markdown-body table,
100+
.markdown-body ul {
101+
margin-bottom: 4px;
102+
}
103+
}
104+
105+
.mx_ReplyTile.mx_ReplyTile_info {
106+
padding-top: 0;
107+
}
108+
109+
.mx_ReplyTile .mx_SenderProfile {
110+
color: $primary-fg-color;
111+
font-size: $font-14px;
112+
display: inline-block; /* anti-zalgo, with overflow hidden */
113+
overflow: hidden;
114+
cursor: pointer;
115+
padding-left: 0; /* left gutter */
116+
padding-bottom: 0;
117+
padding-top: 0;
118+
margin: 0;
119+
line-height: $font-17px;
120+
/* the next three lines, along with overflow hidden, truncate long display names */
121+
white-space: nowrap;
122+
text-overflow: ellipsis;
123+
}

‎res/img/element-icons/speaker.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/views/elements/ImageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
3333
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
3434
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
3535
import { normalizeWheelEvent } from "../../../utils/Mouse";
36+
import { IDialogProps } from '../dialogs/IDialogProps';
3637

3738
// Max scale to keep gaps around the image
3839
const MAX_SCALE = 0.95;
@@ -43,14 +44,13 @@ const ZOOM_COEFFICIENT = 0.0025;
4344
// If we have moved only this much we can zoom
4445
const ZOOM_DISTANCE = 10;
4546

46-
interface IProps {
47+
interface IProps extends IDialogProps {
4748
src: string; // the source of the image being displayed
4849
name?: string; // the main title ('name') for the image
4950
link?: string; // the link (if any) applied to the name of the image
5051
width?: number; // width of the image src in pixels
5152
height?: number; // height of the image src in pixels
5253
fileSize?: number; // size of the image src in bytes
53-
onFinished(): void; // callback when the lightbox is dismissed
5454

5555
// the event (if any) that the Image is displaying. Used for event-specific stuff like
5656
// redactions, senders, timestamps etc. Other descriptors are taken from the explicit

0 commit comments

Comments
 (0)