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

Commit

Permalink
Add unread badges and avatar decorations to spotlight search (#7696)
Browse files Browse the repository at this point in the history
  • Loading branch information
t3chguy authored Feb 7, 2022
1 parent 30e80aa commit d724696
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 6 deletions.
8 changes: 5 additions & 3 deletions res/css/views/dialogs/_SpotlightDialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,12 @@ limitations under the License.
text-overflow: ellipsis;
overflow: hidden;

.mx_BaseAvatar {
.mx_DecoratedRoomAvatar {
margin-right: 8px;
display: inline-block;
height: 20px;
}

.mx_NotificationBadge {
margin-left: 8px;
}

&:hover, &[aria-selected=true] {
Expand Down
9 changes: 6 additions & 3 deletions src/components/views/dialogs/SpotlightDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import { IDialogProps } from "./IDialogProps";
import { _t } from "../../../languageHandler";
import BaseDialog from "./BaseDialog";
import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
import RoomAvatar from "../avatars/RoomAvatar";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import {
findSiblingElement,
Expand Down Expand Up @@ -63,6 +62,8 @@ import RoomViewStore from "../../../stores/RoomViewStore";
import { showStartChatInviteDialog } from "../../../RoomInvite";
import SettingsStore from "../../../settings/SettingsStore";
import { SettingLevel } from "../../../settings/SettingLevel";
import NotificationBadge from "../rooms/NotificationBadge";
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";

const MAX_RECENT_SEARCHES = 10;
const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
Expand Down Expand Up @@ -244,8 +245,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
viewRoom(room.roomId, true);
}}
>
<RoomAvatar room={room} width={20} height={20} />
<DecoratedRoomAvatar room={room} avatarSize={20} />
{ room.name }
<NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(room)} />
<ResultDetails room={room} />
<div className="mx_SpotlightDialog_enterPrompt"></div>
</Option>
Expand Down Expand Up @@ -383,8 +385,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
viewRoom(room.roomId, true);
}}
>
<RoomAvatar room={room} width={20} height={20} />
<DecoratedRoomAvatar room={room} avatarSize={20} />
{ room.name }
<NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(room)} />
<div className="mx_SpotlightDialog_enterPrompt"></div>
</Option>
)) }
Expand Down

0 comments on commit d724696

Please sign in to comment.