feat(windows): configuration UI polish

[rc-swag]

Fixes #6296 See this issue for the main requirements for this PR. Fixes #3354

---

Key Navigation

Page Up/Down on the main menu toggles the Keyboard Layout, Keyboard Options, Hotkeys etc. It also focus the first item in each of the tabs. In the case of Keyboard layouts it will focus the last expanded keyboard layout, else the first keyboard layout.

Up/Down Arrow On the keyboard layout the up and down arrow will cycle through the keyboard layouts and expand the currently selected layout.

Left/Right When a Keyboard Layout is expanded pressing right arrow will show the further detail. Pressing left arrow will hide the extra detail

---

The following TODO:

• [ ] All the additions to strings.xml will need to be localised
• [ ] With Keyboard hotkeys if the keyboard_id is not defined in //KeymanLanguage in the XML file then we can not assign a hotkey
• [ ] Turning on animations for the detailed lists breaks the qr and add/remove languages popups - it is a shame because the animations add to the feel.
• [ ] Many test cases for every button, for hotkeys, for key and mouse navigation.

[keymanapp-test-bot[bot]]

User Test Results

Test specification and instructions

• ✅ TEST_GENERAL_LAYOUT (PASSED): Tested this PR with the attached Keyman 16.0.35-alpha-test-7206 build in Windows 10 OS and it showing the expected output. (notes)
• ✅ TEST_DISABLE_BTN (PASSED): Retested this as per the instructions and I noticed that the whole keyboard detail opacity is reduced to 60% out and the title bar was grayed out. (notes)
• ✅ TEST_ENABLE_BTN (PASSED): Able to see orange colour on the Enable button while hovering the mouse on it. Also, the Eurolatin Keyboard is available in the System tray / keyman icon. (notes)
• ✅ TEST_KEYBOARD_OPTIONS_BTN (PASSED): Verified that the IPA (SIL) Keyboard Options dialogue pops up. (notes)
• ✅ TEST_HELP_BTN (PASSED): Verified the Help Window opens after clicking the Help button. (notes)
• ✅ TEST_UNINSTALL_BTN (PASSED): Verified that the Hieroglyphic Keyboard is uninstalled. (notes)
• ✅ TEST_ADDREMOVE_BTN (PASSED): Verified that the Add remove language dialogue appears on the screen. (notes)
• ✅ TEST_SHARE_KBD_BTN (PASSED): Verified that the QR Code dialogue pops up and clicking the outside of the dialogue would close the QR Code dialogue. (notes)
• ✅ TEST_ARROW_DOWN_BTN (PASSED): Verified that Clicking the Down Arrow button shows more details on the window. (notes)
• ✅ TEST_ARROW_UP_BTN (PASSED): Verified the Clicking the Up Arrow button hides more details. (notes)
• ✅ TEST_UP_DOWN_ARROW_KEYs (PASSED): Verified clicking the down arrow key on the keyboard layouts shows the summary of the current keyboard and closes other keyboard layouts. It is working as per the instructions.
• ✅ TEST_SET_HOTKEY_SINGLE_LANGUAGE (PASSED): Retested this as per the instructions and I verified that the title should now be displayed with the hotkey for this keyboard - Ctrl + I (notes)
• ✅ TEST_ADD_MULTIPLE_LANGUAGE (PASSED): Verified that it is possible to add more language using Add/remove language button. Also, noticed that the hotkey label appears on the right of each language. (notes)
• ✅ TEST_REMOVE_LANGUAGE_MULTIPLE_LANGUAGE (PASSED): Verified that the French language has been removed. Able to remove addition languages using the cross (x) button. The word Languages : was empty and appears in the red colour. (notes)

Test Artifacts

• Windows
  • Keyman for Windows
  • FirstVoices Keyboards for Windows

[rc-swag]

We have trouble with matching native UI -- it changes so much that we can't keep up. So I think we don't try and keep up. AFAICT, most modern apps have their own UI themes anyway so we aren't losing much...

I have stuck with the Blue then

[rc-swag]

Commit 53ae7948772b6a79d91071a706477a23054ecf3c changes the class names to match the naming convention.

[mcdurdin]

I've run through and tested this. I encountered no breaking issues. The new style is very clean; I like it. Some of the things I've noted here are probably not new, but just noting them here for completeness.

Keyboard Layouts list

• [x] 1. Clicking on (no hotkey) should not expand/contract the details -- need to cancel bubble on the click
• [x] 2. (no hotkey) text should have margin-right about 8px, not 21px.
• [x] 3. Don't need both Keyboard version and Package version above the fold -- Keyboard version is usually redundant, so put it below the fold. - [ ]
• [x] 4. Order of actions for keyboard, I think should be:
  • Keyboard options...
  • Add/remove language...
  • Share keyboard
  • Help
  • Disable
  • Uninstall
• [x] 5. Enable button in keyboard details is red? Don't understand why -- your suggetion-- have now tried using opacity to reflect the disabled.
• [x] 6. L/R Arrows and +/- seem backwards -- +/right should expand details, -/left should collapse
• [ ] 7. Tweak, optional: if Package name is same as keyboard name, perhaps move it below the fold.
• [x] 8. If window is sized small horizontally, hotkey label overlaps borders:

Add/remove language popup dialog

• [x] 1. Esc needs to cancel the popup

• [x] 2. Space needed between items on the list

• [x] 3. Add language and Close buttons should be bottom right like other dialogs, and styling should be more like Windows dialog, e.g.:

  

Share keyboard popup dialog

• [x] 1. Esc needs to cancel the popup
• [ ] 2. Styling should also be more like Windows dialog

Options tab

• [x] 1. Keyman System Settings and Base Keyboard buttons don't highlight like other buttons (these are 'elevated' buttons
• [x] 3. Elevated buttons have an obsolete icon, should be:
• [x]
• [x] 4. Border on selected elevated buttons is wonky

General notes

1. A few possible focus tweaks may be possible in another iteration - particularly around arrow keys and list item selection vs button selection. But I don't see this as urgent.
2. I can see us replicating the "boxed" styling of the keyboard list in the options and hotkeys lists, for consistency.

[rc-swag]

I have added a checklist to @mcdurdin review. I have done the items marked off the rest I am having some trouble with. I wanted to check in what I have to get testing underway. Then I can add new tests for what is changed on the remaining items.

[bharanidharanj]

• TEST_GENERAL_LAYOUT (PASSED): Tested this PR with the attached Keyman 16.0.35-alpha-test-7206 build in Windows 10 OS and it showing the expected output.

  

• TEST_DISABLE_BTN (FAILED): I noticed that the entire EuroLatin Keyboard layout was grayed out in the Configuration dialog.

  

• TEST_ENABLE_BTN (PASSED): Able to see orange colour on the Enable button while hovering the mouse on it. Also, the Eurolatin Keyboard is available in the System tray / keyman icon.

  

• TEST_KEYBOARD_OPTIONS_BTN (PASSED): Verified that the IPA (SIL) Keyboard Options dialogue pops up.

  

• TEST_HELP_BTN (PASSED): Verified the Help Window opens after clicking the Help button.

  

• TEST_UNINSTALL_BTN (PASSED): Verified that the Hieroglyphic Keyboard is uninstalled.

  

• TEST_ADDREMOVE_BTN (PASSED): Verified that the Add remove language dialogue appears on the screen.

  

• TEST_SHARE_KBD_BTN (PASSED): Verified that the QR Code dialogue pops up and clicking the outside of the dialogue would close the QR Code dialogue.

  

• TEST_ARROW_DOWN_BTN (PASSED): Verified that Clicking the Down Arrow button shows more details on the window.

  

• TEST_ARROW_UP_BTN (PASSED): Verified the Clicking the Up Arrow button hides more details.

  

• TEST_UP_DOWN_ARROW_KEYs (PASSED): Verified clicking the down arrow key on the keyboard layouts shows the summary of the current keyboard and closes other keyboard layouts. It is working as per the instructions.

• TEST_SET_HOTKEY_SINGLE_LANGUAGE (FAILED): I noticed that the No Hotkey was missing on the left-hand side of the keyboard layout title.

  

• TEST_ADD_MULTIPLE_LANGUAGE (PASSED): Verified that it is possible to add more language using Add/remove language button. Also, noticed that the hotkey label appears on the right of each language.

  

• TEST_REMOVE_LANGUAGE_MULTIPLE_LANGUAGE (PASSED): Verified that the French language has been removed. Able to remove addition languages using the cross (x) button. The word Languages : was empty and appears in the red colour.

  

[rc-swag]

@bharanidharanj when the new build finishes. @keymanapp-test-bot retest TEST_DISABLE_BTN, TEST_SET_HOTKEY_SINGLE_LANGUAGE

[bharanidharanj]

• TEST_DISABLE_BTN (PASSED): Retested this as per the instructions and I noticed that the whole keyboard detail opacity is reduced to 60% out and the title bar was grayed out.

  

• TEST_SET_HOTKEY_SINGLE_LANGUAGE (PASSED): Retested this as per the instructions and I verified that the title should now be displayed with the hotkey for this keyboard - Ctrl + I

  

[mcdurdin]

Going ahead and merging so we can launch beta. We will need to do another round of usability review during beta, but I expect any changes would be minor and cosmetic only :grin:

Good work!

[keyman-server]

Changes in this pull request will be available for download in Keyman version 16.0.94-beta

[keyman-server]

Changes in this pull request will be available for download in Keyman version 17.0.1-alpha