imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve VoIP UI/UX (#7048)

Browse source 
* Remove speaking indicator

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove mic icon for primary feed

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove caching as it doesn't seem to be neccessary

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Add call view buttons colors

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Refactor button code

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Update call view button icons

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* i18n

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Add dialpad icon

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix button sizing in PiP

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix secondary voice video feed color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-11-15 18:24:11 +01:00 • committed by GitHub
parent 431098b56b
commit bafeb38472
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 247 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

139
res/css/views/voip/CallView/_CallViewButtons.scss
View file

@ -20,10 +20,11 @@ limitations under the License.
position: absolute;
display: flex;
justify-content: center;
bottom: 5px;
bottom: 24px;
opacity: 1;
transition: opacity 0.5s;
z-index: 200; // To be above _all_ feeds
gap: 18px;
&.mx_CallViewButtons_hidden {
opacity: 0.001; // opacity 0 can cause a re-layout
@ -32,69 +33,121 @@ limitations under the License.
.mx_CallViewButtons_button {
cursor: pointer;
margin-left: 2px;
margin-right: 2px;
background-color: $call-view-button-on-background;
border-radius: 100%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
&::before {
content: '';
display: inline-block;
height: 48px;
width: 48px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-color: $call-view-button-on-foreground;
height: 24px;
width: 24px;
}
// State buttons
&.mx_CallViewButtons_button_on {
background-color: $call-view-button-on-background;
&::before {
background-color: $call-view-button-on-foreground;
}
&.mx_CallViewButtons_button_mic::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
}
&.mx_CallViewButtons_button_vid::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
&.mx_CallViewButtons_button_screensharing {
background-color: $accent;
&::before {
mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
background-color: white; // Same on both themes
}
}
&.mx_CallViewButtons_button_sidebar::before {
mask-image: url('$(res)/img/voip/call-view/sidebar-on.svg');
}
}
&.mx_CallViewButtons_button_off {
background-color: $call-view-button-off-background;
&::before {
background-color: $call-view-button-off-foreground;
}
&.mx_CallViewButtons_button_mic::before {
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
}
&.mx_CallViewButtons_button_vid::before {
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
}
&.mx_CallViewButtons_button_screensharing {
background-color: $call-view-button-on-background;
&::before {
mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
background-color: $call-view-button-on-foreground;
}
}
&.mx_CallViewButtons_button_sidebar {
background-color: $call-view-button-on-background;
&::before {
mask-image: url('$(res)/img/voip/call-view/sidebar-off.svg');
background-color: $call-view-button-on-foreground;
}
}
}
// State buttons
// Stateless buttons
&.mx_CallViewButtons_dialpad::before {
background-image: url('$(res)/img/voip/dialpad.svg');
mask-image: url('$(res)/img/voip/call-view/dialpad.svg');
}
&.mx_CallViewButtons_button_micOn::before {
background-image: url('$(res)/img/voip/mic-on.svg');
}
&.mx_CallViewButtons_button_hangup {
background-color: $alert;
&.mx_CallViewButtons_button_micOff::before {
background-image: url('$(res)/img/voip/mic-off.svg');
}
&.mx_CallViewButtons_button_vidOn::before {
background-image: url('$(res)/img/voip/vid-on.svg');
}
&.mx_CallViewButtons_button_vidOff::before {
background-image: url('$(res)/img/voip/vid-off.svg');
}
&.mx_CallViewButtons_button_screensharingOn::before {
background-image: url('$(res)/img/voip/screensharing-on.svg');
}
&.mx_CallViewButtons_button_screensharingOff::before {
background-image: url('$(res)/img/voip/screensharing-off.svg');
}
&.mx_CallViewButtons_button_sidebarOn::before {
background-image: url('$(res)/img/voip/sidebar-on.svg');
}
&.mx_CallViewButtons_button_sidebarOff::before {
background-image: url('$(res)/img/voip/sidebar-off.svg');
}
&.mx_CallViewButtons_button_hangup::before {
background-image: url('$(res)/img/voip/hangup.svg');
&::before {
mask-image: url('$(res)/img/voip/call-view/hangup.svg');
background-color: white; // Same on both themes
}
}
&.mx_CallViewButtons_button_more::before {
background-image: url('$(res)/img/voip/more.svg');
mask-image: url('$(res)/img/voip/call-view/more.svg');
}
// Stateless buttons
// Invisible state
&.mx_CallViewButtons_button_invisible {
visibility: hidden;
pointer-events: none;
position: absolute;
}
// Invisible state
}
}

10
res/css/views/voip/_CallView.scss
View file

@ -49,13 +49,16 @@ limitations under the License.
}
.mx_CallViewButtons {
bottom: 0px;
bottom: 13px;
}
.mx_CallViewButtons_button {
width: 34px;
height: 34px;
&::before {
width: 36px;
height: 36px;
width: 22px;
height: 22px;
}
}
@ -74,7 +77,6 @@ limitations under the License.
> .mx_VideoFeed {
width: 100%;
height: 100%;
border-width: 0 !important; // Override mx_VideoFeed_speaking
&.mx_VideoFeed_voice {
display: flex;

2
res/css/views/voip/_CallViewSidebar.scss
View file

@ -39,6 +39,8 @@ limitations under the License.
display: flex;
align-items: center;
justify-content: center;
background-color: $video-feed-secondary-background;
}
.mx_VideoFeed_video {

8
res/css/views/voip/_VideoFeed.scss
View file

@ -26,14 +26,6 @@ limitations under the License.
aspect-ratio: 16 / 9;
}
&.mx_VideoFeed_speaking {
border: $accent 2px solid;
.mx_VideoFeed_video {
border-radius: 0;
}
}
.mx_VideoFeed_video {
width: 100%;
background-color: transparent;