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.

Sign up for GitHub

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

Jump to bottom

Fix: Add tooltips and correct color contrast #619

Merged
merged 8 commits into from
Jul 1, 2020
Merged

Fix: Add tooltips and correct color contrast #619

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
466611c
add tooltip to sidebar buttons
ElinorW Jun 23, 2020
88f763e
Merge branch 'dev' into fix/accessibility-support
ElinorW Jun 23, 2020
5bab204
Merge branch 'dev' into fix/accessibility-support
ElinorW Jun 24, 2020
d6058c1
Change 'Patch' badge colour
ElinorW Jun 26, 2020
8c236f1
Merge branch 'dev' into fix/accessibility-support
ElinorW Jun 26, 2020
76bf03d
Remove double tooltip
ElinorW Jun 26, 2020
6eb5a74
Correct typo
ElinorW Jun 29, 2020
b3fc995
commit translated content
ElinorW Jul 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/utils/badge-color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
18 changes: 11 additions & 7 deletions src/app/views/app-sections/AppTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
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 { Authentication } from '../authentication';

Expand All @@ -9,12 +9,16 @@ 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='Minimise sidebar'
Copy link

Choose a reason for hiding this comment

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

misspelt. should be z

Copy link

Choose a reason for hiding this comment

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

also what about localization here?

Copy link
Contributor

Choose a reason for hiding this comment

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

misspelt. should be z

@ddyett depends on which english pronunciation you're using 👽

Copy link

Choose a reason for hiding this comment

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

all the more reason for localization. since the most popular page is en-US probably should be z.

id={getId()}
calloutProps={{ gapSpace: 0 }}>
<IconButton
iconProps={{ iconName: 'GlobalNavButton' }}
className={classes.sidebarToggle}
ariaLabel='Minimise sidebar'
onClick={() => toggleSidebar()} />
</TooltipHost>
<div className={classes.graphExplorerLabelContainer}>
{!minimised &&
<>
Expand Down
28 changes: 17 additions & 11 deletions src/app/views/settings/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand Down