fix: more tooltips (#6767)

packages/ui/lang/en.json

@@ -89,6 +89,9 @@
     "Selected": "Selected:",
     "Submit": "Submit",
     "NextStep": "Next step",
-    "TypeHere": "Type here..."
+    "TypeHere": "Type here...",
+    "FullSize": "Full size",
+    "UseMaxWidth": "Max width",
+    "Sidebar": "Sidebar"
   }
 }

packages/ui/lang/es.json

@@ -89,6 +89,9 @@
     "Selected": "Seleccionado:",
     "Submit": "Enviar",
     "NextStep": "Siguiente paso",
-    "TypeHere": "Escribe aquí..."
+    "TypeHere": "Escribe aquí...",
+    "FullSize": "Tamaño completo",
+    "UseMaxWidth": "Ancho máximo",
+    "Sidebar": "Barra lateral"
   }
 }

packages/ui/lang/fr.json

@@ -89,6 +89,9 @@
     "Selected": "Sélectionné :",
     "Submit": "Soumettre",
     "NextStep": "Étape suivante",
-    "TypeHere": "Tapez ici..."
+    "TypeHere": "Tapez ici...",
+    "FullSize": "Taille réelle",
+    "UseMaxWidth": "Largeur maximale",
+    "Sidebar": "Barre latérale"
   }
 }

packages/ui/lang/pt.json

@@ -89,6 +89,9 @@
     "Selected": "Selecionado:",
     "Submit": "Enviar",
     "NextStep": "Seguinte passo",
-    "TypeHere": "Escreva aqui..."
+    "TypeHere": "Escreva aqui...",
+    "FullSize": "Tamanho completo",
+    "UseMaxWidth": "Largura máxima",
+    "Sidebar": "Barra lateral"
   }
 }

packages/ui/lang/ru.json

@@ -89,6 +89,9 @@
     "Selected": "Выбрано:",
     "Submit": "Отправить",
     "NextStep": "Следующий шаг",
-    "TypeHere": "Вводите здесь..."
+    "TypeHere": "Вводите здесь...",
+    "FullSize": "Полный размер",
+    "UseMaxWidth": "Максимальная ширина",
+    "Sidebar": "Боковая панель"
   }
 }

packages/ui/lang/zh.json

@@ -89,6 +89,9 @@
     "Selected": "已选：",
     "Submit": "提交",
     "NextStep": "下一步",
-    "TypeHere": "在此输入..."
+    "TypeHere": "在此输入...",
+    "FullSize": "全尺寸",
+    "UseMaxWidth": "使用最大宽度",
+    "Sidebar": "侧边栏"
   }
 }

packages/ui/src/components/Panel.svelte

@@ -34,6 +34,8 @@
   import IconScale from './icons/Scale.svelte'
   import IconScaleFull from './icons/ScaleFull.svelte'
 
+  import plugin from '../plugin'
+
   export let innerWidth: number = 0
   export let panelWidth: number = 0
   export let isHeader: boolean = true
@@ -209,6 +211,7 @@
           iconProps={{ size: 'medium' }}
           kind={'icon'}
           selected={useMaxWidth}
+          showTooltip={{ label: plugin.string.UseMaxWidth, direction: 'bottom' }}
           on:click={() => {
             useMaxWidth = !useMaxWidth
             dispatch('maxWidth', useMaxWidth)
@@ -222,6 +225,7 @@
           iconProps={{ size: 'medium' }}
           kind={'icon'}
           selected={fullSize}
+          showTooltip={{ label: plugin.string.FullSize, direction: 'bottom' }}
           on:click={() => {
             fullSize = !fullSize
             dispatch('fullsize')
@@ -244,6 +248,7 @@
             iconProps={{ size: 'medium', filled: asideShown }}
             kind={'icon'}
             selected={asideShown}
+            showTooltip={{ label: plugin.string.Sidebar, direction: 'bottom' }}
             on:click={handleAside}
           />
         {/if}

packages/ui/src/plugin.ts

@@ -115,7 +115,11 @@ export const uis = plugin(uiId, {
     Selected: '' as IntlString,
     Submit: '' as IntlString,
     NextStep: '' as IntlString,
-    TypeHere: '' as IntlString
+    TypeHere: '' as IntlString,
+
+    FullSize: '' as IntlString,
+    UseMaxWidth: '' as IntlString,
+    Sidebar: '' as IntlString
   },
   metadata: {
     DefaultApplication: '' as Metadata<AnyComponent>,

plugins/document-resources/src/components/EditDoc.svelte

@@ -186,11 +186,13 @@
   const aside: ButtonItem[] = [
     {
       id: 'references',
-      icon: document.icon.References
+      icon: document.icon.References,
+      showTooltip: { label: document.string.Backlinks, direction: 'bottom' }
     },
     {
       id: 'activity',
-      icon: activity.icon.Activity
+      icon: activity.icon.Activity,
+      showTooltip: { label: activity.string.Activity, direction: 'bottom' }
     }
   ]
   let selectedAside: string | boolean = false
@@ -282,6 +284,7 @@
           icon={IconMoreH}
           iconProps={{ size: 'medium' }}
           kind={'icon'}
+          showTooltip={{ label: view.string.MoreActions, direction: 'bottom' }}
           on:click={showContextMenu}
         />
         {#each actions as action}
@@ -311,6 +314,7 @@
                   fill: doc.color !== undefined ? getPlatformColorDef(doc.color, $themeStore.dark).icon : 'currentColor'
                 }}
             disabled={readonly}
+            showTooltip={{ label: document.string.Icon, direction: 'bottom' }}
             on:click={chooseIcon}
           />
         </div>

plugins/document-resources/src/components/navigator/DocTreeElement.svelte

@@ -19,6 +19,7 @@
   import type { Action, AnySvelteComponent } from '@hcengineering/ui'
   import { IconMoreH, Menu, navigate, showPopup, NavItem, ButtonIcon } from '@hcengineering/ui'
   import { getDocumentLink } from '../../utils'
+  import view from '@hcengineering/view'
 
   export let doc: Document
   export let icon: Asset | AnySvelteComponent | undefined = undefined
@@ -87,6 +88,7 @@
       size={'extra-small'}
       pressed={hovered}
       dataId={'btnDocMore'}
+      tooltip={{ label: view.string.MoreActions, direction: 'top' }}
       on:click={onMenuClick}
     />
   </svelte:fragment>

plugins/drive-resources/src/components/FolderBrowser.svelte

@@ -16,7 +16,7 @@
   import { type Doc, type DocumentQuery, type Ref, type WithLookup } from '@hcengineering/core'
   import drive, { type Drive, type Folder } from '@hcengineering/drive'
   import { Scroller, SearchInput, Panel, Button, IconMoreH } from '@hcengineering/ui'
-  import { Viewlet, ViewOptions } from '@hcengineering/view'
+  import view, { Viewlet, ViewOptions } from '@hcengineering/view'
   import {
     FilterBar,
     FilterButton,
@@ -83,6 +83,7 @@
         icon={IconMoreH}
         iconProps={{ size: 'medium' }}
         kind={'icon'}
+        showTooltip={{ label: view.string.MoreActions, direction: 'bottom' }}
         on:click={(ev) => {
           showMenu(ev, { object })
         }}

plugins/drive-resources/src/components/GridItem.svelte

@@ -17,6 +17,7 @@
   import { type Resource } from '@hcengineering/drive'
   import { getClient } from '@hcengineering/presentation'
   import { Button, IconMoreH } from '@hcengineering/ui'
+  import view from '@hcengineering/view'
   import { ObjectPresenter, TimestampPresenter, openDoc, showMenu } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
 
@@ -71,6 +72,7 @@
             icon={IconMoreH}
             kind="ghost"
             size="medium"
+            showTooltip={{ label: view.string.MoreActions, direction: 'bottom' }}
             on:click={(evt) => {
               hovered = true
               showMenu(evt, { object }, () => {

plugins/view-resources/src/components/navigator/TreeElement.svelte

@@ -27,6 +27,7 @@
     NavGroup,
     ButtonIcon
   } from '@hcengineering/ui'
+  import view from '@hcengineering/view'
 
   export let _id: Ref<Doc> | string | undefined = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
@@ -115,6 +116,7 @@
             icon={action.icon ?? ActionIcon}
             size={'extra-small'}
             kind={'tertiary'}
+            tooltip={{ label: action.label, direction: 'top' }}
             on:click={(ev) => onInlineClick(ev, action)}
           />
         {/each}
@@ -131,7 +133,14 @@
           }}
         />
       {:else if popupMenuActions.length > 0}
-        <ButtonIcon icon={IconMoreH} size={'extra-small'} kind={'tertiary'} {pressed} on:click={onMenuClick} />
+        <ButtonIcon
+          icon={IconMoreH}
+          size={'extra-small'}
+          kind={'tertiary'}
+          tooltip={{ label: view.string.MoreActions, direction: 'top' }}
+          {pressed}
+          on:click={onMenuClick}
+        />
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="visible"><slot name="visible" /></svelte:fragment>
@@ -170,6 +179,7 @@
             icon={action.icon ?? ActionIcon}
             size={'extra-small'}
             kind={'tertiary'}
+            tooltip={{ label: action.label, direction: 'bottom' }}
             on:click={(ev) => onInlineClick(ev, action)}
           />
         {/each}