sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Redesign the picture-in-picture window (#9800)

Browse Source 
* Remove unnecessary PipContainer component

* Redesign the picture-in-picture window

* Add a hover effect to the controls

* Clarify that WidgetPip has call-specific behavior
This commit is contained in:
Robin
2023-01-04 04:44:38 +00:00
committed by GitHub
parent 6b155620e4
commit cb1af0d3de
28 changed files with 491 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/voip/_CallView.pcss
+12 -12
View File
@@ -32,7 +32,7 @@ limitations under the License.
height: 100%;
border: none;
border-radius: inherit;
background-color: $call-lobby-background;
background-color: $call-background;
}
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
@@ -44,10 +44,10 @@ limitations under the License.
min-height: 0;
flex-grow: 1;
padding: $spacing-12;
color: $call-lobby-primary-content;
background-color: $call-lobby-background;
color: $call-primary-content;
background-color: $call-background;
--facepile-background: $call-lobby-background;
--facepile-background: $call-background;
border-radius: 8px;
display: flex;
@@ -66,7 +66,7 @@ limitations under the License.
width: 100%;
max-width: 800px;
aspect-ratio: 1.5;
background-color: $call-lobby-system;
background-color: $call-system;
border-radius: 20px;
overflow: hidden;
@@ -104,7 +104,7 @@ limitations under the License.
left: 0;
right: 0;
background-color: rgba($call-lobby-background, 0.9);
background-color: rgba($call-background, 0.9);
display: flex;
justify-content: center;
@@ -120,7 +120,7 @@ limitations under the License.
width: $size;
height: $size;
background-color: $call-lobby-system;
background-color: $call-system;
border-radius: calc($size / 2);
&::before {
@@ -129,7 +129,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: $call-lobby-primary-content;
background-color: $call-primary-content;
height: 100%;
width: 100%;
}
@@ -153,7 +153,7 @@ limitations under the License.
width: $size;
height: $size;
background-color: $call-lobby-system;
background-color: $call-system;
border-radius: calc($size / 2);
&::before {
@@ -162,7 +162,7 @@ limitations under the License.
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-size: $size;
mask-position: center;
background-color: $call-lobby-primary-content;
background-color: $call-primary-content;
height: 100%;
width: 100%;
}
@@ -171,10 +171,10 @@ limitations under the License.
&.mx_CallView_deviceButtonWrapper_muted {
.mx_CallView_deviceButton,
.mx_CallView_deviceListButton {
background-color: $call-lobby-primary-content;
background-color: $call-primary-content;
&::before {
background-color: $call-lobby-system;
background-color: $call-system;
}
}