Skip to content
This repository was archived by the owner on May 18, 2025. It is now read-only.

Commit 623317c

Browse files
committed
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/ts/8
� Conflicts: � src/components/structures/MessagePanel.tsx � src/components/structures/TimelinePanel.tsx
2 parents 4e6260e + 78f1748 commit 623317c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1517
-712
lines changed

res/css/structures/_LeftPanel.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,29 @@ $roomListCollapsedWidth: 68px;
111111
}
112112
}
113113

114+
.mx_LeftPanel_dialPadButton {
115+
width: 32px;
116+
height: 32px;
117+
border-radius: 8px;
118+
background-color: $roomlist-button-bg-color;
119+
position: relative;
120+
margin-left: 8px;
121+
122+
&::before {
123+
content: '';
124+
position: absolute;
125+
top: 8px;
126+
left: 8px;
127+
width: 16px;
128+
height: 16px;
129+
mask-image: url('$(res)/img/element-icons/call/dialpad.svg');
130+
mask-position: center;
131+
mask-size: contain;
132+
mask-repeat: no-repeat;
133+
background: $secondary-fg-color;
134+
}
135+
}
136+
114137
.mx_LeftPanel_exploreButton {
115138
width: 32px;
116139
height: 32px;
@@ -185,6 +208,12 @@ $roomListCollapsedWidth: 68px;
185208
flex-direction: column;
186209
justify-content: center;
187210

211+
.mx_LeftPanel_dialPadButton {
212+
margin-left: 0;
213+
margin-top: 8px;
214+
background-color: transparent;
215+
}
216+
188217
.mx_LeftPanel_exploreButton {
189218
margin-left: 0;
190219
margin-top: 8px;

res/css/structures/_RoomStatusBar.scss

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ limitations under the License.
112112

113113
.mx_AccessibleButton {
114114
padding: 5px 10px;
115-
padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
115+
padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
116116
display: inline-block;
117117
position: relative;
118118

@@ -128,23 +128,21 @@ limitations under the License.
128128
mask-repeat: no-repeat;
129129
mask-position: center;
130130
mask-size: contain;
131+
width: 18px;
132+
height: 18px;
133+
top: 50%; // text sizes are dynamic
134+
transform: translateY(-50%);
131135
}
132136

133137
&.mx_RoomStatusBar_unsentCancelAllBtn::before {
134138
mask-image: url('$(res)/img/element-icons/trashcan.svg');
135-
width: 12px;
136-
height: 16px;
137-
top: calc(50% - 8px); // text sizes are dynamic
138139
}
139140

140141
&.mx_RoomStatusBar_unsentResendAllBtn {
141142
padding-left: 34px; // 28px from above, but +6px to account for the wider icon
142143

143144
&::before {
144145
mask-image: url('$(res)/img/element-icons/retry.svg');
145-
width: 18px;
146-
height: 18px;
147-
top: calc(50% - 9px); // text sizes are dynamic
148146
}
149147
}
150148
}
Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/*
22
Copyright 2015, 2016 OpenMarket Ltd
3+
Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
34
45
Licensed under the Apache License, Version 2.0 (the "License");
56
you may not use this file except in compliance with the License.
@@ -15,16 +16,69 @@ limitations under the License.
1516
*/
1617

1718
.mx_MessageContextMenu {
18-
padding: 6px;
19-
}
2019

21-
.mx_MessageContextMenu_field {
22-
display: block;
23-
padding: 3px 6px 3px 6px;
24-
cursor: pointer;
25-
white-space: nowrap;
26-
}
20+
.mx_IconizedContextMenu_icon {
21+
width: 16px;
22+
height: 16px;
23+
display: block;
24+
25+
&::before {
26+
content: '';
27+
width: 16px;
28+
height: 16px;
29+
display: block;
30+
mask-position: center;
31+
mask-size: contain;
32+
mask-repeat: no-repeat;
33+
background: $primary-fg-color;
34+
}
35+
}
36+
37+
.mx_MessageContextMenu_iconCollapse::before {
38+
mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
39+
}
40+
41+
.mx_MessageContextMenu_iconReport::before {
42+
mask-image: url('$(res)/img/element-icons/warning-badge.svg');
43+
}
44+
45+
.mx_MessageContextMenu_iconLink::before {
46+
mask-image: url('$(res)/img/element-icons/link.svg');
47+
}
48+
49+
.mx_MessageContextMenu_iconPermalink::before {
50+
mask-image: url('$(res)/img/element-icons/room/share.svg');
51+
}
52+
53+
.mx_MessageContextMenu_iconUnhidePreview::before {
54+
mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
55+
}
56+
57+
.mx_MessageContextMenu_iconForward::before {
58+
mask-image: url('$(res)/img/element-icons/message/fwd.svg');
59+
}
60+
61+
.mx_MessageContextMenu_iconRedact::before {
62+
mask-image: url('$(res)/img/element-icons/trashcan.svg');
63+
}
64+
65+
.mx_MessageContextMenu_iconResend::before {
66+
mask-image: url('$(res)/img/element-icons/retry.svg');
67+
}
68+
69+
.mx_MessageContextMenu_iconSource::before {
70+
mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
71+
}
72+
73+
.mx_MessageContextMenu_iconQuote::before {
74+
mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
75+
}
76+
77+
.mx_MessageContextMenu_iconPin::before {
78+
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
79+
}
2780

28-
.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
29-
font-weight: bold;
81+
.mx_MessageContextMenu_iconUnpin::before {
82+
mask-image: url('$(res)/img/element-icons/room/pin.svg');
83+
}
3084
}

res/css/views/dialogs/_ForwardDialog.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ limitations under the License.
3434
> .mx_ForwardDialog_preview {
3535
max-height: 30%;
3636
flex-shrink: 0;
37-
overflow: scroll;
37+
overflow-y: auto;
3838

3939
div {
4040
pointer-events: none;

res/css/views/messages/_TextualEvent.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,9 @@ limitations under the License.
1717
.mx_TextualEvent {
1818
opacity: 0.5;
1919
overflow-y: hidden;
20+
21+
a {
22+
color: $accent-color;
23+
cursor: pointer;
24+
}
2025
}

res/css/views/rooms/_IRCLayout.scss

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ $irc-line-height: $font-18px;
2929
// timestamps are links which shouldn't be underlined
3030
> a {
3131
text-decoration: none;
32+
min-width: 45px;
3233
}
3334

3435
display: flex;
@@ -49,18 +50,6 @@ $irc-line-height: $font-18px;
4950
}
5051
}
5152

52-
> .mx_SenderProfile {
53-
order: 2;
54-
flex-shrink: 0;
55-
width: var(--name-width);
56-
text-overflow: ellipsis;
57-
text-align: left;
58-
display: flex;
59-
align-items: center;
60-
overflow: visible;
61-
justify-content: flex-end;
62-
}
63-
6453
.mx_EventTile_line, .mx_EventTile_reply {
6554
padding: 0;
6655
display: flex;
@@ -173,44 +162,45 @@ $irc-line-height: $font-18px;
173162
border-left: 0;
174163
}
175164

176-
.mx_SenderProfile_hover {
177-
background-color: $primary-bg-color;
178-
overflow: hidden;
165+
.mx_SenderProfile {
166+
width: var(--name-width);
179167
display: flex;
168+
order: 2;
169+
flex-shrink: 0;
170+
justify-content: flex-start;
171+
align-items: center;
180172

181173
> .mx_SenderProfile_displayName {
174+
width: 100%;
175+
text-align: end;
182176
overflow: hidden;
183177
text-overflow: ellipsis;
184-
min-width: var(--name-width);
185-
text-align: end;
186178
}
187-
}
188179

189-
.mx_SenderProfile:hover {
190-
justify-content: flex-start;
180+
> .mx_SenderProfile_mxid {
181+
visibility: collapse;
182+
}
191183
}
192184

193-
.mx_SenderProfile_hover:hover {
185+
.mx_SenderProfile:hover {
194186
overflow: visible;
195-
width: max(auto, 100%);
196187
z-index: 10;
188+
189+
> .mx_SenderProfile_displayName {
190+
overflow: visible;
191+
}
192+
193+
> .mx_SenderProfile_mxid {
194+
visibility: visible;
195+
}
197196
}
198197

199198
.mx_ReplyThread {
200199
margin: 0;
201200
.mx_SenderProfile {
202201
width: unset;
203202
max-width: var(--name-width);
204-
}
205-
206-
.mx_SenderProfile_hover {
207203
background: transparent;
208-
209-
> span {
210-
> .mx_SenderProfile_displayName {
211-
min-width: inherit;
212-
}
213-
}
214204
}
215205

216206
.mx_EventTile_emote {

res/css/views/rooms/_VoiceRecordComposerTile.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ limitations under the License.
3636
}
3737

3838
.mx_VoiceRecordComposerTile_delete {
39-
width: 14px; // w&h are size of icon
40-
height: 18px;
39+
width: 24px;
40+
height: 24px;
4141
vertical-align: middle;
42-
margin-right: 11px; // distance from left edge of waveform container (container has some margin too)
42+
margin-right: 8px; // distance from left edge of waveform container (container has some margin too)
4343
background-color: $voice-record-icon-color;
4444
mask-repeat: no-repeat;
4545
mask-size: contain;

res/css/views/spaces/_SpaceBasicSettings.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ limitations under the License.
7373
}
7474
}
7575

76-
.mx_AccessibleButton {
76+
.mx_AccessibleButton_hasKind {
7777
padding: 8px 22px;
7878
margin-left: auto;
7979
display: block;

res/css/views/voice_messages/_PlaybackContainer.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,14 @@ limitations under the License.
3333
font-size: $font-14px;
3434
line-height: $font-24px;
3535

36+
contain: content;
37+
3638
.mx_Waveform {
3739
.mx_Waveform_bar {
3840
background-color: $voice-record-waveform-incomplete-fg-color;
41+
height: 100%;
42+
/* Variable set by a JS component */
43+
transform: scaleY(max(0.05, var(--barHeight)));
3944

4045
&.mx_Waveform_bar_100pct {
4146
// Small animation to remove the mechanical feel of progress
Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)