UBER-429 Improve keyboard help (#3389)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

models/board/src/index.ts

@@ -452,7 +452,7 @@ export function createModel (builder: Builder): void {
       },
       label: view.string.Delete,
       icon: view.icon.Delete,
-      keyBinding: ['Meta + Backspace', 'Ctrl + Backspace'],
+      keyBinding: ['Meta + Backspace'],
       category: board.category.Card,
       input: 'any',
       target: board.class.Card,

models/hr/src/index.ts

@@ -334,7 +334,7 @@ export function createModel (builder: Builder): void {
       icon: view.icon.Archive,
       input: 'any',
       category: hr.category.HR,
-      keyBinding: ['Meta + Backspace', 'Ctrl + Backspace'],
+      keyBinding: ['Meta + Backspace'],
       query: {
         'members.length': 0,
         _id: { $nin: [hr.ids.Head] }

models/recruit/src/index.ts

@@ -1073,7 +1073,7 @@ export function createModel (builder: Builder): void {
     })
   }
 
-  createGotoSpecialAction(builder, talentsId, 'keyG-keyE', recruit.string.GotoTalents)
+  createGotoSpecialAction(builder, talentsId, 'keyG->keyE', recruit.string.GotoTalents)
   createGotoSpecialAction(builder, vacanciesId, 'keyG->keyV', recruit.string.GotoVacancies)
   createGotoSpecialAction(builder, skillsId, 'keyG->keyS', recruit.string.GotoSkills)
   createGotoSpecialAction(builder, myApplicationsId, 'keyG->keyM', recruit.string.GotoMyApplications)

models/setting/src/index.ts

@@ -390,7 +390,7 @@ export function createModel (builder: Builder): void {
       action: setting.actionImpl.DeleteMixin,
       label: view.string.Delete,
       icon: view.icon.Delete,
-      keyBinding: ['Meta + Backspace', 'Ctrl + Backspace'],
+      keyBinding: ['Meta + Backspace'],
       category: view.category.General,
       input: 'any',
       target: setting.mixin.UserMixin,

models/tracker/src/index.ts

@@ -1883,7 +1883,7 @@ export function createModel (builder: Builder): void {
       action: tracker.actionImpl.DeleteMilestone,
       label: view.string.Delete,
       icon: view.icon.Delete,
-      keyBinding: ['Meta + Backspace', 'Ctrl + Backspace'],
+      keyBinding: ['Meta + Backspace'],
       category: tracker.category.Tracker,
       input: 'any',
       target: tracker.class.Milestone,

models/view/src/index.ts

@@ -561,7 +561,7 @@ export function createModel (builder: Builder): void {
       action: view.actionImpl.Delete,
       label: view.string.Delete,
       icon: view.icon.Delete,
-      keyBinding: ['Meta + Backspace', 'Ctrl + Backspace'],
+      keyBinding: ['Meta + Backspace'],
       category: view.category.General,
       input: 'any',
       target: core.class.Doc,
@@ -669,7 +669,7 @@ export function createModel (builder: Builder): void {
     {
       label: view.string.SelectItemAll,
       action: view.actionImpl.SelectItemAll,
-      keyBinding: ['meta + keyA', 'ctrl + keyA'],
+      keyBinding: ['Meta + keyA'],
       category: view.category.General,
       input: 'none',
       target: core.class.Doc,
@@ -697,7 +697,7 @@ export function createModel (builder: Builder): void {
     {
       action: view.actionImpl.ShowActions,
       label: view.string.ShowActions,
-      keyBinding: ['meta + keyK', 'ctrl + keyK'],
+      keyBinding: ['Meta + keyK'],
       category: view.category.GeneralNavigation,
       input: 'none',
       target: core.class.Doc,

plugins/view-resources/src/components/ActionHandler.svelte

@@ -63,12 +63,14 @@
   $: mode = $contextStore.getLastContext()?.mode
   $: application = $contextStore.getLastContext()?.application
 
+  const isMac = /Macintosh/i.test(navigator.userAgent)
+
   function keyPrefix (key: KeyboardEvent): string {
     return (
       (key.altKey ? 'Alt + ' : '') +
       (key.shiftKey ? 'Shift + ' : '') +
       (key.metaKey ? 'Meta + ' : '') +
-      (key.ctrlKey ? 'Ctrl + ' : '')
+      (key.ctrlKey ? (isMac ? 'Ctrl + ' : 'Meta + ') : '')
     )
   }
   function m (s1: string, s2: string): boolean {

plugins/view-resources/src/components/ActionsPopup.svelte

@@ -167,6 +167,10 @@
       handleSelection(key, selection)
     }
   }
+  const capitalizeFirstLetter = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+
+  const isMac = /Macintosh/i.test(navigator.userAgent)
+
   function formatKey (key: string): string[][] {
     const thens = key.split('->')
     const result: string[][] = []
@@ -175,7 +179,7 @@
         r.split('+').map((it) =>
           it
             .replaceAll('key', '')
-            .replaceAll(/Meta|meta/g, '⌘')
+            .replaceAll(/Meta|meta/g, isMac ? '⌘' : 'Ctrl')
             .replaceAll('ArrowUp', '↑')
             .replaceAll('ArrowDown', '↓')
             .replaceAll('ArrowLeft', '←')
@@ -300,7 +304,7 @@
                         {/if}
                         {#each k as kk, j}
                           <div class="flex-center text-sm key-box">
-                            {kk}
+                            {capitalizeFirstLetter(kk.trim())}
                           </div>
                         {/each}
                       {/each}

plugins/workbench-resources/src/components/HelpAndSupport.svelte

@@ -34,6 +34,8 @@
     navigate(loc)
   }
 
+  const capitalizeFirstLetter = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+
   function formatKey (key: string): string[][] {
     const thens = key.split('->')
     const result: string[][] = []
@@ -42,7 +44,7 @@
         r.split('+').map((it) =>
           it
             .replaceAll('key', '')
-            .replaceAll(/Meta|meta/g, '⌘')
+            .replaceAll(/Meta|meta/g, isMac ? '⌘' : 'Ctrl')
             .replaceAll('ArrowUp', '↑')
             .replaceAll('ArrowDown', '↓')
             .replaceAll('ArrowLeft', '←')
@@ -78,7 +80,9 @@
 
     actions.sort((a, b) => a.category.localeCompare(b.category))
   }
-  $: getActions()
+  getActions()
+
+  const isMac = /Macintosh/i.test(navigator.userAgent)
 
   const cards = [
     {
@@ -174,7 +178,7 @@
                       {/if}
                       {#each k as kk, j}
                         <div class="flex-center text-sm key-box">
-                          {kk}
+                          {capitalizeFirstLetter(kk.trim())}
                         </div>
                       {/each}
                     {/each}