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

Commit bafeb38

Browse files
SimonBrandnerSimonBrandner
authored
Improve VoIP UI/UX (#7048)
* Remove speaking indicator Signed-off-by: Šimon Brandner <[email protected]> * Remove mic icon for primary feed Signed-off-by: Šimon Brandner <[email protected]> * Remove caching as it doesn't seem to be neccessary Signed-off-by: Šimon Brandner <[email protected]> * Add call view buttons colors Signed-off-by: Šimon Brandner <[email protected]> * Refactor button code Signed-off-by: Šimon Brandner <[email protected]> * Update call view button icons Signed-off-by: Šimon Brandner <[email protected]> * i18n Signed-off-by: Šimon Brandner <[email protected]> * Add dialpad icon Signed-off-by: Šimon Brandner <[email protected]> * Fix button sizing in PiP Signed-off-by: Šimon Brandner <[email protected]> * Fix secondary voice video feed color Signed-off-by: Šimon Brandner <[email protected]>
1 parent 431098b commit bafeb38

32 files changed

+239
-375
lines changed

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

Lines changed: 88 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@ limitations under the License.
2020
position: absolute;
2121
display: flex;
2222
justify-content: center;
23-
bottom: 5px;
23+
bottom: 24px;
2424
opacity: 1;
2525
transition: opacity 0.5s;
2626
z-index: 200; // To be above _all_ feeds
27+
gap: 18px;
2728

2829
&.mx_CallViewButtons_hidden {
2930
opacity: 0.001; // opacity 0 can cause a re-layout
@@ -32,69 +33,121 @@ limitations under the License.
3233

3334
.mx_CallViewButtons_button {
3435
cursor: pointer;
35-
margin-left: 2px;
36-
margin-right: 2px;
36+
37+
background-color: $call-view-button-on-background;
38+
39+
border-radius: 100%;
40+
height: 40px;
41+
width: 40px;
42+
43+
display: flex;
44+
justify-content: center;
45+
align-items: center;
3746

3847
&::before {
3948
content: '';
4049
display: inline-block;
4150

42-
height: 48px;
43-
width: 48px;
51+
mask-repeat: no-repeat;
52+
mask-size: contain;
53+
mask-position: center;
4454

45-
background-repeat: no-repeat;
46-
background-size: contain;
47-
background-position: center;
48-
}
55+
background-color: $call-view-button-on-foreground;
4956

50-
&.mx_CallViewButtons_dialpad::before {
51-
background-image: url('$(res)/img/voip/dialpad.svg');
57+
height: 24px;
58+
width: 24px;
5259
}
5360

54-
&.mx_CallViewButtons_button_micOn::before {
55-
background-image: url('$(res)/img/voip/mic-on.svg');
56-
}
61+
// State buttons
62+
&.mx_CallViewButtons_button_on {
63+
background-color: $call-view-button-on-background;
5764

58-
&.mx_CallViewButtons_button_micOff::before {
59-
background-image: url('$(res)/img/voip/mic-off.svg');
60-
}
65+
&::before {
66+
background-color: $call-view-button-on-foreground;
67+
}
6168

62-
&.mx_CallViewButtons_button_vidOn::before {
63-
background-image: url('$(res)/img/voip/vid-on.svg');
64-
}
69+
&.mx_CallViewButtons_button_mic::before {
70+
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
71+
}
6572

66-
&.mx_CallViewButtons_button_vidOff::before {
67-
background-image: url('$(res)/img/voip/vid-off.svg');
68-
}
73+
&.mx_CallViewButtons_button_vid::before {
74+
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
75+
}
6976

70-
&.mx_CallViewButtons_button_screensharingOn::before {
71-
background-image: url('$(res)/img/voip/screensharing-on.svg');
72-
}
77+
&.mx_CallViewButtons_button_screensharing {
78+
background-color: $accent;
7379

74-
&.mx_CallViewButtons_button_screensharingOff::before {
75-
background-image: url('$(res)/img/voip/screensharing-off.svg');
80+
&::before {
81+
mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
82+
background-color: white; // Same on both themes
83+
}
84+
}
85+
86+
&.mx_CallViewButtons_button_sidebar::before {
87+
mask-image: url('$(res)/img/voip/call-view/sidebar-on.svg');
88+
}
7689
}
7790

78-
&.mx_CallViewButtons_button_sidebarOn::before {
79-
background-image: url('$(res)/img/voip/sidebar-on.svg');
91+
&.mx_CallViewButtons_button_off {
92+
background-color: $call-view-button-off-background;
93+
94+
&::before {
95+
background-color: $call-view-button-off-foreground;
96+
}
97+
98+
&.mx_CallViewButtons_button_mic::before {
99+
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
100+
}
101+
102+
&.mx_CallViewButtons_button_vid::before {
103+
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
104+
}
105+
106+
&.mx_CallViewButtons_button_screensharing {
107+
background-color: $call-view-button-on-background;
108+
109+
&::before {
110+
mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
111+
background-color: $call-view-button-on-foreground;
112+
}
113+
}
114+
115+
&.mx_CallViewButtons_button_sidebar {
116+
background-color: $call-view-button-on-background;
117+
118+
&::before {
119+
mask-image: url('$(res)/img/voip/call-view/sidebar-off.svg');
120+
background-color: $call-view-button-on-foreground;
121+
}
122+
}
80123
}
124+
// State buttons
81125

82-
&.mx_CallViewButtons_button_sidebarOff::before {
83-
background-image: url('$(res)/img/voip/sidebar-off.svg');
126+
// Stateless buttons
127+
&.mx_CallViewButtons_dialpad::before {
128+
mask-image: url('$(res)/img/voip/call-view/dialpad.svg');
84129
}
85130

86-
&.mx_CallViewButtons_button_hangup::before {
87-
background-image: url('$(res)/img/voip/hangup.svg');
131+
&.mx_CallViewButtons_button_hangup {
132+
background-color: $alert;
133+
134+
&::before {
135+
mask-image: url('$(res)/img/voip/call-view/hangup.svg');
136+
background-color: white; // Same on both themes
137+
}
88138
}
89139

90140
&.mx_CallViewButtons_button_more::before {
91-
background-image: url('$(res)/img/voip/more.svg');
141+
mask-image: url('$(res)/img/voip/call-view/more.svg');
92142
}
143+
// Stateless buttons
93144

145+
// Invisible state
94146
&.mx_CallViewButtons_button_invisible {
95147
visibility: hidden;
96148
pointer-events: none;
97149
position: absolute;
98150
}
151+
// Invisible state
99152
}
100153
}

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,16 @@ limitations under the License.
4949
}
5050

5151
.mx_CallViewButtons {
52-
bottom: 0px;
52+
bottom: 13px;
5353
}
5454

5555
.mx_CallViewButtons_button {
56+
width: 34px;
57+
height: 34px;
58+
5659
&::before {
57-
width: 36px;
58-
height: 36px;
60+
width: 22px;
61+
height: 22px;
5962
}
6063
}
6164

@@ -74,7 +77,6 @@ limitations under the License.
7477
> .mx_VideoFeed {
7578
width: 100%;
7679
height: 100%;
77-
border-width: 0 !important; // Override mx_VideoFeed_speaking
7880

7981
&.mx_VideoFeed_voice {
8082
display: flex;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ limitations under the License.
3939
display: flex;
4040
align-items: center;
4141
justify-content: center;
42+
43+
background-color: $video-feed-secondary-background;
4244
}
4345

4446
.mx_VideoFeed_video {

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,6 @@ limitations under the License.
2626
aspect-ratio: 16 / 9;
2727
}
2828

29-
&.mx_VideoFeed_speaking {
30-
border: $accent 2px solid;
31-
32-
.mx_VideoFeed_video {
33-
border-radius: 0;
34-
}
35-
}
36-
3729
.mx_VideoFeed_video {
3830
width: 100%;
3931
background-color: transparent;

‎res/img/voip/call-view/cam-off.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/voip/call-view/cam-on.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/voip/call-view/dialpad.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/voip/call-view/hangup.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/voip/call-view/mic-off.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/voip/call-view/mic-on.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)