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
|
|
@ -34,6 +34,7 @@
|
|||
@import "./structures/_FileDropTarget.scss";
|
||||
@import "./structures/_FilePanel.scss";
|
||||
@import "./structures/_GenericErrorPage.scss";
|
||||
@import "./structures/_GenericDropdownMenu.scss";
|
||||
@import "./structures/_HeaderButtons.scss";
|
||||
@import "./structures/_HomePage.scss";
|
||||
@import "./structures/_LeftPanel.scss";
|
||||
|
|
|
|||
123
res/css/structures/_GenericDropdownMenu.scss
Normal file
123
res/css/structures/_GenericDropdownMenu.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
/*
|
||||
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_GenericDropdownMenu_button {
|
||||
padding: 3px 4px 3px 8px;
|
||||
border-radius: 4px;
|
||||
line-height: 1.5;
|
||||
user-select: none;
|
||||
font-size: $font-12px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_GenericDropdownMenu_button:hover,
|
||||
.mx_GenericDropdownMenu_button[aria-expanded=true] {
|
||||
background: $quinary-content;
|
||||
}
|
||||
|
||||
.mx_GenericDropdownMenu_button::before {
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: currentColor;
|
||||
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
|
||||
mask-size: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper {
|
||||
.mx_ContextualMenu {
|
||||
position: initial;
|
||||
|
||||
font-size: $font-12px;
|
||||
color: $secondary-content;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
border: 1px solid $quinary-content;
|
||||
box-shadow: 0 1px 3px rgba(23, 25, 28, 0.05);
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_chevron_top {
|
||||
left: auto;
|
||||
right: 22px;
|
||||
border-bottom-color: $quinary-content;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
border: inherit;
|
||||
border-bottom-color: $menu-bg-color;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GenericDropdownMenu_divider {
|
||||
display: block;
|
||||
height: 0;
|
||||
margin-left: 4px;
|
||||
margin-right: 19px;
|
||||
border-top: 1px solid $system;
|
||||
}
|
||||
|
||||
.mx_GenericDropdownMenu_Option {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 10px 20px 10px 30px;
|
||||
position: relative;
|
||||
|
||||
> .mx_GenericDropdownMenu_Option--label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
margin: 0;
|
||||
|
||||
span:first-child {
|
||||
color: $primary-content;
|
||||
font-weight: $font-semi-bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_GenericDropdownMenu_Option--header > .mx_GenericDropdownMenu_Option--label span:first-child {
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
&.mx_GenericDropdownMenu_Option--item {
|
||||
&:hover {
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
|
||||
&[aria-checked="true"]::before {
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: -20px;
|
||||
margin-right: 8px;
|
||||
mask-image: url("$(res)/img/feather-customised/check.svg");
|
||||
mask-size: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $primary-content;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -54,8 +54,9 @@ limitations under the License.
|
|||
flex: 1 !important;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_listheader .mx_NetworkDropdown {
|
||||
flex: 0 0 200px;
|
||||
.mx_RoomDirectory_listheader .mx_GenericDropdownMenu_button {
|
||||
margin: 0 9px 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_tableWrapper {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
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.
|
||||
|
|
@ -14,151 +14,40 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_NetworkDropdown {
|
||||
height: 32px;
|
||||
.mx_NetworkDropdown_wrapper .mx_ContextualMenu {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_addServer {
|
||||
font-weight: normal;
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_removeServer {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
padding-right: 32px;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $system;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
color: $secondary-content;
|
||||
margin-left: auto;
|
||||
margin-right: 9px;
|
||||
margin-top: 12px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu {
|
||||
min-width: 204px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $dialog-close-fg-color;
|
||||
background-color: $background;
|
||||
max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu_network {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid $input-darker-fg-color;
|
||||
|
||||
.mx_NetworkDropdown_server_title {
|
||||
padding: 0 10px;
|
||||
font-size: $font-15px;
|
||||
font-weight: 600;
|
||||
line-height: $font-20px;
|
||||
margin-bottom: 4px;
|
||||
position: relative;
|
||||
|
||||
// remove server button
|
||||
.mx_AccessibleButton {
|
||||
position: absolute;
|
||||
display: inline;
|
||||
right: 10px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: 2px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_subtitle {
|
||||
padding: 0 10px;
|
||||
font-size: $font-10px;
|
||||
line-height: $font-14px;
|
||||
margin-top: -4px;
|
||||
margin-bottom: 4px;
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_network {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-16px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&[aria-checked=true]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
right: 10px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_add,
|
||||
.mx_NetworkDropdown_server_network {
|
||||
&:hover {
|
||||
background-color: $header-panel-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_add {
|
||||
padding: 16px 10px 16px 32px;
|
||||
position: relative;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 7px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/plus.svg');
|
||||
background-color: $muted-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_handle {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
|
||||
top: -3px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_handle_server {
|
||||
color: $muted-fg-color;
|
||||
font-size: $font-12px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
mask-image: url("$(res)/img/cancel-small.svg");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue