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

Commit a5b795c

Browse files
SimonBrandnerSimonBrandner
authored
Improve UI/UX in calls (#7791)
1 parent 5cdc8fb commit a5b795c

File tree

12 files changed

+409
-411
lines changed

12 files changed

+409
-411
lines changed

‎res/css/views/voip/CallView/_CallViewButtons.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
Copyright 2015, 2016 OpenMarket Ltd
33
Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
4-
Copyright 2021 Šimon Brandner <[email protected]>
4+
Copyright 2021 - 2022 Šimon Brandner <[email protected]>
55
66
Licensed under the Apache License, Version 2.0 (the "License");
77
you may not use this file except in compliance with the License.
@@ -27,7 +27,7 @@ limitations under the License.
2727
position: absolute;
2828
display: flex;
2929
justify-content: center;
30-
bottom: 24px;
30+
bottom: 32px;
3131
opacity: 1;
3232
transition: opacity 0.5s;
3333
z-index: 200; // To be above _all_ feeds

‎res/css/views/voip/_CallView.scss

Lines changed: 143 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*
22
Copyright 2015, 2016 OpenMarket Ltd
3-
Copyright 2020 The Matrix.org Foundation C.I.C.
3+
Copyright 2020 - 2021 The Matrix.org Foundation C.I.C.
4+
Copyright 2021 - 2022 Šimon Brandner <[email protected]>
45
56
Licensed under the Apache License, Version 2.0 (the "License");
67
you may not use this file except in compliance with the License.
@@ -22,202 +23,176 @@ limitations under the License.
2223
padding-right: 8px;
2324
// XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place
2425
pointer-events: initial;
25-
}
26-
27-
.mx_CallView_large {
28-
padding-bottom: 10px;
29-
margin: $container-gap-width;
30-
// The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
31-
margin-right: calc($container-gap-width / 2);
32-
margin-bottom: 10px;
33-
display: flex;
34-
flex-direction: column;
35-
flex: 1;
36-
37-
.mx_CallView_voice {
38-
flex: 1;
39-
}
4026

41-
&.mx_CallView_belowWidget {
42-
margin-top: 0;
43-
}
44-
}
27+
.mx_CallView_toast {
28+
position: absolute;
29+
top: 74px;
4530

46-
.mx_CallView_pip {
47-
width: 320px;
48-
padding-bottom: 8px;
49-
background-color: $system;
50-
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
51-
border-radius: 8px;
31+
padding: 4px 8px;
5232

53-
.mx_CallView_video_hold,
54-
.mx_CallView_voice {
55-
height: 180px;
56-
}
33+
border-radius: 4px;
34+
z-index: 50;
5735

58-
.mx_CallViewButtons {
59-
bottom: 13px;
36+
// Same on both themes
37+
color: white;
38+
background-color: #17191c;
6039
}
6140

62-
.mx_CallViewButtons_button {
63-
width: 34px;
64-
height: 34px;
41+
.mx_CallView_content_wrapper {
42+
display: flex;
43+
justify-content: center;
6544

66-
&::before {
67-
width: 22px;
68-
height: 22px;
69-
}
70-
}
71-
72-
.mx_CallView_holdTransferContent {
73-
padding-top: 10px;
74-
padding-bottom: 25px;
75-
}
76-
}
77-
78-
.mx_CallView_content {
79-
position: relative;
80-
display: flex;
81-
justify-content: center;
82-
border-radius: 8px;
83-
84-
> .mx_VideoFeed {
8545
width: 100%;
8646
height: 100%;
8747

88-
&.mx_VideoFeed_voice {
48+
overflow: hidden;
49+
50+
.mx_CallView_content {
51+
position: relative;
52+
8953
display: flex;
54+
flex-direction: column;
9055
justify-content: center;
9156
align-items: center;
92-
}
9357

94-
.mx_VideoFeed_video {
95-
height: 100%;
96-
background-color: #000;
58+
flex: 1;
59+
overflow: hidden;
60+
61+
border-radius: 10px;
62+
63+
padding: 10px;
64+
padding-right: calc(20% + 20px); // Space for the sidebar
65+
66+
background-color: $call-view-content-background;
67+
68+
.mx_CallView_status {
69+
z-index: 50;
70+
color: $accent-fg-color;
71+
}
72+
73+
.mx_CallView_avatarsContainer {
74+
display: flex;
75+
flex-direction: row;
76+
align-items: center;
77+
justify-content: center;
78+
79+
div {
80+
margin-left: 12px;
81+
margin-right: 12px;
82+
}
83+
}
84+
85+
.mx_CallView_holdBackground {
86+
position: absolute;
87+
left: 0;
88+
right: 0;
89+
90+
width: 100%;
91+
height: 100%;
92+
93+
background-repeat: no-repeat;
94+
background-size: cover;
95+
background-position: center;
96+
filter: blur(20px);
97+
98+
&::after {
99+
content: "";
100+
display: block;
101+
position: absolute;
102+
width: 100%;
103+
height: 100%;
104+
left: 0;
105+
right: 0;
106+
background-color: rgba(0, 0, 0, 0.6);
107+
}
108+
}
109+
110+
&.mx_CallView_content_hold .mx_CallView_status {
111+
font-weight: bold;
112+
text-align: center;
113+
114+
&::before {
115+
display: block;
116+
margin-left: auto;
117+
margin-right: auto;
118+
content: "";
119+
width: 40px;
120+
height: 40px;
121+
background-image: url("$(res)/img/voip/paused.svg");
122+
background-position: center;
123+
background-size: cover;
124+
}
125+
126+
.mx_CallView_pip &::before {
127+
width: 30px;
128+
height: 30px;
129+
}
130+
131+
.mx_AccessibleButton_hasKind {
132+
padding: 0px;
133+
}
134+
}
97135
}
136+
}
137+
138+
&:not(.mx_CallView_sidebar) .mx_CallView_content {
139+
padding: 0;
140+
width: 100%;
141+
height: 100%;
142+
143+
.mx_VideoFeed_primary {
144+
aspect-ratio: unset;
145+
border: 0;
98146

99-
.mx_VideoFeed_mic {
100-
left: 10px;
101-
bottom: 10px;
147+
width: 100%;
148+
height: 100%;
102149
}
103150
}
104-
}
105151

106-
.mx_CallView_voice {
107-
align-items: center;
108-
justify-content: center;
109-
flex-direction: column;
110-
background-color: $inverted-bg-color;
111-
}
152+
&.mx_CallView_pip {
153+
width: 320px;
154+
padding-bottom: 8px;
112155

113-
.mx_CallView_voice_avatarsContainer {
114-
display: flex;
115-
flex-direction: row;
116-
align-items: center;
117-
justify-content: center;
118-
div {
119-
margin-left: 12px;
120-
margin-right: 12px;
121-
}
122-
}
156+
border-radius: 8px;
123157

124-
.mx_CallView_voice .mx_CallView_holdTransferContent {
125-
// This masks the avatar image so when it's blurred, the edge is still crisp
126-
.mx_CallView_voice_avatarContainer {
127-
border-radius: 2000px;
128-
overflow: hidden;
129-
position: relative;
130-
}
131-
}
158+
background-color: $system;
159+
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
160+
161+
.mx_CallViewButtons {
162+
bottom: 13px;
132163

133-
.mx_CallView_holdTransferContent {
134-
height: 20px;
135-
padding-top: 20px;
136-
padding-bottom: 15px;
137-
color: $accent-fg-color;
138-
user-select: none;
164+
.mx_CallViewButtons_button {
165+
width: 34px;
166+
height: 34px;
167+
168+
&::before {
169+
width: 22px;
170+
height: 22px;
171+
}
172+
}
173+
}
139174

140-
.mx_AccessibleButton_hasKind {
141-
padding: 0px;
142-
font-weight: bold;
175+
.mx_CallView_content {
176+
min-height: 180px;
177+
}
143178
}
144-
}
145179

146-
.mx_CallView_video {
147-
width: 100%;
148-
height: 100%;
149-
z-index: 30;
150-
overflow: hidden;
151-
}
180+
&.mx_CallView_large {
181+
display: flex;
182+
flex-direction: column;
183+
align-items: center;
152184

153-
.mx_CallView_video_hold {
154-
overflow: hidden;
185+
flex: 1;
155186

156-
// we keep these around in the DOM: it saved wiring them up again when the call
157-
// is resumed and keeps the container the right size
158-
.mx_VideoFeed {
159-
visibility: hidden;
160-
}
161-
}
187+
padding-bottom: 10px;
162188

163-
.mx_CallView_video_holdBackground {
164-
position: absolute;
165-
width: 100%;
166-
height: 100%;
167-
left: 0;
168-
right: 0;
169-
background-repeat: no-repeat;
170-
background-size: cover;
171-
background-position: center;
172-
filter: blur(20px);
173-
&::after {
174-
content: "";
175-
display: block;
176-
position: absolute;
177-
width: 100%;
178-
height: 100%;
179-
left: 0;
180-
right: 0;
181-
background-color: rgba(0, 0, 0, 0.6);
189+
margin: $container-gap-width;
190+
// The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
191+
margin-right: calc($container-gap-width / 2);
192+
margin-bottom: 10px;
182193
}
183-
}
184194

185-
.mx_CallView_video .mx_CallView_holdTransferContent {
186-
position: absolute;
187-
top: 50%;
188-
left: 50%;
189-
transform: translate(-50%, -50%);
190-
font-weight: bold;
191-
color: $accent-fg-color;
192-
text-align: center;
193-
194-
&::before {
195-
display: block;
196-
margin-left: auto;
197-
margin-right: auto;
198-
content: "";
199-
width: 40px;
200-
height: 40px;
201-
background-image: url("$(res)/img/voip/paused.svg");
202-
background-position: center;
203-
background-size: cover;
204-
}
205-
.mx_CallView_pip &::before {
206-
width: 30px;
207-
height: 30px;
208-
}
209-
.mx_AccessibleButton_hasKind {
210-
padding: 0px;
195+
&.mx_CallView_belowWidget {
196+
margin-top: 0;
211197
}
212198
}
213-
214-
.mx_CallView_presenting {
215-
position: absolute;
216-
margin-top: 18px;
217-
padding: 4px 8px;
218-
border-radius: 4px;
219-
220-
// Same on both themes
221-
color: white;
222-
background-color: #17191c;
223-
}

‎res/css/views/voip/_CallViewHeader.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/*
22
Copyright 2021 The Matrix.org Foundation C.I.C.
3+
Copyright 2021 - 2022 Šimon Brandner <[email protected]>
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.
@@ -19,8 +20,9 @@ limitations under the License.
1920
display: flex;
2021
flex-direction: row;
2122
align-items: center;
22-
justify-content: left;
23+
justify-content: space-between;
2324
flex-shrink: 0;
25+
width: 100%;
2426

2527
&.mx_CallViewHeader_pip {
2628
cursor: pointer;

0 commit comments

Comments
 (0)