Update video rooms to new design specs (#8207)
* Remove radio component * "Voice room" → "video room" * Remove interactivity from video room tiles * Update connection state when joining via widget * Simplify room header buttons for video rooms * Split out video room creation into a separate menu option * Simplify room options for video rooms * Update video room tile layout * Tell the Jitsi widget whether it's a video channel * Update tests * "Voice" → "video" in more places * Fix tests * Re-add frame to immersive Jitsi widgets * Comment ack * Make updateDevices more readable * Type FacePile
This commit is contained in:
Robin
@@ -314,4 +314,3 @@
|
||||
@import "./views/voip/_DialPadModal.scss";
|
||||
@import "./views/voip/_PiPContainer.scss";
|
||||
@import "./views/voip/_VideoFeed.scss";
|
||||
@import "./views/voip/_VoiceChannelRadio.scss";
|
||||
|
||||
@@ -218,9 +218,9 @@ hr.mx_RoomView_myReadMarker {
|
||||
margin-right: calc($container-gap-width / 2);
|
||||
width: auto;
|
||||
height: 100%;
|
||||
padding-top: 33px; // to match the right panel chat heading
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
|
||||
|
||||
@@ -20,7 +20,7 @@ limitations under the License.
|
||||
flex-direction: row-reverse;
|
||||
vertical-align: middle;
|
||||
|
||||
> * + * {
|
||||
> .mx_FacePile_face + .mx_FacePile_face {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,9 +21,12 @@ limitations under the License.
|
||||
.mx_RoomList_iconPlus::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
|
||||
}
|
||||
.mx_RoomList_iconCreateNewRoom::before {
|
||||
.mx_RoomList_iconNewRoom::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
|
||||
}
|
||||
.mx_RoomList_iconNewVideoRoom::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
.mx_RoomList_iconAddExistingRoom::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/hash.svg');
|
||||
}
|
||||
|
||||
@@ -103,9 +103,12 @@ limitations under the License.
|
||||
.mx_RoomListHeader_iconStartChat::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/member-plus.svg');
|
||||
}
|
||||
.mx_RoomListHeader_iconCreateRoom::before {
|
||||
.mx_RoomListHeader_iconNewRoom::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
|
||||
}
|
||||
.mx_RoomListHeader_iconNewVideoRoom::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
.mx_RoomListHeader_iconExplore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');
|
||||
}
|
||||
|
||||
+113
-143
@@ -19,11 +19,12 @@ limitations under the License.
|
||||
margin-bottom: 4px;
|
||||
padding: 4px;
|
||||
|
||||
// The tile is also a flexbox row itself
|
||||
display: flex;
|
||||
contain: content; // Not strict as it will break when resizing a sublist vertically
|
||||
box-sizing: border-box;
|
||||
|
||||
// The tile is also a flexbox row itself
|
||||
display: flex;
|
||||
font-size: $font-13px;
|
||||
|
||||
&.mx_RoomTile_selected,
|
||||
&:hover,
|
||||
@@ -37,163 +38,136 @@ limitations under the License.
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_details {
|
||||
.mx_RoomTile_titleContainer {
|
||||
height: 32px;
|
||||
min-width: 0;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
min-width: 0; // allow flex to shrink it
|
||||
margin-right: 8px; // spacing to buttons/badges
|
||||
|
||||
// Create a new column layout flexbox for the title parts
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_RoomTile_primaryDetails {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.mx_RoomTile_title, .mx_RoomTile_subtitle {
|
||||
width: 100%;
|
||||
|
||||
.mx_RoomTile_titleContainer {
|
||||
min-width: 0;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
margin-right: 8px; // spacing to buttons/badges
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Create a new column layout flexbox for the title parts
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.mx_RoomTile_title {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
|
||||
.mx_RoomTile_title, .mx_RoomTile_subtitle {
|
||||
width: 100%;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_RoomTile_title {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_RoomTile_subtitle {
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_RoomTile_subtitle.mx_RoomTile_voiceIndicator {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
content: '';
|
||||
background-color: $secondary-content;
|
||||
mask-image: url('$(res)/img/voip/voice-room.svg');
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&.mx_RoomTile_voiceIndicator_active {
|
||||
color: $accent;
|
||||
|
||||
&::before {
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_titleWithSubtitle {
|
||||
margin-top: -3px; // shift the title up a bit more
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_notificationsButton {
|
||||
margin-left: 4px; // spacing between buttons
|
||||
}
|
||||
|
||||
.mx_RoomTile_badgeContainer {
|
||||
height: 16px;
|
||||
// don't set width so that it takes no space when there is no badge to show
|
||||
margin: auto 0; // vertically align
|
||||
|
||||
// Create a flexbox to make aligning dot badges easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 2px; // centering
|
||||
}
|
||||
|
||||
.mx_NotificationBadge_dot {
|
||||
// make the smaller dot occupy the same width for centering
|
||||
margin-left: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// The context menu buttons are hidden by default
|
||||
.mx_RoomTile_menuButton,
|
||||
.mx_RoomTile_notificationsButton {
|
||||
width: 20px;
|
||||
min-width: 20px; // yay flex
|
||||
height: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
// If the room has an overriden notification setting then we always show the notifications menu button
|
||||
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_RoomTile_menuButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
&.mx_RoomTile_titleHasUnreadEvents {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_voiceChannel {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_FacePile {
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_connectVoiceButton {
|
||||
font-weight: 600;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
.mx_RoomTile_subtitle {
|
||||
line-height: $font-18px;
|
||||
color: $secondary-content;
|
||||
|
||||
.mx_RoomTile_videoIndicator {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
content: '';
|
||||
background-color: $accent;
|
||||
mask-image: url('$(res)/img/voip/voice-room.svg');
|
||||
background-color: $secondary-content;
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&.mx_RoomTile_videoIndicator_active {
|
||||
color: $accent;
|
||||
|
||||
&::before {
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_videoParticipants::before {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
content: '';
|
||||
background-color: $secondary-content;
|
||||
mask-image: url('$(res)/img/element-icons/group-members.svg');
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_titleWithSubtitle {
|
||||
margin-top: -3px; // shift the title up a bit more
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_notificationsButton {
|
||||
margin-left: 4px; // spacing between buttons
|
||||
}
|
||||
|
||||
.mx_RoomTile_badgeContainer {
|
||||
height: 16px;
|
||||
// don't set width so that it takes no space when there is no badge to show
|
||||
margin: auto 0; // vertically align
|
||||
|
||||
// Create a flexbox to make aligning dot badges easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 2px; // centering
|
||||
}
|
||||
|
||||
.mx_NotificationBadge_dot {
|
||||
// make the smaller dot occupy the same width for centering
|
||||
margin-left: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// The context menu buttons are hidden by default
|
||||
.mx_RoomTile_menuButton,
|
||||
.mx_RoomTile_notificationsButton {
|
||||
width: 20px;
|
||||
min-width: 20px; // yay flex
|
||||
height: 20px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
// If the room has an overriden notification setting then we always show the notifications menu button
|
||||
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_RoomTile_menuButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
}
|
||||
|
||||
&:not(.mx_RoomTile_minimized) {
|
||||
@@ -222,10 +196,6 @@ limitations under the License.
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomTile_details {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
/*
|
||||
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_VoiceChannelRadio {
|
||||
background-color: $system;
|
||||
|
||||
> .mx_VoiceChannelRadio_statusBar {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
> .mx_VoiceChannelRadio_titleContainer {
|
||||
flex-grow: 1;
|
||||
|
||||
> .mx_VoiceChannelRadio_status {
|
||||
font-size: $font-15px;
|
||||
color: $accent;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-color: $accent;
|
||||
mask-image: url('$(res)/img/voip/signal-bars.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
> .mx_VoiceChannelRadio_name {
|
||||
font-size: $font-13px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
> .mx_VoiceChannelRadio_disconnectButton::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: $tertiary-content;
|
||||
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
|
||||
mask-position: center;
|
||||
mask-size: 24px;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
> .mx_VoiceChannelRadio_controlBar {
|
||||
display: flex;
|
||||
border-top: 1px solid $quinary-content;
|
||||
padding: 12px 16px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
> .mx_AccessibleButton {
|
||||
font-size: $font-15px;
|
||||
padding: 6px 0;
|
||||
|
||||
&.mx_VoiceChannelRadio_button_active {
|
||||
padding: 6px 12px;
|
||||
background-color: $quinary-content;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
> .mx_VoiceChannelRadio_videoButton::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $primary-content;
|
||||
vertical-align: sub;
|
||||
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
> .mx_VoiceChannelRadio_videoButton.mx_VoiceChannelRadio_button_active::before {
|
||||
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
|
||||
}
|
||||
|
||||
> .mx_VoiceChannelRadio_audioButton::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $primary-content;
|
||||
vertical-align: sub;
|
||||
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
> .mx_VoiceChannelRadio_audioButton.mx_VoiceChannelRadio_button_active::before {
|
||||
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5203 22.4387C18.4279 22.4387 23.217 17.6492 23.217 11.7411C23.217 5.83295 18.4279 1.04346 12.5203 1.04346C6.61261 1.04346 1.82353 5.83295 1.82353 11.7411C1.82353 13.3962 2.19936 14.9635 2.87032 16.3623L0.795333 23.1065C0.727424 23.3273 0.934782 23.5337 1.1552 23.4648L7.85572 21.3707C9.26544 22.055 10.848 22.4387 12.5203 22.4387ZM5.68079 11.6412C5.68079 11.3264 5.93601 11.0712 6.25083 11.0712C6.56566 11.0712 6.82088 11.3264 6.82088 11.6412V12.5533C6.82088 12.8681 6.56566 13.1233 6.25083 13.1233C5.93601 13.1233 5.68079 12.8681 5.68079 12.5533V11.6412ZM18.7919 11.0712C18.477 11.0712 18.2218 11.3264 18.2218 11.6412V12.5533C18.2218 12.8681 18.477 13.1233 18.7919 13.1233C19.1067 13.1233 19.3619 12.8681 19.3619 12.5533V11.6412C19.3619 11.3264 19.1067 11.0712 18.7919 11.0712ZM8.189 10.045C8.189 9.73017 8.44422 9.47495 8.75905 9.47495C9.07388 9.47495 9.3291 9.73017 9.3291 10.045V14.3774C9.3291 14.6922 9.07388 14.9474 8.75905 14.9474C8.44422 14.9474 8.189 14.6922 8.189 14.3774V10.045ZM16.2836 9.47495C15.9688 9.47495 15.7136 9.73017 15.7136 10.045V14.3774C15.7136 14.6922 15.9688 14.9474 16.2836 14.9474C16.5985 14.9474 16.8537 14.6922 16.8537 14.3774V10.045C16.8537 9.73017 16.5985 9.47495 16.2836 9.47495ZM10.6972 7.30882C10.6972 6.99399 10.9524 6.73877 11.2672 6.73877C11.582 6.73877 11.8373 6.99399 11.8373 7.30882V16.4296C11.8373 16.7444 11.582 16.9996 11.2672 16.9996C10.9524 16.9996 10.6972 16.7444 10.6972 16.4296V7.30882ZM13.7754 6.73877C13.4606 6.73877 13.2054 6.99399 13.2054 7.30882V16.4296C13.2054 16.7444 13.4606 16.9996 13.7754 16.9996C14.0903 16.9996 14.3455 16.7444 14.3455 16.4296V7.30882C14.3455 6.99399 14.0903 6.73877 13.7754 6.73877Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
Reference in New Issue
Block a user