Update keyboard shortcuts menu button & dialog icon to a new 'keyboard' icon
lb- opened this issue · comments
Is your proposal related to a problem?
#11717 introduced a new keyboard shortcuts dialog as part of the work for #3949
For simplicity, we used an existing 'regex' icon for this, it would be nice to support a better icon.
Describe the solution you'd like
- Add a new
keyboard
icon to the core Wagtail admin icon set. (see instructions in the additional context). - Use this new icon in the sidebar menu
wagtail/admin/wagtail_hooks.py
seeregister_keyboard_shortcuts_menu_item
for code. - Use this new icon in the dialog
wagtail/admin/templates/wagtailadmin/shared/keyboard_shortcuts_dialog.html
.
Describe alternatives you've considered
- N/A - we should do this at some point, ideally before 6.1 goes out.
Additional context
Here's the icon SVG (below), we must include the source reference, add this to the folder wagtail/admin/templates/wagtailadmin/icons
.
Also ensure the icon is part of wagtail/admin/wagtail_hooks.py
see register_icons
, adding in alphabetical order.
For full instructions on adding icons see https://docs.wagtail.org/en/stable/contributing/ui_guidelines.html#adding-icons Please follow these instructions exactly.
There is no need for an RTL variation of this icon.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z"/></svg>
From: https://fontawesome.com/icons/keyboard?f=classic&s=solid
Working on this
- Anyone can contribute to this.
- View our contributing guidelines, add a comment to the issue once you’re ready to start.
- This aligns us closer to the goal designs in https://www.figma.com/proto/h67EsVXdWsfu38WGGxWfpi/Wagtail-CMS?type=design&node-id=14420-153315&viewport=6289%2C-12853%2C1&t=Sk9k7iALDZCA1bu7-0&scaling=scale-down-width&starting-point-node-id=14420%3A153315
- Here's a PR / commit that added some icons recently for reference 136a548 / #10320
Hi @lb-, can I try working on this? It's not my first time, but I haven't worked on this part of the code before.
Go for it @rohitsrma