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

feat: [DHIS2-15783] Tooltip on long working list names #3474

Merged
merged 7 commits into from
Dec 15, 2023
Merged

feat: [DHIS2-15783] Tooltip on long working list names #3474

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
deb3deb
feat: add tooltip on long WL names
eirikhaugstulen Nov 28, 2023
1269d80
feat: add tooltip on focus
eirikhaugstulen Dec 1, 2023
2d0a1cd
feat: add logic for TemplateSelector
eirikhaugstulen Dec 5, 2023
19bf816
feat: create conditional tooltip for chips
eirikhaugstulen Dec 5, 2023
787c4c9
chore: move tooltips to common folder
eirikhaugstulen Dec 6, 2023
4c34067
chore: rename component
eirikhaugstulen Dec 6, 2023
664b4df
chore: change margins to correct propType
eirikhaugstulen Dec 6, 2023
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
1 change: 0 additions & 1 deletion src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ const getStyles = () => ({
padding: 0,
gap: '4px',
marginBottom: spacers.dp8,
overflow: 'hidden',
},
chipContainer: {
padding: 0,
Expand Down
57 changes: 51 additions & 6 deletions src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,33 @@
// @flow
import React, { useCallback } from 'react';
import { Chip } from '@dhis2/ui';
import { Chip, Tooltip } from '@dhis2/ui';
import { withStyles } from '@material-ui/core/styles';
import type { WorkingListTemplate } from './workingListsBase.types';

type Props = {
template: WorkingListTemplate,
onSelectTemplate: (template: WorkingListTemplate) => void,
...CssClasses,
};

export const TemplateSelectorChip = (props: Props) => {
const { template, onSelectTemplate } = props;
const styles = {
// button style reset
button: {
border: 'none',
backgroundColor: 'transparent',
borderRadius: '16px',
padding: 0,
margin: 0,
minWidth: 0,
minHeight: 0,
'&:hover': {
backgroundColor: 'transparent',
},
},
};

const TemplateSelectorChipPlain = (props: Props) => {
const { template, onSelectTemplate, classes } = props;
const { displayName } = template;

const selectTemplateHandler = useCallback(() => {
Expand All @@ -19,8 +37,35 @@ export const TemplateSelectorChip = (props: Props) => {
const text = displayName.length > 30 ? `${displayName.substring(0, 27)}...` : displayName;

return (
<Chip marginTop="0" marginBottom="0" marginLeft="0" marginRight="0" dataTest="workinglist-template-selector-chip" onClick={selectTemplateHandler}>
{text}
</Chip>
<Tooltip
content={displayName}
placement={'top'}
openDelay={800}
>
{({ ref, onMouseOver, onMouseOut }) => (
<button
ref={ref}
onClick={selectTemplateHandler}
className={classes.button}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onFocus={onMouseOver}
onBlur={onMouseOut}
>
<Chip
marginTop="0"
marginBottom="0"
marginLeft="0"
marginRight="0"
dataTest="workinglist-template-selector-chip"
onClick={selectTemplateHandler}
>
{text}
</Chip>
</button>
)}
</Tooltip>
);
};

export const TemplateSelectorChip = withStyles(styles)(TemplateSelectorChipPlain);
67 changes: 54 additions & 13 deletions ...s/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// @flow
import * as React from 'react';
import { Chip } from '@dhis2/ui';
import { Chip, Tooltip } from '@dhis2/ui';
import { withStyles } from '@material-ui/core/';
import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component';
import type { WorkingListTemplate } from './workingListsBase.types';

Expand All @@ -13,10 +14,27 @@ type Props = {
template: WorkingListTemplate,
currentTemplateId: string,
onSelectTemplate: Function,
...CssClasses,
};

export const TemplateSelectorChip = (props: Props) => {
const { template, currentTemplateId, onSelectTemplate, ...passOnProps } = props;
const styles = {
// button style reset
button: {
border: 'none',
backgroundColor: 'transparent',
borderRadius: '16px',
padding: 0,
margin: 0,
minWidth: 0,
minHeight: 0,
'&:hover': {
backgroundColor: 'transparent',
},
},
};

export const TemplateSelectorChipPlain = (props: Props) => {
const { template, currentTemplateId, onSelectTemplate, classes, ...passOnProps } = props;
const { name, id } = template;

const selectTemplateHandler = React.useCallback(() => {
Expand All @@ -27,16 +45,39 @@ export const TemplateSelectorChip = (props: Props) => {
]);

return (
<Chip
dataTest="workinglist-template-selector-chip"
selected={id === currentTemplateId}
onClick={selectTemplateHandler}
<Tooltip
content={name}
placement={'top'}
openDelay={800}
>
<TemplateSelectorChipContent
{...passOnProps}
text={name}
isSelectedTemplate={id === currentTemplateId}
/>
</Chip>
{({ ref, onMouseOver, onMouseOut }) => (
<button
ref={ref}
onClick={selectTemplateHandler}
className={classes.button}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onFocus={onMouseOver}
onBlur={onMouseOut}
>
<Chip
marginTop="0"
marginBottom="0"
marginLeft="0"
marginRight="0"
superskip marked this conversation as resolved.
Show resolved Hide resolved
dataTest="workinglist-template-selector-chip"
selected={id === currentTemplateId}
>
<TemplateSelectorChipContent
{...passOnProps}
text={name}
isSelectedTemplate={id === currentTemplateId}
/>
</Chip>
</button>
)}
</Tooltip>
);
};

export const TemplateSelectorChip = withStyles(styles)(TemplateSelectorChipPlain);
Loading