imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve spotlight accessibility by adding context menus (#8907)

Browse source 
* Extract room general context menu from roomtile
* Create hook to access and change a room’s notification state
* Extract room notification context menu from roomtile
* Add room context menus to rooms in spotlight
* Make arrow movement apply to the whole dialog, not just the input box
This commit is contained in:
Janne Mareike Koschinski 2022-07-12 15:03:08 +02:00 • committed by GitHub
parent 6a125d5a1d
commit 780a903e2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 632 additions and 283 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -239,6 +239,13 @@ limitations under the License.
text-overflow: ellipsis;
overflow: hidden;
.mx_SpotlightDialog_option--endAdornment {
display: inline-flex;
flex-direction: row;
margin-left: auto;
align-items: start;
}
&.mx_SpotlightDialog_result_multiline {
align-items: start;
@ -309,8 +316,45 @@ limitations under the License.
margin-left: $spacing-8;
}
.mx_SpotlightDialog_option--menu,
.mx_SpotlightDialog_option--notifications {
width: 20px;
min-width: 20px;
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $tertiary-content;
}
&:hover::before, &[aria-selected=true]::before {
background-color: $secondary-content;
}
}
.mx_SpotlightDialog_option--menu::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
&:hover, &[aria-selected=true] {
background-color: $system;
.mx_SpotlightDialog_option--menu,
.mx_SpotlightDialog_option--notifications {
display: block;
}
}
&[aria-selected=true] .mx_SpotlightDialog_enterPrompt {
@ -436,7 +480,7 @@ limitations under the License.
color: $tertiary-content;
border-radius: 6px;
background-color: $quinary-content;
margin: 0 $spacing-4 0 auto;
margin-right: $spacing-4;
display: none;
}