Integrate searching public rooms and people into the new search experience (#8707)
* Implement searching for public rooms and users in new search experience * Implement loading indicator for spotlight results * Moved spotlight dialog into own subfolder * Extract search result avatar into separate component * Build generic new dropdown menu component * Build new network menu based on new network dropdown component * Switch roomdirectory to use new network dropdown * Replace old networkdropdown with new networkdropdown * Added component for public room result details * Extract hooks and subcomponents from SpotlightDialog * Create new hook to get profile info based for an mxid * Add hook to automatically re-request search results * Add hook to prevent out-of-order search results * Extract member sort algorithm from InviteDialog * Keep sorting for non-room results stable * Sort people suggestions using sort algorithm from InviteDialog * Add copy/copied tooltip for invite link option in spotlight * Clamp length of topic for public room results * Add unit test for useDebouncedSearch * Add unit test for useProfileInfo * Create cypress test cases for spotlight dialog * Add test for useLatestResult to prevent out-of-order results
This commit is contained in:
Janne Mareike Koschinski
GitHub
parent
37298d7b1b
commit
5096e7b992
38 changed files with 3520 additions and 1397 deletions
|
|
@ -160,14 +160,14 @@ limitations under the License.
|
|||
padding-right: 8px;
|
||||
color: #ffffff; // this is fine without a var because it's for both themes
|
||||
|
||||
.mx_InviteDialog_userTile_avatar {
|
||||
.mx_SearchResultAvatar {
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
img.mx_InviteDialog_userTile_avatar {
|
||||
img.mx_SearchResultAvatar {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -175,7 +175,7 @@ limitations under the License.
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_userTile_threepidAvatar {
|
||||
.mx_SearchResultAvatar_threepidAvatar {
|
||||
background-color: #ffffff; // this is fine without a var because it's for both themes
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,6 +61,69 @@ limitations under the License.
|
|||
padding: 12px 16px;
|
||||
border-bottom: 1px solid $system;
|
||||
|
||||
> .mx_SpotlightDialog_filter {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
margin-right: 8px;
|
||||
background-color: $quinary-content;
|
||||
vertical-align: middle;
|
||||
color: $primary-content;
|
||||
position: relative;
|
||||
padding: 4px 8px 4px 37px;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_filterPeople::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/members.svg');
|
||||
}
|
||||
|
||||
&.mx_SpotlightDialog_filterPublicRooms::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_filter--close {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $system;
|
||||
border-radius: 8px;
|
||||
margin-left: 8px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
mask-image: url("$(res)/img/cancel-small.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -73,20 +136,37 @@ limitations under the License.
|
|||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
|
||||
> .mx_Spinner {
|
||||
flex-grow: 0;
|
||||
width: unset;
|
||||
height: unset;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#mx_SpotlightDialog_content {
|
||||
margin: 16px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
|
||||
.mx_SpotlightDialog_section {
|
||||
> h4 {
|
||||
> h4, > .mx_SpotlightDialog_sectionHeader > h4 {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> h4 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_sectionHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -103,7 +183,7 @@ limitations under the License.
|
|||
margin-right: 1px; // occlude the 1px visible of the very next tile to prevent it looking broken
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
.mx_SpotlightDialog_option {
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
color: $primary-content;
|
||||
|
|
@ -122,7 +202,7 @@ limitations under the License.
|
|||
margin: 0 9px 4px; // maintain centering
|
||||
}
|
||||
|
||||
& + .mx_AccessibleButton {
|
||||
& + .mx_SpotlightDialog_option {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -134,8 +214,9 @@ limitations under the License.
|
|||
|
||||
.mx_SpotlightDialog_results,
|
||||
.mx_SpotlightDialog_recentSearches,
|
||||
.mx_SpotlightDialog_otherSearches {
|
||||
.mx_AccessibleButton {
|
||||
.mx_SpotlightDialog_otherSearches,
|
||||
.mx_SpotlightDialog_hiddenResults {
|
||||
.mx_SpotlightDialog_option {
|
||||
padding: 6px 4px;
|
||||
border-radius: 8px;
|
||||
font-size: $font-15px;
|
||||
|
|
@ -148,6 +229,20 @@ limitations under the License.
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
&.mx_SpotlightDialog_result_multiline {
|
||||
align-items: start;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
padding: 4px 20px;
|
||||
margin: 2px 4px;
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_enterPrompt {
|
||||
margin-top: 9px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
> .mx_SpotlightDialog_metaspaceResult,
|
||||
> .mx_DecoratedRoomAvatar,
|
||||
> .mx_BaseAvatar {
|
||||
|
|
@ -161,6 +256,44 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_result_publicRoomDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
.mx_SpotlightDialog_result_publicRoomHeader {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
line-height: $font-24px;
|
||||
margin-right: 8px;
|
||||
|
||||
.mx_SpotlightDialog_result_publicRoomName {
|
||||
color: $primary-content;
|
||||
font-size: $font-15px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mx_SpotlightDialog_result_publicRoomAlias {
|
||||
color: $tertiary-content;
|
||||
font-size: $font-12px;
|
||||
margin-left: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.mx_SpotlightDialog_result_publicRoomDescription {
|
||||
display: -webkit-box;
|
||||
color: $secondary-content;
|
||||
font-size: $font-12px;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
line-height: $font-20px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
|
@ -175,10 +308,43 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_inviteLink,
|
||||
.mx_SpotlightDialog_createRoom {
|
||||
margin-top: 8px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 3px 8px 3px 28px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
left: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
|
||||
mask-image: url("$(res)/img/element-icons/link.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
|
||||
mask-image: url("$(res)/img/element-icons/roomlist/hash.svg");
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_otherSearches {
|
||||
.mx_SpotlightDialog_startChat,
|
||||
.mx_SpotlightDialog_joinRoomAlias,
|
||||
.mx_SpotlightDialog_explorePublicRooms {
|
||||
.mx_SpotlightDialog_explorePublicRooms,
|
||||
.mx_SpotlightDialog_startGroupChat {
|
||||
padding-left: 32px;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -209,6 +375,10 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_startGroupChat::before {
|
||||
mask-image: url('$(res)/img/element-icons/group-members.svg');
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_otherSearches_messageSearchText {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue