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

Commit 8e719d5

Browse files
weeman1337weeman1337
authored
Add voice broadcast recording body (#9316)
* Add voice broadcast recording body * Change icon element; update css variables * Update Icon-test snapshots
1 parent d077ea1 commit 8e719d5

File tree

32 files changed

+1059
-7
lines changed

32 files changed

+1059
-7
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
"@sinonjs/fake-timers": "^9.1.2",
141141
"@testing-library/jest-dom": "^5.16.5",
142142
"@testing-library/react": "^12.1.5",
143+
"@testing-library/user-event": "^14.4.3",
143144
"@types/classnames": "^2.2.11",
144145
"@types/commonmark": "^0.27.4",
145146
"@types/counterpart": "^0.18.1",

‎res/css/_components.pcss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "./_font-sizes.pcss";
55
@import "./_font-weights.pcss";
66
@import "./_spacing.pcss";
7+
@import "./components/atoms/_Icon.pcss";
78
@import "./components/views/beacon/_BeaconListItem.pcss";
89
@import "./components/views/beacon/_BeaconStatus.pcss";
910
@import "./components/views/beacon/_BeaconStatusTooltip.pcss";
@@ -357,3 +358,5 @@
357358
@import "./views/voip/_LegacyCallViewSidebar.pcss";
358359
@import "./views/voip/_PiPContainer.pcss";
359360
@import "./views/voip/_VideoFeed.pcss";
361+
@import "./voice-broadcast/atoms/_LiveBadge.pcss";
362+
@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss";

‎res/css/components/atoms/_Icon.pcss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
.mx_Icon {
18+
mask-position: center;
19+
mask-repeat: no-repeat;
20+
mask-size: contain;
21+
}
22+
23+
.mx_Icon_16 {
24+
height: 16px;
25+
width: 16px;
26+
}
27+
28+
.mx_Icon_accent {
29+
background-color: $accent;
30+
}
31+
32+
.mx_Icon_live-badge {
33+
background-color: #fff;
34+
}

‎res/css/voice-broadcast/atoms/_LiveBadge.pcss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
.mx_LiveBadge {
18+
align-items: center;
19+
background-color: $alert;
20+
border-radius: 2px;
21+
color: $live-badge-color;
22+
display: flex;
23+
font-size: $font-12px;
24+
font-weight: $font-semi-bold;
25+
gap: $spacing-4;
26+
padding: 2px 4px;
27+
}

‎res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
.mx_VoiceBroadcastRecordingBody {
18+
align-items: flex-start;
19+
background-color: $quinary-content;
20+
border-radius: 8px;
21+
display: inline-flex;
22+
gap: $spacing-8;
23+
padding: 12px;
24+
}
25+
26+
.mx_VoiceBroadcastRecordingBody_title {
27+
font-size: $font-12px;
28+
font-weight: $font-semi-bold;
29+
}

‎res/themes/dark/css/_dark.pcss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,11 @@ $location-live-secondary-color: #deddfd;
206206
}
207207
/* ******************** */
208208

209+
/* Voice Broadcast */
210+
/* ******************** */
211+
$live-badge-color: #ffffff;
212+
/* ******************** */
213+
209214
/* One-off colors */
210215
/* ******************** */
211216
$progressbar-bg-color: $system;

‎res/themes/legacy-dark/css/_legacy-dark.pcss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,11 @@ $location-live-color: #5c56f5;
203203
$location-live-secondary-color: #deddfd;
204204
/* ******************** */
205205

206+
/* Voice Broadcast */
207+
/* ******************** */
208+
$live-badge-color: #ffffff;
209+
/* ******************** */
210+
206211
/* ***** Mixins! ***** */
207212

208213
@define-mixin mx_DialogButton {

‎res/themes/legacy-light/css/_legacy-light.pcss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,11 @@ $location-live-color: #5c56f5;
303303
$location-live-secondary-color: #deddfd;
304304
/* ******************** */
305305

306+
/* Voice Broadcast */
307+
/* ******************** */
308+
$live-badge-color: #ffffff;
309+
/* ******************** */
310+
306311
/* ***** Mixins! ***** */
307312

308313
@define-mixin mx_DialogButton {

‎res/themes/light/css/_light.pcss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,11 @@ $location-live-color: #5c56f5;
337337
$location-live-secondary-color: #deddfd;
338338
/* ******************** */
339339

340+
/* Voice Broadcast */
341+
/* ******************** */
342+
$live-badge-color: #ffffff;
343+
/* ******************** */
344+
340345
/* Mixins */
341346
/* ******************** */
342347
@define-mixin mx_DialogButton {

‎src/components/atoms/Icon.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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+
import React from "react";
18+
19+
import liveIcon from "../../../res/img/element-icons/live.svg";
20+
21+
export enum IconType {
22+
Live,
23+
}
24+
25+
const iconTypeMap = new Map([
26+
[IconType.Live, liveIcon],
27+
]);
28+
29+
export enum IconColour {
30+
Accent = "accent",
31+
LiveBadge = "live-badge",
32+
}
33+
34+
export enum IconSize {
35+
S16 = "16",
36+
}
37+
38+
interface IconProps {
39+
colour?: IconColour;
40+
size?: IconSize;
41+
type: IconType;
42+
}
43+
44+
export const Icon: React.FC<IconProps> = ({
45+
size = IconSize.S16,
46+
colour = IconColour.Accent,
47+
type,
48+
...rest
49+
}) => {
50+
const classes = [
51+
"mx_Icon",
52+
`mx_Icon_${size}`,
53+
`mx_Icon_${colour}`,
54+
];
55+
56+
const styles: React.CSSProperties = {
57+
maskImage: `url("${iconTypeMap.get(type)}")`,
58+
};
59+
60+
return (
61+
<i
62+
aria-hidden
63+
className={classes.join(" ")}
64+
role="presentation"
65+
style={styles}
66+
{...rest}
67+
/>
68+
);
69+
};

0 commit comments

Comments
 (0)