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

Commit

Permalink
Merge branch 'develop' into AccessibleButton
Browse files Browse the repository at this point in the history
  • Loading branch information
luixxiul authored Apr 1, 2022
2 parents 4e2a03e + 1f64835 commit e288668
Showing 45 changed files with 883 additions and 1,372 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -57,7 +57,7 @@ tracks lots of state for its child components which it passes into them for visu
rendering via props.

Good separation between the components is maintained by adopting various best
practices that anyone working with the SDK needs to be be aware of and uphold:
practices that anyone working with the SDK needs to be aware of and uphold:

* Components are named with upper camel case (e.g. views/rooms/EventTile.js)

1 change: 0 additions & 1 deletion res/css/_components.scss
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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 {
2 changes: 1 addition & 1 deletion res/css/views/elements/_FacePile.scss
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ limitations under the License.
flex-direction: row-reverse;
vertical-align: middle;

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

5 changes: 4 additions & 1 deletion res/css/views/rooms/_RoomList.scss
Original file line number Diff line number Diff line change
@@ -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');
}
5 changes: 4 additions & 1 deletion res/css/views/rooms/_RoomListHeader.scss
Original file line number Diff line number Diff line change
@@ -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');
}
246 changes: 108 additions & 138 deletions res/css/views/rooms/_RoomTile.scss
Original file line number Diff line number Diff line change
@@ -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,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,
@@ -222,10 +196,6 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}

.mx_RoomTile_details {
display: none;
}
}
}

Loading

0 comments on commit e288668

Please sign in to comment.