Fix: Add tooltips and correct color contrast (#619)

Fix: Add tooltips and correct color contrast
microsoftgraph · Jul 1, 2020 · 958055a · 958055a
2 parents d9b33a1 + b3fc995
commit 958055a
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 27 deletions.
diff --git a/src/app/utils/badge-color.ts b/src/app/utils/badge-color.ts
@@ -15,7 +15,7 @@ export function getStyleFor (method: string) {
       return currentTheme.palette.magentaDark;
 
     case 'PATCH':
-      return currentTheme.palette.yellowDark;
+      return currentTheme.palette.orange;
 
     case 'DELETE':
       return currentTheme.palette.redDark;

diff --git a/src/app/views/app-sections/AppTitle.tsx b/src/app/views/app-sections/AppTitle.tsx
@@ -1,5 +1,6 @@
-import { IconButton, IStackTokens, Label, Stack } from 'office-ui-fabric-react';
+import { getId, IconButton, IStackTokens, Label, Stack, TooltipHost } from 'office-ui-fabric-react';
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Authentication } from '../authentication';
 
 export function appTitleDisplayOnFullScreen(
@@ -9,12 +10,20 @@ export function appTitleDisplayOnFullScreen(
     ): React.ReactNode {
 
     return <div style={{ display: 'flex', width: '100%' }}>
-      <IconButton
-        iconProps={{ iconName: 'GlobalNavButton' }}
-        className={classes.sidebarToggle}
-        title='Minimise sidebar'
-        ariaLabel='Minimise sidebar'
-        onClick={() => toggleSidebar()} />
+      <TooltipHost
+        content='Minimize sidebar'
+        id={getId()}
+        calloutProps={{ gapSpace: 0 }}
+        tooltipProps={{
+          onRenderContent: () => <div>
+            <FormattedMessage id={'Minimize sidebar'} /></div>
+        }}>
+          <IconButton
+            iconProps={{ iconName: 'GlobalNavButton' }}
+            className={classes.sidebarToggle}
+            ariaLabel='Minimize sidebar'
+            onClick={() => toggleSidebar()} />
+      </TooltipHost>
       <div className={classes.graphExplorerLabelContainer}>
         {!minimised &&
           <>

diff --git a/src/app/views/settings/Settings.tsx b/src/app/views/settings/Settings.tsx
@@ -3,11 +3,13 @@ import {
   DefaultButton,
   Dialog,
   DialogType,
+  getId,
   IconButton,
   Label,
   Panel,
   PanelType,
-  PrimaryButton
+  PrimaryButton,
+  TooltipHost
 } from 'office-ui-fabric-react';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -147,16 +149,20 @@ function Settings(props: ISettingsProps) {
 
   return (
     <div>
-      <IconButton
-        ariaLabel='More actions'
-        role='button'
-        styles={{
-          label: { marginBottom: -20 },
-          icon: { marginBottom: -20 }
-        }}
-        menuIconProps={{ iconName: 'Settings' }}
-        title='More actions'
-        menuProps={menuProperties} />
+       <TooltipHost
+        content='More actions'
+        id={getId()}
+        calloutProps={{ gapSpace: 0 }}>
+          <IconButton
+            ariaLabel='More actions'
+            role='button'
+            styles={{
+              label: { marginBottom: -20 },
+              icon: { marginBottom: -20 }
+            }}
+            menuIconProps={{ iconName: 'Settings' }}
+            menuProps={menuProperties} />
+      </TooltipHost>
       <div>
         <Dialog
           hidden={themeChooserDialogHidden}

diff --git a/src/messages/GE.json b/src/messages/GE.json
@@ -306,5 +306,6 @@
   "Search sample queries": "Search sample queries",
   "Search history items": "Search history items",
   "Malformed JSON body": "Malformed JSON body",
-  "Review the request body": "Review the request body and fix any malformed JSON."
+  "Review the request body": "Review the request body and fix any malformed JSON.",
+  "Minimize sidebar": "Minimize sidebar"
 }
diff --git a/src/messages/GE_de-DE.json b/src/messages/GE_de-DE.json
@@ -304,5 +304,6 @@
   "permissions not found": "Wir haben keine Genehmigungen gefunden",
   "selected": "ausgewählt",
   "Search sample queries": "Beispielabfragen durchsuchen",
-  "Search history items": "Verlaufselemente durchsuchen"
+  "Search history items": "Verlaufselemente durchsuchen",
+  "Minimize sidebar": "Seitenleiste minimieren"
 }
diff --git a/src/messages/GE_es-ES.json b/src/messages/GE_es-ES.json
@@ -304,5 +304,6 @@
   "permissions not found": "No se encontraron permisos",
   "selected": "seleccionados",
   "Search sample queries": "Buscar consultas de ejemplo",
-  "Search history items": "Buscar elementos de historial"
+  "Search history items": "Buscar elementos de historial",
+  "Minimize sidebar": "Minimizar barra lateral"
 }
diff --git a/src/messages/GE_fr-FR.json b/src/messages/GE_fr-FR.json
@@ -304,5 +304,6 @@
   "permissions not found": "Nous n’avons pas trouvé d’autorisations",
   "selected": "sélectionnées",
   "Search sample queries": "Exemples de requêtes de recherche",
-  "Search history items": "Éléments de l’historique de recherche"
+  "Search history items": "Éléments de l’historique de recherche",
+  "Minimize sidebar": "Réduire la barre latérale"
 }
diff --git a/src/messages/GE_ja-JP.json b/src/messages/GE_ja-JP.json
@@ -304,5 +304,6 @@
   "permissions not found": "アクセス許可が見つかりませんでした",
   "selected": "選択されました",
   "Search sample queries": "サンプル クエリの検索",
-  "Search history items": "検索履歴アイテム"
+  "Search history items": "検索履歴アイテム",
+  "Minimize sidebar": "サイドバーを最小化"
 }
diff --git a/src/messages/GE_pt-BR.json b/src/messages/GE_pt-BR.json
@@ -304,5 +304,6 @@
   "permissions not found": "Não encontramos permissões",
   "selected": "selecionado",
   "Search sample queries": "Pesquisar consultas de amostra",
-  "Search history items": "Pesquisar itens do histórico"
+  "Search history items": "Pesquisar itens do histórico",
+  "Minimize sidebar": "Minimizar a barra lateral"
 }
diff --git a/src/messages/GE_ru-RU.json b/src/messages/GE_ru-RU.json
@@ -304,5 +304,6 @@
   "permissions not found": "Не удалось найти разрешения",
   "selected": "выбрано",
   "Search sample queries": "Примеры поисковых запросов",
-  "Search history items": "Элементы истории поиска"
+  "Search history items": "Элементы истории поиска",
+  "Minimize sidebar": "Свернуть боковую панель"
 }
diff --git a/src/messages/GE_zh-CN.json b/src/messages/GE_zh-CN.json
@@ -304,5 +304,6 @@
   "permissions not found": "未找到权限",
   "selected": "已选中",
   "Search sample queries": "搜索示例查询",
-  "Search history items": "搜索历史记录项"
+  "Search history items": "搜索历史记录项",
+  "Minimize sidebar": "最小化边栏"
 }