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

Commit

Permalink
Implement searching for public rooms and users in new search experience
Browse files Browse the repository at this point in the history
  • Loading branch information
@justjanne
justjanne committed May 27, 2022
1 parent 73c88da commit 567e4f6
Show file tree
Hide file tree
Showing 3 changed files with 662 additions and 203 deletions.
163 changes: 156 additions & 7 deletions res/css/views/dialogs/_SpotlightDialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: #F4F6FA;
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;
Expand All @@ -81,12 +144,22 @@ limitations under the License.
overflow-y: auto;

.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;
}

Expand All @@ -103,7 +176,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;
Expand All @@ -122,7 +195,7 @@ limitations under the License.
margin: 0 9px 4px; // maintain centering
}

& + .mx_AccessibleButton {
& + .mx_SpotlightDialog_option {
margin-left: 16px;
}

Expand All @@ -134,8 +207,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;
Expand All @@ -148,6 +222,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 {
Expand All @@ -161,6 +249,34 @@ 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;

.mx_SpotlightDialog_result_publicRoomName {
color: $primary-content;
font-size: $font-15px;
}
.mx_SpotlightDialog_result_publicRoomAlias {
color: $tertiary-content;
font-size: $font-12px;
margin-left: 8px;
}
}
.mx_SpotlightDialog_result_publicRoomDescription {
word-wrap: break-word;
white-space: break-spaces;
color: $secondary-content;
font-size: $font-12px;
}
}

.mx_NotificationBadge {
margin-left: 8px;
}
Expand All @@ -175,10 +291,39 @@ limitations under the License.
}
}

.mx_SpotlightDialog_inviteLink .mx_AccessibleButton,
.mx_SpotlightDialog_createRoom .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;

Expand Down Expand Up @@ -209,6 +354,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;
Expand Down
Loading

0 comments on commit 567e4f6

Please sign in to comment.