mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 12:58:53 +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; display: flex;
white-space: nowrap; white-space: nowrap;
overflow-x: hidden; overflow-x: hidden;
margin-right: 1px; // occlude the 1px visible of the very next tile to prevent it looking broken
} }
.mx_AccessibleButton { .mx_AccessibleButton {
@ -109,15 +110,16 @@ limitations under the License.
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
display: inline-block; display: inline-block;
width: 50px; width: 58px;
min-width: 50px; height: 58px;
min-width: 58px;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.mx_DecoratedRoomAvatar { .mx_DecoratedRoomAvatar {
margin: 0 5px 4px; // maintain centering margin: 0 9px 4px; // maintain centering
} }
& + .mx_AccessibleButton { & + .mx_AccessibleButton {
@ -150,8 +152,8 @@ limitations under the License.
> .mx_DecoratedRoomAvatar, > .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar { > .mx_BaseAvatar {
margin-right: 8px; margin-right: 8px;
width: 20px; width: 24px;
height: 20px; height: 24px;
.mx_BaseAvatar { .mx_BaseAvatar {
width: inherit; width: inherit;
@ -186,8 +188,8 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
width: 20px; width: 24px;
height: 20px; height: 24px;
position: absolute; position: absolute;
left: 4px; left: 4px;
top: 50%; top: 50%;
@ -214,8 +216,8 @@ limitations under the License.
.mx_SpotlightDialog_otherSearches_messageSearchIcon { .mx_SpotlightDialog_otherSearches_messageSearchIcon {
display: inline-block; display: inline-block;
width: 20px; width: 24px;
height: 20px; height: 24px;
background-color: $secondary-content; background-color: $secondary-content;
vertical-align: text-bottom; vertical-align: text-bottom;
mask-repeat: no-repeat; 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 MAX_RECENT_SEARCHES = 10;
const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons 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 Option: React.FC<ComponentProps<typeof RovingAccessibleButton>> = ({ inputRef, children, ...props }) => {
const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); 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"); 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 } { result.room.name }
<NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(result.room)} /> <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(result.room)} />
<ResultDetails room={result.room} /> <ResultDetails room={result.room} />
@ -426,9 +427,12 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
<BaseAvatar <BaseAvatar
name={room.name} name={room.name}
idName={room.room_id} idName={room.room_id}
url={room.avatar_url ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20) : null} url={room.avatar_url
width={20} ? mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(AVATAR_SIZE)
height={20} : null
}
width={AVATAR_SIZE}
height={AVATAR_SIZE}
/> />
{ room.name || room.canonical_alias } { room.name || room.canonical_alias }
{ room.name && room.canonical_alias && <div className="mx_SpotlightDialog_result_details"> { 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"); 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 } { room.name }
<NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(room)} /> <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(room)} />
<ResultDetails room={room} /> <ResultDetails room={room} />
@ -556,7 +560,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
<div> <div>
{ BreadcrumbsStore.instance.rooms { BreadcrumbsStore.instance.rooms
.filter(r => r.roomId !== RoomViewStore.getRoomId()) .filter(r => r.roomId !== RoomViewStore.getRoomId())
.slice(0, 10)
.map(room => ( .map(room => (
<TooltipOption <TooltipOption
id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`} id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`}