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

Commit

Permalink
Update video rooms to new design specs (#8207)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@robintown
robintown authored Apr 1, 2022
1 parent 020c1c6 commit 1f64835
Show file tree
Hide file tree
Showing 38 changed files with 793 additions and 1,300 deletions.
1 change: 0 additions & 1 deletion res/css/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,4 +314,3 @@
@import "./views/voip/_DialPadModal.scss";
@import "./views/voip/_PiPContainer.scss";
@import "./views/voip/_VideoFeed.scss";
@import "./views/voip/_VoiceChannelRadio.scss";
4 changes: 2 additions & 2 deletions res/css/structures/_RoomView.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/elements/_FacePile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ limitations under the License.
flex-direction: row-reverse;
vertical-align: middle;

> * + * {
> .mx_FacePile_face + .mx_FacePile_face {
margin-right: -8px;
}

Expand Down
5 changes: 4 additions & 1 deletion res/css/views/rooms/_RoomList.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down
5 changes: 4 additions & 1 deletion res/css/views/rooms/_RoomListHeader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down
246 changes: 108 additions & 138 deletions res/css/views/rooms/_RoomTile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -37,165 +38,138 @@ 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_titleContainer {
min-width: 0;
flex-basis: 0;
flex-grow: 1;
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_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
.mx_RoomTile_title, .mx_RoomTile_subtitle {
width: 100%;

// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_RoomTile_title {
font-size: $font-14px;
line-height: $font-18px;

.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
&.mx_RoomTile_titleHasUnreadEvents {
font-weight: 600;
}
}

// 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;
.mx_RoomTile_subtitle {
line-height: $font-18px;
color: $secondary-content;

.mx_RoomTile_videoIndicator {
&::before {
top: 2px;
left: 2px;
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
mask-size: 16px;
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-content;
margin-right: 4px;
}
}

// 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_videoIndicator_active {
color: $accent;

&::before {
background-color: $accent;
}
}
}

.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
.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_voiceChannel {
width: 100%;
display: flex;
align-items: center;
.mx_RoomTile_titleWithSubtitle {
margin-top: -3px; // shift the title up a bit more
}
}

.mx_FacePile {
margin: 6px 0 4px;
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}

.mx_RoomTile_connectVoiceButton {
font-weight: 600;
padding-left: 10px;
padding-right: 10px;
.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

&::before {
content: '';
background-color: $accent;
mask-image: url('$(res)/img/voip/voice-room.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
}
// 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) {
&:hover,
&:focus-within,
Expand All @@ -222,10 +196,6 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}

.mx_RoomTile_details {
display: none;
}
}
}

Expand Down
Loading

0 comments on commit 1f64835

Please sign in to comment.