nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Inhibit keyboard highlights in dialogs when effector is not in focus (#31181)

Browse Source 
* Inhibit keyboard highlight in spotlight dialog when effector is not in focus

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Inhibit keyboard highlight in forward dialog when effector is not in focus

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix search box height bouncing on focus/blur

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-11-06 16:32:46 +00:00
committed by GitHub
parent eade32a80c
commit 3848d570be
4 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 25 KiB

1
res/css/structures/_SearchBox.pcss
View File

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SearchBox {
flex: 1 1 0;
min-width: 0;
min-height: 36px; /* to avoid jumping when the X to clear shows/hides */
&.mx_SearchBox_blurred:not(:hover) {
background-color: transparent;

7
res/css/views/dialogs/_ForwardDialog.pcss
View File

@@ -61,6 +61,11 @@ Please see LICENSE files in the repository root for full details.
/* To match the space around the title */
margin: 0 0 15px 0;
flex-grow: 0;
&:not(:focus-within) + .mx_ForwardList_content {
/* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
--mx_ForwardList_entry_selectedBgColor: transparent;
}
}
.mx_ForwardList_content {
@@ -90,7 +95,7 @@ Please see LICENSE files in the repository root for full details.
&:hover,
&.mx_ForwardList_entry_active {
background-color: $spacePanel-bg-color;
background-color: var(--mx_ForwardList_entry_selectedBgColor, $spacePanel-bg-color);
}
.mx_ForwardList_roomButton {

38
res/css/views/dialogs/_SpotlightDialog.pcss
View File

@@ -150,6 +150,16 @@ Please see LICENSE files in the repository root for full details.
height: unset;
margin-left: $spacing-16;
}
&:not(:focus-within) + #mx_SpotlightDialog_content {
/* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
--mx_SpotlightDialog_option_selectedBgColor: transparent;
/* Hide the enter prompt as in this state pressing enter would not actuate that option */
.mx_SpotlightDialog_enterPrompt {
visibility: hidden;
}
}
}
#mx_SpotlightDialog_content {
@@ -193,6 +203,17 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_SpotlightDialog_option {
border-radius: 8px;
overflow: hidden;
text-overflow: ellipsis;
&:hover,
&[aria-selected="true"] {
background-color: var(--mx_SpotlightDialog_option_selectedBgColor, $quinary-content);
}
}
.mx_SpotlightDialog_recentlyViewed {
> div {
display: flex;
@@ -202,7 +223,6 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_option {
border-radius: 8px;
padding: $spacing-4;
color: $primary-content;
font-size: $font-12px;
@@ -213,8 +233,6 @@ Please see LICENSE files in the repository root for full details.
min-width: 58px;
box-sizing: border-box;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
.mx_DecoratedRoomAvatar {
margin: 0 9px $spacing-4; /* maintain centering */
@@ -223,11 +241,6 @@ Please see LICENSE files in the repository root for full details.
& + .mx_SpotlightDialog_option {
margin-left: $spacing-16;
}
&:hover,
&[aria-selected="true"] {
background-color: $quinary-content;
}
}
}
@@ -236,8 +249,9 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_otherSearches,
.mx_SpotlightDialog_hiddenResults {
.mx_SpotlightDialog_option {
--mx_SpotlightDialog_option_selectedBgColor: $system;
padding: 6px $spacing-4;
border-radius: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
@@ -245,8 +259,6 @@ Please see LICENSE files in the repository root for full details.
display: flex;
align-items: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.mx_SpotlightDialog_option--endAdornment {
display: inline-flex;
@@ -350,7 +362,7 @@ Please see LICENSE files in the repository root for full details.
}
&:hover::before,
&[aria-selected="true"]::before {
&:focus-visible::before {
background-color: $secondary-content;
}
}
@@ -361,8 +373,6 @@ Please see LICENSE files in the repository root for full details.
&:hover,
&[aria-selected="true"] {
background-color: $system;
.mx_SpotlightDialog_option--menu,
.mx_SpotlightDialog_option--notifications {
display: block;