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

Update video rooms to new design specs #8207

Merged
robintown merged 17 commits into from
Apr 1, 2022
Merged

Update video rooms to new design specs #8207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7a22e80
Remove radio component
robintown Mar 28, 2022
a63904f
"Voice room" → "video room"
robintown Mar 28, 2022
3559743
Remove interactivity from video room tiles
robintown Mar 29, 2022
afd5dcb
Update connection state when joining via widget
robintown Mar 29, 2022
7efa7d5
Simplify room header buttons for video rooms
robintown Mar 29, 2022
a8ba3be
Split out video room creation into a separate menu option
robintown Mar 29, 2022
3b917bf
Simplify room options for video rooms
robintown Mar 29, 2022
5f5723e
Update video room tile layout
robintown Mar 30, 2022
71d6eb9
Tell the Jitsi widget whether it's a video channel
robintown Mar 30, 2022
8c25675
Update tests
robintown Mar 31, 2022
6ffdc45
"Voice" → "video" in more places
robintown Mar 31, 2022
0e4e8db
Fix tests
robintown Mar 31, 2022
23b8470
Merge branch 'develop' into video-rooms
robintown Apr 1, 2022
262208a
Re-add frame to immersive Jitsi widgets
robintown Apr 1, 2022
0dda153
Comment ack
robintown Apr 1, 2022
a53de43
Make updateDevices more readable
robintown Apr 1, 2022
1544e5b
Type FacePile
robintown Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion res/css/_components.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Comment thread
kerryarchibald marked this conversation as resolved.
}

.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
Comment thread
kerryarchibald marked this conversation as resolved.
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