Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added menus to access Keyboard Shortcuts Modal #6833

Merged
merged 8 commits into from
Dec 20, 2021

Conversation

akshayasalvi
Copy link
Contributor

Details

Changes for keyboard shortcuts

  • Added desktop menu shortcut
  • Added menu in the About section

Fixed Issues

$ #6660

Tests

  1. Tested Desktop Shortcut menu
  2. Tested from About menu section
  3. Tested multiple menu clicks, etc.
  4. Tested by keyboard hotkeys

QA Steps

Steps for About Menu

  1. Go to the Settings -> About Menu
  2. Click on "View Keyboard Shortcuts"
  3. You should see the Keyboard Shortcuts Modal

Steps for Desktop Menu

  1. Open the desktop App
  2. Go to the "Expensify" main application menu
  3. Click on "View Keyboard Shortcuts"
  4. You should see the Keyboard Shortcuts modal.

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

web-shortcuts-menu

Mobile Web

NA

Desktop

desktop-shortcuts-menu

Screenshot 2021-12-18 at 1 25 03 PM

iOS

NA

Android

NA

@akshayasalvi akshayasalvi requested a review from a team as a code owner December 18, 2021 07:56
@MelvinBot MelvinBot requested review from roryabraham and removed request for a team December 18, 2021 07:56
@akshayasalvi akshayasalvi changed the title Keyboard shortcuts menu Added menus to access Keyboard Shortcuts Modal Dec 18, 2021
@akshayasalvi
Copy link
Contributor Author

@roryabraham @parasharrajat While all the changes are done, I am stuck at one issue.

For the system menu -> View Keyboard Shortcuts CmdOrCtrl+? doesn't show up in the menu (Check desktop menu screenshot in the GH Body). The same if I change the code to something else it shows up.

CmdOrCtrl+? not showing
Screenshot 2021-12-18 at 1 25 03 PM

Tried with CmdOrCtrl+~
image

@roryabraham
Copy link
Contributor

@akshayasalvi there is another issue to change the keyboard shortcut to open the modal to CMD+i. I think for the time being we can ignore that last issue you posted in your previous comment. When we change the keyboard shortcut to CMD + i, it should show up in the desktop menu. In the meantime, users can click on the menu item and the modal will show them the keyboard shortcut that can be used to open itself.

Copy link
Contributor

@roryabraham roryabraham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks good, just had some minor comments.

desktop/main.js Show resolved Hide resolved
src/components/Icon/Expensicons.js Outdated Show resolved Hide resolved
src/libs/actions/KeyboardShortcuts.js Outdated Show resolved Hide resolved
src/libs/actions/KeyboardShortcuts.js Show resolved Hide resolved
src/pages/settings/AboutPage.js Outdated Show resolved Hide resolved
src/setup/platformSetup/index.desktop.js Outdated Show resolved Hide resolved
@akshayasalvi
Copy link
Contributor Author

@roryabraham PR updated

@roryabraham roryabraham merged commit c2b81c0 into Expensify:main Dec 20, 2021
@OSBotify
Copy link
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @sketchydroide in version: 1.1.22-2 🚀

platform result
🤖 android 🤖 cancelled 🔪
🖥 desktop 🖥 cancelled 🔪
🍎 iOS 🍎 cancelled 🔪
🕸 web 🕸 cancelled 🔪

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @roryabraham in version: 1.1.22-2 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

// Defines the system-level menu item for manually triggering an update after
const updateAppMenuItem = new MenuItem({
label: 'Update New Expensify',
enabled: false,
click: quitAndInstallWithUpdate,
});

// Defines the system-level menu item for opening keyboard shortcuts modal
const keyboardShortcutsMenu = new MenuItem({
label: 'View Keyboard Shortcuts',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a visible label? If so, this is not correct (and really the same can be said about the one right above this one).
All texts need to be localized to the current user's language.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it would be a bit of a challenge to add the localization to the Main process (native layer desktop) as Onyx data is stored on the renderer process UI layer.
We can communicate between them.

Crazy thought! should we parse the user locale from the OS timezone settings for the desktop app too?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can communicate between them.

Let's do that then? Is it super hard or what?

Crazy thought! should we parse the user locale from the OS timezone settings for the desktop app too?

I thought we already did, like where does JS's Intl get the data from? I assume that in the end, they come from the OS, no? Especially for the desktop app?

Copy link
Member

@parasharrajat parasharrajat Dec 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do that then? Is it super hard or what?

Nope, But it seems reversed, For example, first the main app will be initialized then the UI layer so options will render in English and then switch from English to Selected language. But this time would be very short so it seems fine.

I thought we already did, like where does JS's Intl get the data from? I assume that in the end, they come from the OS, no? Especially for the desktop app?

As far I can tell we don't parse that. we depend on the timezone from the user's profile which I think defaults to geolocation.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked the other menu items like "Update New Expensify", "History", etc. they weren't localized.

We can communicate between them.

Can give it a try, will have to check that when the User changes the language preference, the system menu should update?

Copy link
Contributor

@iwiznia iwiznia Dec 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far I can tell we don't parse that. we depend on the timezone from the user's profile which I think defaults to geolocation.

Oh right. I was confused with something different. Right now we don't detect language at all. Maybe in the future when we focus on actually releasing a localized app, we can do it, for now it is not worth it.

Can give it a try, will have to check that when the User changes the language preference, the system menu should update?

Yes, it should, but the more I look at this the more I think we should do that in a separate issue.

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @yuwenmemon in version: 1.1.23-1 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 failure ❌
🍎 iOS 🍎 failure ❌
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @yuwenmemon in version: 1.1.23-1 🚀

platform result
🤖 android 🤖 failure ❌
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 failure ❌
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants