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

2
res/css/_components.scss
View file

@ -89,6 +89,8 @@
@import "./views/context_menus/_DeviceContextMenu.scss";
@import "./views/context_menus/_IconizedContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomGeneralContextMenu.scss";
@import "./views/context_menus/_RoomNotificationContextMenu.scss";
@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
@import "./views/dialogs/_AnalyticsLearnMoreDialog.scss";
@import "./views/dialogs/_BugReportDialog.scss";

63
res/css/views/context_menus/_RoomGeneralContextMenu.scss Normal file
View file

@ -0,0 +1,63 @@
.mx_RoomGeneralContextMenu_iconStar::before {
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
}
.mx_RoomGeneralContextMenu_iconArrowDown::before {
mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
}
.mx_RoomGeneralContextMenu_iconNotificationsDefault::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_RoomGeneralContextMenu_iconNotificationsAllMessages::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
}
.mx_RoomGeneralContextMenu_iconNotificationsMentionsKeywords::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
}
.mx_RoomGeneralContextMenu_iconNotificationsNone::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
.mx_RoomGeneralContextMenu_iconPeople::before {
mask-image: url('$(res)/img/element-icons/room/members.svg');
}
.mx_RoomGeneralContextMenu_iconFiles::before {
mask-image: url('$(res)/img/element-icons/room/files.svg');
}
.mx_RoomGeneralContextMenu_iconPins::before {
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
}
.mx_RoomGeneralContextMenu_iconWidgets::before {
mask-image: url('$(res)/img/element-icons/room/apps.svg');
}
.mx_RoomGeneralContextMenu_iconSettings::before {
mask-image: url('$(res)/img/element-icons/settings.svg');
}
.mx_RoomGeneralContextMenu_iconExport::before {
mask-image: url('$(res)/img/element-icons/export.svg');
}
.mx_RoomGeneralContextMenu_iconDeveloperTools::before {
mask-image: url('$(res)/img/element-icons/settings/flask.svg');
}
.mx_RoomGeneralContextMenu_iconCopyLink::before {
mask-image: url('$(res)/img/element-icons/link.svg');
}
.mx_RoomGeneralContextMenu_iconInvite::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
.mx_RoomGeneralContextMenu_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg');
}

12
res/css/views/context_menus/_RoomNotificationContextMenu.scss Normal file
View file

@ -0,0 +1,12 @@
.mx_RoomNotificationContextMenu_iconBell::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
.mx_RoomNotificationContextMenu_iconBellDot::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
}
.mx_RoomNotificationContextMenu_iconBellMentions::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
}
.mx_RoomNotificationContextMenu_iconBellCrossed::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}

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