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

Commit 633c26d

Browse files
robintownrobintown
committed
Redesign the picture-in-picture window
1 parent 42cc3ca commit 633c26d

File tree

23 files changed

+471
-220
lines changed

23 files changed

+471
-220
lines changed

‎res/css/_components.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
@import "./components/views/location/_ZoomButtons.pcss";
3131
@import "./components/views/messages/_MBeaconBody.pcss";
3232
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
33+
@import "./components/views/pips/_WidgetPip.pcss";
3334
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
3435
@import "./components/views/settings/devices/_DeviceDetails.pcss";
3536
@import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";

‎res/css/components/views/pips/_WidgetPip.pcss‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_WidgetPip {
18+
position: fixed;
19+
left: 0;
20+
top: 0;
21+
/* Display above the widget element */
22+
z-index: 102;
23+
}
24+
25+
.mx_WidgetPip_content {
26+
width: 320px;
27+
height: 220px;
28+
border-radius: 8px;
29+
contain: paint;
30+
color: $call-primary-content;
31+
cursor: pointer;
32+
}
33+
34+
.mx_WidgetPip_header,
35+
.mx_WidgetPip_footer {
36+
position: absolute;
37+
left: 0;
38+
height: 60px;
39+
width: 100%;
40+
box-sizing: border-box;
41+
}
42+
43+
.mx_WidgetPip_header {
44+
top: 0;
45+
padding: $spacing-12;
46+
display: flex;
47+
font-size: $font-12px;
48+
font-weight: $font-semi-bold;
49+
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
50+
}
51+
52+
.mx_WidgetPip_backButton {
53+
height: $spacing-24;
54+
display: flex;
55+
align-items: center;
56+
gap: $spacing-12;
57+
58+
> .mx_Icon {
59+
color: $call-light-quaternary-content;
60+
padding: 0;
61+
}
62+
}
63+
64+
.mx_WidgetPip_footer {
65+
bottom: 0;
66+
padding: $spacing-12 $spacing-8;
67+
display: flex;
68+
justify-content: flex-end;
69+
align-items: flex-end;
70+
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
71+
}

‎res/css/views/messages/_LegacyCallEvent.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ limitations under the License.
6868
&.mx_LegacyCallEvent_rejected,
6969
&.mx_LegacyCallEvent_noAnswer {
7070
.mx_LegacyCallEvent_type_icon::before {
71-
mask-image: url("$(res)/img/voip/declined-voice.svg");
71+
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
7272
}
7373
}
7474
}

‎res/css/views/rooms/_AppsDrawer.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
1515
limitations under the License.
1616
*/
1717

18-
$MiniAppTileHeight: 200px;
18+
$MiniAppTileHeight: 220px;
1919
/* TODO this should be 300px but that's too large */
2020
$MinWidth: 240px;
2121

‎res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ limitations under the License.
159159
background-color: $alert;
160160

161161
&::before {
162-
mask-image: url("$(res)/img/voip/call-view/hangup.svg");
162+
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
163163
background-color: white; /* Same on both themes */
164164
}
165165
}

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ limitations under the License.
3232
height: 100%;
3333
border: none;
3434
border-radius: inherit;
35-
background-color: $call-lobby-background;
35+
background-color: $call-background;
3636
}
3737

3838
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
@@ -44,8 +44,8 @@ limitations under the License.
4444
min-height: 0;
4545
flex-grow: 1;
4646
padding: $spacing-12;
47-
color: $call-lobby-primary-content;
48-
background-color: $call-lobby-background;
47+
color: $call-primary-content;
48+
background-color: $call-background;
4949
border-radius: 8px;
5050

5151
display: flex;
@@ -59,7 +59,7 @@ limitations under the License.
5959
margin: $spacing-8 auto 0;
6060

6161
.mx_FacePile_faces .mx_BaseAvatar_image {
62-
border-color: $call-lobby-background;
62+
border-color: $call-background;
6363
}
6464
}
6565

@@ -68,7 +68,7 @@ limitations under the License.
6868
width: 100%;
6969
max-width: 800px;
7070
aspect-ratio: 1.5;
71-
background-color: $call-lobby-system;
71+
background-color: $call-system;
7272

7373
border-radius: 20px;
7474
overflow: hidden;
@@ -106,7 +106,7 @@ limitations under the License.
106106
left: 0;
107107
right: 0;
108108

109-
background-color: rgba($call-lobby-background, 0.9);
109+
background-color: rgba($call-background, 0.9);
110110

111111
display: flex;
112112
justify-content: center;
@@ -122,7 +122,7 @@ limitations under the License.
122122
width: $size;
123123
height: $size;
124124

125-
background-color: $call-lobby-system;
125+
background-color: $call-system;
126126
border-radius: calc($size / 2);
127127

128128
&::before {
@@ -131,7 +131,7 @@ limitations under the License.
131131
mask-repeat: no-repeat;
132132
mask-size: 20px;
133133
mask-position: center;
134-
background-color: $call-lobby-primary-content;
134+
background-color: $call-primary-content;
135135
height: 100%;
136136
width: 100%;
137137
}
@@ -154,7 +154,7 @@ limitations under the License.
154154
width: $size;
155155
height: $size;
156156

157-
background-color: $call-lobby-system;
157+
background-color: $call-system;
158158
border-radius: calc($size / 2);
159159

160160
&::before {
@@ -163,7 +163,7 @@ limitations under the License.
163163
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
164164
mask-size: $size;
165165
mask-position: center;
166-
background-color: $call-lobby-primary-content;
166+
background-color: $call-primary-content;
167167
height: 100%;
168168
width: 100%;
169169
}
@@ -172,10 +172,10 @@ limitations under the License.
172172
&.mx_CallView_deviceButtonWrapper_muted {
173173
.mx_CallView_deviceButton,
174174
.mx_CallView_deviceListButton {
175-
background-color: $call-lobby-primary-content;
175+
background-color: $call-primary-content;
176176

177177
&::before {
178-
background-color: $call-lobby-system;
178+
background-color: $call-system;
179179
}
180180
}
181181

‎res/css/views/voip/_LegacyCallPreview.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,4 @@ limitations under the License.
2727
border-radius: 8px;
2828
overflow: hidden;
2929
}
30-
}
30+
}

‎res/img/element-icons/call/hangup.svg‎

Lines changed: 2 additions & 1 deletion
Loading

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

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎res/img/voip/declined-voice.svg‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)