Tweak search dialog based on new designs (#7980)

matrix-org · Mar 11, 2022 · 1801edd · 1801edd
1 parent 2d485b8
commit 1801edd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/res/css/views/dialogs/_SpotlightDialog.scss b/res/css/views/dialogs/_SpotlightDialog.scss
@@ -100,6 +100,7 @@ limitations under the License.
                 display: flex;
                 white-space: nowrap;
                 overflow-x: hidden;
+                margin-right: 1px; // occlude the 1px visible of the very next tile to prevent it looking broken
             }
 
             .mx_AccessibleButton {
@@ -109,15 +110,16 @@ limitations under the License.
                 font-size: $font-12px;
                 line-height: $font-15px;
                 display: inline-block;
-                width: 50px;
-                min-width: 50px;
+                width: 58px;
+                height: 58px;
+                min-width: 58px;
                 box-sizing: border-box;
                 text-align: center;
                 overflow: hidden;
                 text-overflow: ellipsis;
 
                 .mx_DecoratedRoomAvatar {
-                    margin: 0 5px 4px; // maintain centering
+                    margin: 0 9px 4px; // maintain centering
                 }
 
                 & + .mx_AccessibleButton {
@@ -150,8 +152,8 @@ limitations under the License.
                 > .mx_DecoratedRoomAvatar,
                 > .mx_BaseAvatar {
                     margin-right: 8px;
-                    width: 20px;
-                    height: 20px;
+                    width: 24px;
+                    height: 24px;
 
                     .mx_BaseAvatar {
                         width: inherit;
@@ -186,8 +188,8 @@ limitations under the License.
                     mask-repeat: no-repeat;
                     mask-position: center;
                     mask-size: contain;
-                    width: 20px;
-                    height: 20px;
+                    width: 24px;
+                    height: 24px;
                     position: absolute;
                     left: 4px;
                     top: 50%;
@@ -214,8 +216,8 @@ limitations under the License.
 
             .mx_SpotlightDialog_otherSearches_messageSearchIcon {
                 display: inline-block;
-                width: 20px;
-                height: 20px;
+                width: 24px;
+                height: 24px;
                 background-color: $secondary-content;
                 vertical-align: text-bottom;
                 mask-repeat: no-repeat;

diff --git a/src/components/views/dialogs/SpotlightDialog.tsx b/src/components/views/dialogs/SpotlightDialog.tsx
@@ -77,6 +77,7 @@ import { getCachedRoomIDForAlias } from "../../../RoomAliasCache";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
+const AVATAR_SIZE = 24;
 
 const Option: React.FC<ComponentProps<typeof RovingAccessibleButton>> = ({ inputRef, children, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
@@ -358,7 +359,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                             viewRoom(result.room.roomId, true, ev.type !== "click");
                         }}
                     >
-                        <DecoratedRoomAvatar room={result.room} avatarSize={20} tooltipProps={{ tabIndex: -1 }} />
+                        <DecoratedRoomAvatar room={result.room} avatarSize={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
                         { result.room.name }
                         <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(result.room)} />
                         <ResultDetails room={result.room} />
@@ -426,9 +427,12 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                             <BaseAvatar
                                 name={room.name}
                                 idName={room.room_id}
-                                url={room.avatar_url ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20) : null}
-                                width={20}
-                                height={20}
+                                url={room.avatar_url
+                                    ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(AVATAR_SIZE)
+                                    : null
+                                }
+                                width={AVATAR_SIZE}
+                                height={AVATAR_SIZE}
                             />
                             { room.name || room.canonical_alias }
                             { room.name && room.canonical_alias && <div className="mx_SpotlightDialog_result_details">
@@ -539,7 +543,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                                     viewRoom(room.roomId, true, ev.type !== "click");
                                 }}
                             >
-                                <DecoratedRoomAvatar room={room} avatarSize={20} tooltipProps={{ tabIndex: -1 }} />
+                                <DecoratedRoomAvatar room={room} avatarSize={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
                                 { room.name }
                                 <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(room)} />
                                 <ResultDetails room={room} />
@@ -556,7 +560,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                 <div>
                     { BreadcrumbsStore.instance.rooms
                         .filter(r => r.roomId !== RoomViewStore.getRoomId())
-                        .slice(0, 10)
                         .map(room => (
                             <TooltipOption
                                 id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`}