UBER-376 Implement new style for the tooltips (#3418)

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

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

@@ -25,7 +25,9 @@
     Label,
     EditWithIcon,
     IconSearch,
-    deviceOptionsStore
+    deviceOptionsStore,
+    capitalizeFirstLetter,
+    formatKey
   } from '@hcengineering/ui'
   import { Action, ViewContext } from '@hcengineering/view'
   import { filterActions, getSelection } from '../actions'
@@ -167,30 +169,7 @@
       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[][] = []
-    for (const r of thens) {
-      result.push(
-        r.split('+').map((it) =>
-          it
-            .replaceAll('key', '')
-            .replaceAll(/Meta|meta/g, isMac ? '⌘' : 'Ctrl')
-            .replaceAll('ArrowUp', '↑')
-            .replaceAll('ArrowDown', '↓')
-            .replaceAll('ArrowLeft', '←')
-            .replaceAll('ArrowRight', '→')
-            .replaceAll('Backspace', '⌫')
-            .toLocaleLowerCase()
-        )
-      )
-    }
-    return result
-  }
   const dispatch = createEventDispatcher()
 </script>
 

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

@@ -56,7 +56,7 @@
     icon={view.icon.ViewButton}
     label={view.string.View}
     {kind}
-    showTooltip={{ label: view.string.CustomizeView }}
+    showTooltip={{ label: view.string.CustomizeView, direction: 'bottom' }}
     bind:input={btn}
     on:click={clickHandler}
   />

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

@@ -37,7 +37,7 @@
       icon={view.icon.Configure}
       label={view.string.Show}
       {kind}
-      showTooltip={{ label: view.string.CustomizeView }}
+      showTooltip={{ label: view.string.CustomizeView, direction: 'bottom' }}
       bind:input={btn}
       on:click={clickHandler}
     />