Redesign the picture-in-picture window (#9800)
* 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
GitHub
parent
6b155620e4
commit
cb1af0d3de
28 changed files with 491 additions and 328 deletions
|
|
@ -30,6 +30,7 @@
|
|||
@import "./components/views/location/_ZoomButtons.pcss";
|
||||
@import "./components/views/messages/_MBeaconBody.pcss";
|
||||
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
|
||||
@import "./components/views/pips/_WidgetPip.pcss";
|
||||
@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
|
||||
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
|
||||
@import "./components/views/settings/devices/_DeviceDetails.pcss";
|
||||
|
|
@ -373,7 +374,6 @@
|
|||
@import "./views/voip/_LegacyCallViewForRoom.pcss";
|
||||
@import "./views/voip/_LegacyCallViewHeader.pcss";
|
||||
@import "./views/voip/_LegacyCallViewSidebar.pcss";
|
||||
@import "./views/voip/_PiPContainer.pcss";
|
||||
@import "./views/voip/_VideoFeed.pcss";
|
||||
@import "./voice-broadcast/atoms/_LiveBadge.pcss";
|
||||
@import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";
|
||||
|
|
|
|||
68
res/css/components/views/pips/_WidgetPip.pcss
Normal file
68
res/css/components/views/pips/_WidgetPip.pcss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_WidgetPip {
|
||||
width: 320px;
|
||||
height: 220px;
|
||||
border-radius: 8px;
|
||||
contain: paint;
|
||||
color: $call-primary-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_WidgetPip_header,
|
||||
.mx_WidgetPip_footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: opacity ease 0.15s;
|
||||
|
||||
.mx_WidgetPip:not(:hover) > & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_WidgetPip_header {
|
||||
top: 0;
|
||||
padding: $spacing-12;
|
||||
display: flex;
|
||||
font-size: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.mx_WidgetPip_backButton {
|
||||
height: $spacing-24;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-12;
|
||||
|
||||
> .mx_Icon {
|
||||
color: $call-light-quaternary-content;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_WidgetPip_footer {
|
||||
bottom: 0;
|
||||
padding: $spacing-12 $spacing-8;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@ limitations under the License.
|
|||
&.mx_LegacyCallEvent_rejected,
|
||||
&.mx_LegacyCallEvent_noAnswer {
|
||||
.mx_LegacyCallEvent_type_icon::before {
|
||||
mask-image: url("$(res)/img/voip/declined-voice.svg");
|
||||
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
$MiniAppTileHeight: 200px;
|
||||
$MiniAppTileHeight: 220px;
|
||||
/* TODO this should be 300px but that's too large */
|
||||
$MinWidth: 240px;
|
||||
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ limitations under the License.
|
|||
background-color: $alert;
|
||||
|
||||
&::before {
|
||||
mask-image: url("$(res)/img/voip/call-view/hangup.svg");
|
||||
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
|
||||
background-color: white; /* Same on both themes */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ limitations under the License.
|
|||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
pointer-events: initial; /* restore pointer events so the user can leave/interact */
|
||||
/* Display above any widget elements */
|
||||
z-index: 102;
|
||||
|
||||
.mx_VideoFeed_remote.mx_VideoFeed_voice {
|
||||
min-height: 150px;
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_PiPContainer {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 72px;
|
||||
z-index: 100;
|
||||
|
||||
/* Disable pointer events for Jitsi widgets to function. Direct */
|
||||
/* calls have their own cursor and behaviour, but we need to make */
|
||||
/* sure the cursor hits the iframe for Jitsi which will be at a */
|
||||
/* different level. */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0084 7.75648C10.3211 7.69163 6.85136 8.12949 6.00781 8.35133C5.95792 8.36445 5.90044 8.37912 5.83616 8.39552C4.54101 8.72607 0.48272 9.76183 0.0442423 13.0436C-0.295466 15.5862 1.40575 16.3558 2.25618 16.2386C2.84479 16.1648 4.5301 15.8983 6.08724 15.6189C7.61629 15.3446 7.61551 14.3359 7.61499 13.6538C7.61498 13.6413 7.61497 13.6288 7.61497 13.6165L7.61497 12.2453C7.61497 11.8961 7.94315 11.6942 8.3958 11.6396C9.99822 11.422 11.3359 11.4213 12.0055 11.4213L12.0112 11.4213C12.6807 11.4213 14.0018 11.422 15.6042 11.6396C16.0569 11.6942 16.385 11.8961 16.385 12.2453L16.385 13.6165C16.385 13.6289 16.385 13.6413 16.385 13.6538C16.3845 14.3359 16.3837 15.3446 17.9128 15.619C19.4699 15.8983 21.1552 16.1648 21.7438 16.2386C22.5942 16.3558 24.2955 15.5862 23.9558 13.0436C23.5173 9.76183 19.459 8.72608 18.1638 8.39553C18.0996 8.37913 18.0421 8.36446 17.9922 8.35134C17.1487 8.1295 13.6956 7.69163 12.0084 7.75648Z" fill="black"/>
|
||||
<path d="M8.02698 15.9613C9.16801 17.1932 11.9148 19.3263 12.6635 19.7641C12.7078 19.79 12.7585 19.8201 12.8152 19.8538C13.9576 20.5329 17.5373 22.6609 20.1454 20.6694C22.1661 19.1266 21.5091 17.3909 20.8289 16.875C20.3633 16.5128 18.9914 15.5145 17.7006 14.6152C16.4331 13.7322 15.7268 14.4397 15.2492 14.918C15.2404 14.9268 15.2317 14.9355 15.2231 14.9442L14.2621 15.9051C14.0174 16.1498 13.6451 16.0605 13.2886 15.7804C12.0092 14.8061 11.0681 13.8659 10.5972 13.395L10.5933 13.391C10.1225 12.9202 9.19387 11.9908 8.21957 10.7114C7.93949 10.3548 7.85018 9.9826 8.09489 9.73789L9.05586 8.77693C9.06448 8.7683 9.0732 8.7596 9.08199 8.75082C9.56034 8.27321 10.2678 7.56684 9.38479 6.29937C8.48555 5.0086 7.4872 3.6367 7.125 3.17106C6.60907 2.49094 4.87345 1.83392 3.33056 3.85458C1.33907 6.46274 3.46708 10.0424 4.1462 11.1848C4.17991 11.2415 4.21005 11.2922 4.23593 11.3365C4.67367 12.0851 6.79507 14.8202 8.02698 15.9613Z" fill="currentColor"/>
|
||||
<path d="M20.6971 3.07817C20.94 2.83153 20.94 2.43163 20.6971 2.18499C20.4542 1.93834 20.0603 1.93834 19.8174 2.18499L17 5.04555L14.1826 2.18499C13.9397 1.93834 13.5458 1.93834 13.3029 2.18499C13.06 2.43163 13.06 2.83153 13.3029 3.07817L16.1203 5.93873L13.1822 8.92183C12.9393 9.16847 12.9393 9.56837 13.1822 9.81501C13.4251 10.0617 13.819 10.0617 14.0619 9.81501L17 6.83192L19.9381 9.81501C20.181 10.0617 20.5749 10.0617 20.8178 9.81501C21.0607 9.56837 21.0607 9.16847 20.8178 8.92182L17.8797 5.93873L20.6971 3.07817Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.0071 7.39308C9.57295 7.33796 6.62364 7.71014 5.90662 7.8987C5.86422 7.90986 5.81537 7.92232 5.76073 7.93627C4.65985 8.21723 1.2103 9.09763 0.837594 11.8872C0.548842 14.0484 1.99488 14.7025 2.71774 14.6029C3.21806 14.5402 4.65057 14.3136 5.97414 14.0762C7.27383 13.843 7.27317 12.9856 7.27273 12.4058C7.27272 12.3951 7.27271 12.3846 7.27271 12.3741L7.27271 11.2085C7.27271 10.9117 7.55166 10.7401 7.93642 10.6937C9.29847 10.5087 10.4355 10.5082 11.0047 10.5082L11.0095 10.5082C11.5786 10.5082 12.7015 10.5087 14.0636 10.6938C14.4483 10.7401 14.7273 10.9117 14.7273 11.2085L14.7273 12.3741C14.7273 12.3846 14.7273 12.3952 14.7273 12.4058C14.7268 12.9856 14.7261 13.843 16.0258 14.0762C17.3494 14.3136 18.7819 14.5402 19.2822 14.6029C20.0051 14.7025 21.4511 14.0484 21.1624 11.8872C20.7897 9.09763 17.3401 8.21724 16.2393 7.93628C16.1846 7.92233 16.1358 7.90986 16.0934 7.89871C15.3763 7.71015 12.4412 7.33796 11.0071 7.39308Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.35116 10.6409C6.11185 11.4622 7.94306 12.8843 8.44217 13.1761C8.47169 13.1934 8.50549 13.2135 8.54328 13.2359C9.30489 13.6887 11.6913 15.1074 13.4301 13.7797C14.7772 12.7511 14.3392 11.594 13.8858 11.2501C13.5754 11.0086 12.6608 10.3431 11.8003 9.74356C10.9553 9.15489 10.4844 9.62653 10.1659 9.94543C10.1601 9.95129 10.1543 9.9571 10.1485 9.96285L9.50791 10.6035C9.34477 10.7666 9.0966 10.7071 8.8589 10.5204C8.00599 9.87084 7.37856 9.24399 7.06465 8.93008L7.06201 8.92744C6.74815 8.61357 6.12909 7.99392 5.47955 7.14101C5.29283 6.90331 5.23329 6.65515 5.39643 6.49201L6.03708 5.85136C6.04283 5.84561 6.04864 5.83981 6.0545 5.83396C6.3734 5.51555 6.84504 5.04464 6.25636 4.19966C5.65687 3.33915 4.9913 2.42455 4.74984 2.11412C4.40588 1.66071 3.2488 1.22269 2.22021 2.5698C0.89255 4.30858 2.31122 6.69502 2.76397 7.45663C2.78644 7.49443 2.80653 7.52822 2.82379 7.55774C3.11562 8.05685 4.52989 9.88025 5.35116 10.6409Z" fill="#737D8C"/>
|
||||
<path d="M13.7979 2.05203C13.9599 1.8876 13.9599 1.62101 13.7979 1.45658C13.636 1.29214 13.3734 1.29214 13.2114 1.45658L11.3332 3.36362L9.4549 1.45658C9.29295 1.29214 9.03037 1.29214 8.86842 1.45658C8.70647 1.62101 8.70647 1.8876 8.86842 2.05203L10.7467 3.95907L8.78797 5.9478C8.62602 6.11223 8.62602 6.37883 8.78797 6.54326C8.94992 6.70769 9.21249 6.70769 9.37444 6.54326L11.3332 4.55453L13.2919 6.54326C13.4538 6.70769 13.7164 6.70769 13.8784 6.54326C14.0403 6.37883 14.0403 6.11223 13.8784 5.9478L11.9196 3.95907L13.7979 2.05203Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -188,9 +188,10 @@ $call-view-content-background: $quinary-content;
|
|||
|
||||
$video-feed-secondary-background: $system;
|
||||
|
||||
$call-lobby-system: $system;
|
||||
$call-lobby-background: $background;
|
||||
$call-lobby-primary-content: $primary-content;
|
||||
$call-system: $system;
|
||||
$call-background: $background;
|
||||
$call-primary-content: $primary-content;
|
||||
$call-light-quaternary-content: #c1c6cd;
|
||||
/* ******************** */
|
||||
|
||||
/* Location sharing */
|
||||
|
|
|
|||
|
|
@ -119,9 +119,10 @@ $call-view-content-background: $quinary-content;
|
|||
|
||||
$video-feed-secondary-background: $system;
|
||||
|
||||
$call-lobby-system: $system;
|
||||
$call-lobby-background: $background;
|
||||
$call-lobby-primary-content: $primary-content;
|
||||
$call-system: $system;
|
||||
$call-background: $background;
|
||||
$call-primary-content: $primary-content;
|
||||
$call-light-quaternary-content: #c1c6cd;
|
||||
|
||||
$roomlist-filter-active-bg-color: $panel-actions;
|
||||
$roomlist-bg-color: $header-panel-bg-color;
|
||||
|
|
|
|||
|
|
@ -182,9 +182,10 @@ $call-view-content-background: #21262c;
|
|||
$video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
|
||||
|
||||
/* All of these are from dark theme */
|
||||
$call-lobby-system: #21262c;
|
||||
$call-lobby-background: #15191e;
|
||||
$call-lobby-primary-content: #ffffff;
|
||||
$call-system: #21262c;
|
||||
$call-background: #15191e;
|
||||
$call-primary-content: #ffffff;
|
||||
$call-light-quaternary-content: #c1c6cd;
|
||||
|
||||
$username-variant1-color: #368bd6;
|
||||
$username-variant2-color: #ac3ba8;
|
||||
|
|
|
|||
|
|
@ -273,9 +273,11 @@ $video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
|
|||
$voipcall-plinth-color: $system;
|
||||
|
||||
/* All of these are from dark theme */
|
||||
$call-lobby-system: #21262c;
|
||||
$call-lobby-background: #15191e;
|
||||
$call-lobby-primary-content: #ffffff;
|
||||
$call-system: #21262c;
|
||||
$call-background: #15191e;
|
||||
$call-primary-content: #ffffff;
|
||||
/* This one is from light theme */
|
||||
$call-light-quaternary-content: #c1c6cd;
|
||||
/* ******************** */
|
||||
|
||||
/* One-off colors */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue