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

Commit 6137162

Browse files
committed
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/17044.1
� Conflicts: � src/stores/room-list/RoomListStore.ts
2 parents 4079b03 + 6f28964 commit 6137162

Some content is hidden

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

50 files changed

+927
-360
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Platform Targets:
2828
* WebRTC features (VoIP and Video calling) are only available in Chrome & Firefox.
2929
* Mobile Web is not currently a target platform - instead please use the native
3030
iOS (https://github.com/matrix-org/matrix-ios-kit) and Android
31-
(https://github.com/matrix-org/matrix-android-sdk) SDKs.
31+
(https://github.com/matrix-org/matrix-android-sdk2) SDKs.
3232

3333
All code lands on the `develop` branch - `master` is only used for stable releases.
3434
**Please file PRs against `develop`!!**

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ limitations under the License.
101101

102102
.mx_BaseAvatar {
103103
display: inline-flex;
104-
margin: 5px 16px 5px 5px;
104+
margin: auto 16px auto 5px;
105105
vertical-align: middle;
106106
}
107107

@@ -160,40 +160,87 @@ limitations under the License.
160160
}
161161
}
162162

163-
.mx_AddExistingToSpaceDialog_errorText {
164-
font-weight: $font-semi-bold;
165-
font-size: $font-12px;
166-
line-height: $font-15px;
167-
color: $notice-primary-color;
168-
margin-bottom: 28px;
169-
}
170-
171163
.mx_AddExistingToSpace {
172164
display: contents;
173165
}
174166

175167
.mx_AddExistingToSpaceDialog_footer {
176168
display: flex;
177-
margin-top: 32px;
169+
margin-top: 20px;
178170

179171
> span {
180172
flex-grow: 1;
181-
font-size: $font-14px;
173+
font-size: $font-12px;
182174
line-height: $font-15px;
183-
font-weight: $font-semi-bold;
175+
color: $secondary-fg-color;
176+
177+
.mx_ProgressBar {
178+
height: 8px;
179+
width: 100%;
184180

185-
.mx_AccessibleButton {
186-
font-size: inherit;
187-
display: inline-block;
181+
@mixin ProgressBarBorderRadius 8px;
182+
}
183+
184+
.mx_AddExistingToSpaceDialog_progressText {
185+
margin-top: 8px;
186+
font-size: $font-15px;
187+
line-height: $font-24px;
188+
color: $primary-fg-color;
188189
}
189190

190191
> * {
191192
vertical-align: middle;
192193
}
193194
}
194195

196+
.mx_AddExistingToSpaceDialog_error {
197+
padding-left: 12px;
198+
199+
> img {
200+
align-self: center;
201+
}
202+
203+
.mx_AddExistingToSpaceDialog_errorHeading {
204+
font-weight: $font-semi-bold;
205+
font-size: $font-15px;
206+
line-height: $font-18px;
207+
color: $notice-primary-color;
208+
}
209+
210+
.mx_AddExistingToSpaceDialog_errorCaption {
211+
margin-top: 4px;
212+
font-size: $font-12px;
213+
line-height: $font-15px;
214+
color: $primary-fg-color;
215+
}
216+
}
217+
195218
.mx_AccessibleButton {
196219
display: inline-block;
220+
align-self: center;
221+
}
222+
223+
.mx_AccessibleButton_kind_primary {
224+
padding: 8px 36px;
225+
}
226+
227+
.mx_AddExistingToSpaceDialog_retryButton {
228+
margin-left: 12px;
229+
padding-left: 24px;
230+
position: relative;
231+
232+
&::before {
233+
content: '';
234+
position: absolute;
235+
background-color: $primary-fg-color;
236+
mask-repeat: no-repeat;
237+
mask-position: center;
238+
mask-size: contain;
239+
mask-image: url('$(res)/img/element-icons/retry.svg');
240+
width: 18px;
241+
height: 18px;
242+
left: 0;
243+
}
197244
}
198245

199246
.mx_AccessibleButton_kind_link {

res/css/views/elements/_ProgressBar.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ progress.mx_ProgressBar {
2121
appearance: none;
2222
border: none;
2323

24-
@mixin ProgressBarBorderRadius "6px";
24+
@mixin ProgressBarBorderRadius 6px;
2525
@mixin ProgressBarColour $progressbar-fg-color;
2626
@mixin ProgressBarBgColour $progressbar-bg-color;
2727
::-webkit-progress-value {

res/css/views/messages/_MFileBody.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@ limitations under the License.
6161

6262
.mx_MFileBody_info {
6363
background-color: $message-body-panel-bg-color;
64-
border-radius: 4px;
65-
width: 270px;
66-
padding: 8px;
64+
border-radius: 12px;
65+
width: 243px; // same width as a playable voice message, accounting for padding
66+
padding: 6px 12px;
6767
color: $message-body-panel-fg-color;
6868

6969
.mx_MFileBody_info_icon {
@@ -82,7 +82,7 @@ limitations under the License.
8282
mask-position: center;
8383
mask-size: cover;
8484
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
85-
background-color: $message-body-panel-fg-color;
85+
background-color: $message-body-panel-icon-fg-color;
8686
width: 13px;
8787
height: 15px;
8888

res/css/views/rooms/_VoiceRecordComposerTile.scss

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,14 @@ limitations under the License.
3939
width: 14px; // w&h are size of icon
4040
height: 18px;
4141
vertical-align: middle;
42-
margin-right: 7px; // distance from left edge of waveform container (container has some margin too)
42+
margin-right: 11px; // 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;
4646
mask-image: url('$(res)/img/element-icons/trashcan.svg');
4747
}
4848

49-
.mx_VoiceMessagePrimaryContainer {
49+
.mx_VoiceRecordComposerTile_recording.mx_VoiceMessagePrimaryContainer {
5050
// Note: remaining class properties are in the PlayerContainer CSS.
5151

5252
margin: 6px; // force the composer area to put a gutter around us
@@ -55,7 +55,9 @@ limitations under the License.
5555
position: relative; // important for the live circle
5656

5757
&.mx_VoiceRecordComposerTile_recording {
58-
padding-left: 16px; // +10px for the live circle, +6px for regular padding
58+
// We are putting the circle in this padding, so we need +10px from the regular
59+
// padding on the left side.
60+
padding-left: 22px;
5961

6062
&::before {
6163
animation: recording-pulse 2s infinite;
@@ -65,8 +67,8 @@ limitations under the License.
6567
width: 10px;
6668
height: 10px;
6769
position: absolute;
68-
left: 8px;
69-
top: 16px; // vertically center
70+
left: 12px; // 12px from the left edge for container padding
71+
top: 18px; // vertically center (middle align with clock)
7072
border-radius: 10px;
7173
}
7274
}

res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,34 @@ limitations under the License.
2222
.mx_HelpUserSettingsTab span.mx_AccessibleButton {
2323
word-break: break-word;
2424
}
25+
26+
.mx_HelpUserSettingsTab code {
27+
word-break: break-all;
28+
user-select: all;
29+
}
30+
31+
.mx_HelpUserSettingsTab_accessToken {
32+
display: flex;
33+
justify-content: space-between;
34+
border-radius: 5px;
35+
border: solid 1px $light-fg-color;
36+
margin-bottom: 10px;
37+
margin-top: 10px;
38+
padding: 10px;
39+
}
40+
41+
.mx_HelpUserSettingsTab_accessToken_copy {
42+
flex-shrink: 0;
43+
cursor: pointer;
44+
margin-left: 20px;
45+
display: inherit;
46+
}
47+
48+
.mx_HelpUserSettingsTab_accessToken_copy > div {
49+
mask-image: url($copy-button-url);
50+
background-color: $message-action-bar-fg-color;
51+
margin-left: 5px;
52+
width: 20px;
53+
height: 20px;
54+
background-repeat: no-repeat;
55+
}

res/css/views/voice_messages/_PlaybackContainer.scss

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ limitations under the License.
1919

2020
// Container for live recording and playback controls
2121
.mx_VoiceMessagePrimaryContainer {
22-
padding: 6px; // makes us 4px taller than the send/stop button
23-
padding-right: 5px; // there's 1px from the waveform itself, so account for that
22+
// 7px top and bottom for visual design. 12px left & right, but the waveform (right)
23+
// has a 1px padding on it that we want to account for.
24+
padding: 7px 12px 7px 11px;
2425
background-color: $voice-record-waveform-bg-color;
2526
border-radius: 12px;
2627

@@ -30,11 +31,9 @@ limitations under the License.
3031

3132
color: $voice-record-waveform-fg-color;
3233
font-size: $font-14px;
34+
line-height: $font-24px;
3335

3436
.mx_Waveform {
35-
// We want the bars to be 2px shorter than the play/pause button in the waveform control
36-
height: 28px; // default is 30px, so we're subtracting the 2px border off the bars
37-
3837
.mx_Waveform_bar {
3938
background-color: $voice-record-waveform-incomplete-fg-color;
4039

@@ -47,8 +46,8 @@ limitations under the License.
4746
}
4847

4948
.mx_Clock {
50-
padding-right: 4px; // isolate from waveform
51-
padding-left: 8px; // isolate from live circle
52-
width: 40px; // we're not using a monospace font, so fake it
49+
width: 42px; // we're not using a monospace font, so fake it
50+
padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
51+
padding-left: 8px; // isolate from recording circle / play control
5352
}
5453
}

res/css/views/voip/_CallView.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,17 @@ limitations under the License.
6565
}
6666
}
6767

68-
.mx_CallView_voice {
68+
.mx_CallView_content {
6969
position: relative;
7070
display: flex;
71-
flex-direction: column;
71+
border-radius: 8px;
72+
}
73+
74+
.mx_CallView_voice {
7275
align-items: center;
7376
justify-content: center;
77+
flex-direction: column;
7478
background-color: $inverted-bg-color;
75-
border-radius: 8px;
7679
}
7780

7881
.mx_CallView_voice_avatarsContainer {
@@ -109,9 +112,7 @@ limitations under the License.
109112
.mx_CallView_video {
110113
width: 100%;
111114
height: 100%;
112-
position: relative;
113115
z-index: 30;
114-
border-radius: 8px;
115116
overflow: hidden;
116117
}
117118

res/css/views/voip/_VideoFeed.scss

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,37 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17+
.mx_VideoFeed_voice {
18+
// We don't want to collide with the call controls that have 52px of height
19+
padding-bottom: 52px;
20+
background-color: $inverted-bg-color;
21+
}
22+
23+
1724
.mx_VideoFeed_remote {
1825
width: 100%;
1926
height: 100%;
20-
background-color: #000;
21-
z-index: 50;
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
31+
&.mx_VideoFeed_video {
32+
background-color: #000;
33+
}
2234
}
2335

2436
.mx_VideoFeed_local {
25-
width: 25%;
26-
height: 25%;
37+
max-width: 25%;
38+
max-height: 25%;
2739
position: absolute;
2840
right: 10px;
2941
top: 10px;
3042
z-index: 100;
3143
border-radius: 4px;
44+
45+
&.mx_VideoFeed_video {
46+
background-color: transparent;
47+
}
3248
}
3349

3450
.mx_VideoFeed_mirror {

res/themes/dark/css/_dark.scss

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ $header-panel-text-primary-color: #B9BEC6;
99
$header-panel-text-secondary-color: #c8c8cd;
1010
$text-primary-color: #ffffff;
1111
$text-secondary-color: #B9BEC6;
12+
$quaternary-fg-color: #6F7882;
1213
$search-bg-color: #181b21;
1314
$search-placeholder-color: #61708b;
1415
$room-highlight-color: #343a46;
@@ -42,14 +43,6 @@ $preview-bar-bg-color: $header-panel-bg-color;
4243
$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
4344
$inverted-bg-color: $base-color;
4445

45-
$voice-record-stop-border-color: #6F7882; // "Quarterly"
46-
$voice-record-waveform-bg-color: #394049; // "Dark Tile"
47-
$voice-record-waveform-fg-color: $tertiary-fg-color;
48-
$voice-record-waveform-incomplete-fg-color: #5b646d;
49-
$voice-record-icon-color: $tertiary-fg-color;
50-
$voice-playback-button-bg-color: $tertiary-fg-color;
51-
$voice-playback-button-fg-color: $bg-color;
52-
5346
// used by AddressSelector
5447
$selected-color: $room-highlight-color;
5548

@@ -213,9 +206,18 @@ $breadcrumb-placeholder-bg-color: #272c35;
213206

214207
$user-tile-hover-bg-color: $header-panel-bg-color;
215208

216-
$message-body-panel-bg-color: #21262c82;
217-
$message-body-panel-icon-bg-color: #8e99a4;
218-
$message-body-panel-fg-color: $primary-fg-color;
209+
$message-body-panel-fg-color: $secondary-fg-color;
210+
$message-body-panel-bg-color: #394049; // "Dark Tile"
211+
$message-body-panel-icon-fg-color: #21262C; // "Separator"
212+
$message-body-panel-icon-bg-color: $tertiary-fg-color;
213+
214+
$voice-record-stop-border-color: $quaternary-fg-color;
215+
$voice-record-waveform-bg-color: $message-body-panel-bg-color;
216+
$voice-record-waveform-fg-color: $message-body-panel-fg-color;
217+
$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
218+
$voice-record-icon-color: $quaternary-fg-color;
219+
$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
220+
$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
219221

220222
// Appearance tab colors
221223
$appearance-tab-border-color: $room-highlight-color;

0 commit comments

Comments
 (0)