mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 18:55:58 +03:00
Code Issues Projects Releases Packages Wiki Activity

Tweak search dialog based on new designs (#7980)

Browse source
This commit is contained in:
Michael Telatynski 2022-03-11 09:34:44 +00:00 committed by GitHub
parent 2d485b8efe
commit 1801eddde1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
res/css/views/dialogs/_SpotlightDialog.scss
View file

@ -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;

15
src/components/views/dialogs/SpotlightDialog.tsx
View file

@ -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}`}