From deb3deb0acb13401d6786139cc3ac3bddfc78092 Mon Sep 17 00:00:00 2001 From: eirikhaugstulen Date: Tue, 28 Nov 2023 14:57:27 +0100 Subject: [PATCH 1/7] feat: add tooltip on long WL names --- .../TemplateSelectorChip.component.js | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js index 5ce7331edf..c1fb7db8e0 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js @@ -1,6 +1,6 @@ // @flow import * as React from 'react'; -import { Chip } from '@dhis2/ui'; +import { Chip, Tooltip } from '@dhis2/ui'; import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component'; import type { WorkingListTemplate } from './workingListsBase.types'; @@ -27,16 +27,23 @@ export const TemplateSelectorChip = (props: Props) => { ]); return ( - - - + + + + ); }; From 1269d806ba3c2ab3da29cb5ddba0089acdd26807 Mon Sep 17 00:00:00 2001 From: eirikhaugstulen Date: Fri, 1 Dec 2023 15:07:35 +0100 Subject: [PATCH 2/7] feat: add tooltip on focus --- .../TemplateSelectorChip.component.js | 68 +++++++++++++++---- 1 file changed, 54 insertions(+), 14 deletions(-) diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js index c1fb7db8e0..2c099652a7 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js @@ -1,6 +1,7 @@ // @flow import * as React from 'react'; import { Chip, Tooltip } from '@dhis2/ui'; +import { withStyles } from '@material-ui/core/'; import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component'; import type { WorkingListTemplate } from './workingListsBase.types'; @@ -13,10 +14,35 @@ 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', + }, + }, + // Override default chip margin + chip: { + marginTop: '0 !important', + marginBottom: '0 !important', + marginRight: '0 !important', + marginLeft: '0 !important', + backgroundColor: 'red', + }, +}; + +export const TemplateSelectorChipPlain = (props: Props) => { + const { template, currentTemplateId, onSelectTemplate, classes, ...passOnProps } = props; const { name, id } = template; const selectTemplateHandler = React.useCallback(() => { @@ -32,18 +58,32 @@ export const TemplateSelectorChip = (props: Props) => { placement={'top'} openDelay={800} > - - - + {({ ref, onMouseOver, onMouseOut }) => ( + + )} ); }; + +export const TemplateSelectorChip = withStyles(styles)(TemplateSelectorChipPlain); From 2d0a1cd86e21fb0963d0e0d4265aec9034bdc8a5 Mon Sep 17 00:00:00 2001 From: eirikhaugstulen Date: Tue, 5 Dec 2023 10:17:41 +0100 Subject: [PATCH 3/7] feat: add logic for TemplateSelector --- .../TemplateSelector.component.js | 1 - .../TemplateSelectorChip.component.js | 57 +++++++++++++++++-- .../TemplateSelectorChip.component.js | 14 ++--- 3 files changed, 55 insertions(+), 17 deletions(-) diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js index 5ffa6dd1a8..a22cbf2149 100644 --- a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js +++ b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js @@ -18,7 +18,6 @@ const getStyles = () => ({ padding: 0, gap: '4px', marginBottom: spacers.dp8, - overflow: 'hidden', }, chipContainer: { padding: 0, diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js index 24e3ddc79f..0941b2012c 100644 --- a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js @@ -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(() => { @@ -19,8 +37,35 @@ export const TemplateSelectorChip = (props: Props) => { const text = displayName.length > 30 ? `${displayName.substring(0, 27)}...` : displayName; return ( - - {text} - + + {({ ref, onMouseOver, onMouseOut }) => ( + + )} + ); }; + +export const TemplateSelectorChip = withStyles(styles)(TemplateSelectorChipPlain); diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js index 2c099652a7..40e263df14 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js @@ -31,14 +31,6 @@ const styles = { backgroundColor: 'transparent', }, }, - // Override default chip margin - chip: { - marginTop: '0 !important', - marginBottom: '0 !important', - marginRight: '0 !important', - marginLeft: '0 !important', - backgroundColor: 'red', - }, }; export const TemplateSelectorChipPlain = (props: Props) => { @@ -69,9 +61,11 @@ export const TemplateSelectorChipPlain = (props: Props) => { onBlur={onMouseOut} > Date: Tue, 5 Dec 2023 13:42:06 +0100 Subject: [PATCH 4/7] feat: create conditional tooltip for chips --- .../ConditionalTooltipForChip.component.js | 60 ++++++++++++++++ .../ConditionalTooltipForChip/index.js | 2 + .../TemplateSelector.component.js | 5 +- .../TemplateSelectorChip.component.js | 65 +++++------------ .../TemplateSelectorChip.component.js | 72 ++++++------------- 5 files changed, 106 insertions(+), 98 deletions(-) create mode 100644 src/core_modules/capture-core/components/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js create mode 100644 src/core_modules/capture-core/components/ConditionalTooltipForChip/index.js diff --git a/src/core_modules/capture-core/components/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js b/src/core_modules/capture-core/components/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js new file mode 100644 index 0000000000..f8be83d312 --- /dev/null +++ b/src/core_modules/capture-core/components/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js @@ -0,0 +1,60 @@ +// @flow +import React from 'react'; +import { Tooltip } from '@dhis2/ui'; +import { withStyles } from '@material-ui/core/'; + +type Props = { + enabled: boolean, + onClick: Function, + children: any, + ...CssClasses, +}; + +const styles = { + // button style reset + button: { + border: 'none', + backgroundColor: 'transparent', + borderRadius: '16px', + padding: 0, + margin: 0, + minWidth: 0, + minHeight: 0, + '&:hover': { + backgroundColor: 'transparent', + }, + }, +}; +const ConditionalTooltipForChipPlain = (props: Props) => { + const { enabled, children, classes, onClick, ...passOnProps } = props; + + return enabled ? + ( + + {({ ref, onMouseOver, onMouseOut }) => ( + + )} + + ) : ( + + ); +}; + +export const ConditionalTooltipForChip = withStyles(styles)(ConditionalTooltipForChipPlain); diff --git a/src/core_modules/capture-core/components/ConditionalTooltipForChip/index.js b/src/core_modules/capture-core/components/ConditionalTooltipForChip/index.js new file mode 100644 index 0000000000..f946f28ea1 --- /dev/null +++ b/src/core_modules/capture-core/components/ConditionalTooltipForChip/index.js @@ -0,0 +1,2 @@ +// @flow +export { ConditionalTooltipForChip } from './ConditionalTooltipForChip.component'; diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js index a22cbf2149..43a48240be 100644 --- a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js +++ b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js @@ -79,7 +79,10 @@ const TemplateSelectorPlain = (props: Props) => { const { id } = customTemplate; return (
- +
); }); diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js index 0941b2012c..9e4f953e8e 100644 --- a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js @@ -1,33 +1,16 @@ // @flow import React, { useCallback } from 'react'; -import { Chip, Tooltip } from '@dhis2/ui'; -import { withStyles } from '@material-ui/core/styles'; +import { Chip } from '@dhis2/ui'; import type { WorkingListTemplate } from './workingListsBase.types'; +import { ConditionalTooltipForChip } from '../ConditionalTooltipForChip'; type Props = { template: WorkingListTemplate, onSelectTemplate: (template: WorkingListTemplate) => void, - ...CssClasses, }; -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; +export const TemplateSelectorChip = (props: Props) => { + const { template, onSelectTemplate } = props; const { displayName } = template; const selectTemplateHandler = useCallback(() => { @@ -37,35 +20,23 @@ const TemplateSelectorChipPlain = (props: Props) => { const text = displayName.length > 30 ? `${displayName.substring(0, 27)}...` : displayName; return ( - 30} + onClick={selectTemplateHandler} > - {({ ref, onMouseOver, onMouseOut }) => ( - - )} - + + {text} + + + ); }; - -export const TemplateSelectorChip = withStyles(styles)(TemplateSelectorChipPlain); diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js index 40e263df14..87d3b0813a 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js @@ -1,9 +1,9 @@ // @flow import * as React from 'react'; -import { Chip, Tooltip } from '@dhis2/ui'; -import { withStyles } from '@material-ui/core/'; +import { Chip } from '@dhis2/ui'; import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component'; import type { WorkingListTemplate } from './workingListsBase.types'; +import { ConditionalTooltipForChip } from '../../ConditionalTooltipForChip'; type PassOnProps = { currentListIsModified: boolean, @@ -14,27 +14,10 @@ type Props = { template: WorkingListTemplate, currentTemplateId: string, onSelectTemplate: Function, - ...CssClasses, }; -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; +export const TemplateSelectorChip = (props: Props) => { + const { template, currentTemplateId, onSelectTemplate, ...passOnProps } = props; const { name, id } = template; const selectTemplateHandler = React.useCallback(() => { @@ -45,39 +28,28 @@ export const TemplateSelectorChipPlain = (props: Props) => { ]); return ( - 30} + onClick={selectTemplateHandler} > - {({ ref, onMouseOver, onMouseOut }) => ( - - )} - + + + + ); }; -export const TemplateSelectorChip = withStyles(styles)(TemplateSelectorChipPlain); From 787c4c9bc8892f274df1f99f152b08b0b686de80 Mon Sep 17 00:00:00 2001 From: eirikhaugstulen Date: Wed, 6 Dec 2023 10:11:03 +0100 Subject: [PATCH 5/7] chore: move tooltips to common folder --- .../DataEntryWrapper/DataEntry/withMainButton.js | 2 +- .../FilterButton/FilterButtonMain.component.js | 2 +- .../components/Notes/Notes.component.js | 2 +- .../QuickActionButton/QuickActionButton.js | 2 +- .../ProgramStageSelector.component.js | 2 +- .../EventDetailsSection.component.js | 2 +- .../Relationships/Relationships.component.js | 2 +- .../TemplateSelectorChip.component.js | 2 +- .../ConditionalTooltip.component.js | 0 .../{ => Tooltips}/ConditionalTooltip/index.js | 0 .../ConditionalTooltipForChip.component.js | 4 ++-- .../ConditionalTooltipForChip/index.js | 0 .../Actions/AddNew/AddNew.component.js | 2 +- .../WidgetEventEdit/DataEntry/withMainButton.js | 2 +- .../WidgetEventEdit/WidgetEventEdit.container.js | 2 +- .../Stages/Stage/Stage.component.js | 2 +- .../Stage/StageDetail/StageDetail.component.js | 2 +- .../TemplateSelectorChip.component.js | 14 +++++++++++--- .../TemplateSelectorChipContent.component.js | 4 +++- 19 files changed, 29 insertions(+), 19 deletions(-) rename src/core_modules/capture-core/components/{ => Tooltips}/ConditionalTooltip/ConditionalTooltip.component.js (100%) rename src/core_modules/capture-core/components/{ => Tooltips}/ConditionalTooltip/index.js (100%) rename src/core_modules/capture-core/components/{ => Tooltips}/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js (93%) rename src/core_modules/capture-core/components/{ => Tooltips}/ConditionalTooltipForChip/index.js (100%) diff --git a/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/withMainButton.js b/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/withMainButton.js index 8b18d2f201..66f2be3f12 100644 --- a/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/withMainButton.js +++ b/src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/withMainButton.js @@ -3,7 +3,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; import i18n from '@dhis2/d2-i18n'; import { Button } from '@dhis2/ui'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { newEventSaveTypes } from './newEventSaveTypes'; import { getDataEntryKey } from '../../../../DataEntry/common/getDataEntryKey'; import { type RenderFoundation } from '../../../../../metaData'; diff --git a/src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js b/src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js index 6541747f96..8a1c83ddd1 100644 --- a/src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js +++ b/src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import Popover from '@material-ui/core/Popover'; import { IconChevronDown16, IconChevronUp16, Button } from '@dhis2/ui'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { ActiveFilterButton } from './ActiveFilterButton.component'; import { FilterSelectorContents } from '../Contents'; import type { UpdateFilter, ClearFilter, RemoveFilter } from '../../types'; diff --git a/src/core_modules/capture-core/components/Notes/Notes.component.js b/src/core_modules/capture-core/components/Notes/Notes.component.js index bb1fc61c8d..1a7626bfd7 100644 --- a/src/core_modules/capture-core/components/Notes/Notes.component.js +++ b/src/core_modules/capture-core/components/Notes/Notes.component.js @@ -6,7 +6,7 @@ import { withStyles } from '@material-ui/core'; import { colors, spacersNum, Menu, MenuItem, Button } from '@dhis2/ui'; import i18n from '@dhis2/d2-i18n'; import { withFocusSaver } from 'capture-ui'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { TextField } from '../FormFields/New'; import type { Note } from './notes.types'; diff --git a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentQuickActions/QuickActionButton/QuickActionButton.js b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentQuickActions/QuickActionButton/QuickActionButton.js index 7727a05019..ae60c51371 100644 --- a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentQuickActions/QuickActionButton/QuickActionButton.js +++ b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentQuickActions/QuickActionButton/QuickActionButton.js @@ -3,7 +3,7 @@ import React from 'react'; import i18n from '@dhis2/d2-i18n'; import { Button, spacers } from '@dhis2/ui'; import { withStyles } from '@material-ui/core'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import type { QuickActionButtonTypes } from './QuickActionButton.types'; const styles = { diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/ProgramStageSelector/ProgramStageSelector.component.js b/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/ProgramStageSelector/ProgramStageSelector.component.js index 092ddf13f6..01967b1f21 100644 --- a/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/ProgramStageSelector/ProgramStageSelector.component.js +++ b/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/ProgramStageSelector/ProgramStageSelector.component.js @@ -2,7 +2,7 @@ import React from 'react'; import i18n from '@dhis2/d2-i18n'; import { Button, spacers, spacersNum } from '@dhis2/ui'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { withStyles } from '@material-ui/core'; import { NonBundledDhis2Icon } from '../../../NonBundledDhis2Icon'; diff --git a/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js b/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js index 31da7bdbd4..7f6a2a440f 100644 --- a/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js +++ b/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js @@ -5,7 +5,7 @@ import { dataEntryIds, dataEntryKeys } from 'capture-core/constants'; import { withStyles } from '@material-ui/core/'; import { spacers, IconFileDocument24, Button } from '@dhis2/ui'; import i18n from '@dhis2/d2-i18n'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { ViewEventSection } from '../Section/ViewEventSection.component'; import { ViewEventSectionHeader } from '../Section/ViewEventSectionHeader.component'; import { EditEventDataEntry } from '../../../WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.container'; diff --git a/src/core_modules/capture-core/components/Relationships/Relationships.component.js b/src/core_modules/capture-core/components/Relationships/Relationships.component.js index 1ee7f8af6c..be9fb6c569 100644 --- a/src/core_modules/capture-core/components/Relationships/Relationships.component.js +++ b/src/core_modules/capture-core/components/Relationships/Relationships.component.js @@ -5,7 +5,7 @@ import classNames from 'classnames'; import i18n from '@dhis2/d2-i18n'; import { IconButton, withStyles } from '@material-ui/core'; import { IconArrowRight16, IconCross24, Button } from '@dhis2/ui'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import type { RelationshipType } from '../../metaData'; import type { Relationship, Entity } from './relationships.types'; diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js index 9e4f953e8e..bf9ad7006f 100644 --- a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js @@ -2,7 +2,7 @@ import React, { useCallback } from 'react'; import { Chip } from '@dhis2/ui'; import type { WorkingListTemplate } from './workingListsBase.types'; -import { ConditionalTooltipForChip } from '../ConditionalTooltipForChip'; +import { ConditionalTooltipForChip } from '../Tooltips/ConditionalTooltipForChip'; type Props = { template: WorkingListTemplate, diff --git a/src/core_modules/capture-core/components/ConditionalTooltip/ConditionalTooltip.component.js b/src/core_modules/capture-core/components/Tooltips/ConditionalTooltip/ConditionalTooltip.component.js similarity index 100% rename from src/core_modules/capture-core/components/ConditionalTooltip/ConditionalTooltip.component.js rename to src/core_modules/capture-core/components/Tooltips/ConditionalTooltip/ConditionalTooltip.component.js diff --git a/src/core_modules/capture-core/components/ConditionalTooltip/index.js b/src/core_modules/capture-core/components/Tooltips/ConditionalTooltip/index.js similarity index 100% rename from src/core_modules/capture-core/components/ConditionalTooltip/index.js rename to src/core_modules/capture-core/components/Tooltips/ConditionalTooltip/index.js diff --git a/src/core_modules/capture-core/components/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js b/src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js similarity index 93% rename from src/core_modules/capture-core/components/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js rename to src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js index f8be83d312..0007249e88 100644 --- a/src/core_modules/capture-core/components/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js +++ b/src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js @@ -38,8 +38,8 @@ const ConditionalTooltipForChipPlain = (props: Props) => { ref={ref} onClick={onClick} className={classes.button} - onMouseOver={onMouseOver} - onMouseOut={onMouseOut} + onPointerEnter={onMouseOver} + onPointerLeave={onMouseOut} onFocus={onMouseOver} onBlur={onMouseOut} > diff --git a/src/core_modules/capture-core/components/ConditionalTooltipForChip/index.js b/src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/index.js similarity index 100% rename from src/core_modules/capture-core/components/ConditionalTooltipForChip/index.js rename to src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/index.js diff --git a/src/core_modules/capture-core/components/WidgetEnrollment/Actions/AddNew/AddNew.component.js b/src/core_modules/capture-core/components/WidgetEnrollment/Actions/AddNew/AddNew.component.js index e4ec61be1b..ce6e30b06b 100644 --- a/src/core_modules/capture-core/components/WidgetEnrollment/Actions/AddNew/AddNew.component.js +++ b/src/core_modules/capture-core/components/WidgetEnrollment/Actions/AddNew/AddNew.component.js @@ -2,7 +2,7 @@ import { IconAdd16, MenuItem } from '@dhis2/ui'; import React from 'react'; import i18n from '@dhis2/d2-i18n'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import type { Props } from './addNew.types'; export const AddNew = ({ canAddNew, onlyEnrollOnce, tetName, onAddNew }: Props) => { diff --git a/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withMainButton.js b/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withMainButton.js index 42491ef4ab..ba6088af20 100644 --- a/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withMainButton.js +++ b/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withMainButton.js @@ -3,7 +3,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; import i18n from '@dhis2/d2-i18n'; import { Button } from '@dhis2/ui'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { type RenderFoundation } from '../../../metaData'; type Props = { diff --git a/src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js b/src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js index e2096656ab..58c4645463 100644 --- a/src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js +++ b/src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js @@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { spacersNum, Button, colors, IconEdit24, IconArrowLeft24 } from '@dhis2/ui'; import { withStyles } from '@material-ui/core'; import i18n from '@dhis2/d2-i18n'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { useEnrollmentEditEventPageMode, useAvailableProgramStages } from 'capture-core/hooks'; import { useCoreOrgUnit } from 'capture-core/metadataRetrieval/coreOrgUnit'; import type { Props } from './widgetEventEdit.types'; diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js index f8a8908b20..77728e6dc8 100644 --- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js +++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js @@ -4,7 +4,7 @@ import cx from 'classnames'; import i18n from '@dhis2/d2-i18n'; import { withStyles } from '@material-ui/core'; import { spacersNum, colors, IconAdd16, Button } from '@dhis2/ui'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { StageOverview } from './StageOverview'; import type { Props } from './stage.types'; import { Widget } from '../../../Widget'; diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js index 0cc28bc98c..86a4cad8bb 100644 --- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js +++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js @@ -16,7 +16,7 @@ import { colors, IconAdd16, Tooltip, } from '@dhis2/ui'; -import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip'; +import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; import { sortDataFromEvent } from './hooks/sortFuntions'; import { useComputeDataFromEvent, useComputeHeaderColumn, formatRowForView } from './hooks/useEventList'; import { DEFAULT_NUMBER_OF_ROW, SORT_DIRECTION } from './hooks/constants'; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js index 87d3b0813a..801432fa56 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js @@ -3,7 +3,7 @@ import * as React from 'react'; import { Chip } from '@dhis2/ui'; import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component'; import type { WorkingListTemplate } from './workingListsBase.types'; -import { ConditionalTooltipForChip } from '../../ConditionalTooltipForChip'; +import { ConditionalTooltipForChip } from '../../Tooltips/ConditionalTooltipForChip'; type PassOnProps = { currentListIsModified: boolean, @@ -14,10 +14,17 @@ type Props = { template: WorkingListTemplate, currentTemplateId: string, onSelectTemplate: Function, + maxCharacters?: number, }; export const TemplateSelectorChip = (props: Props) => { - const { template, currentTemplateId, onSelectTemplate, ...passOnProps } = props; + const { + template, + currentTemplateId, + onSelectTemplate, + maxCharacters = 30, + ...passOnProps + } = props; const { name, id } = template; const selectTemplateHandler = React.useCallback(() => { @@ -32,7 +39,7 @@ export const TemplateSelectorChip = (props: Props) => { content={name} placement={'top'} openDelay={800} - enabled={name.length > 30} + enabled={name.length > maxCharacters} onClick={selectTemplateHandler} > { diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChipContent.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChipContent.component.js index 57d0c53205..d9efe28079 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChipContent.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChipContent.component.js @@ -2,6 +2,7 @@ type Props = { currentListIsModified: boolean, + maxCharacters: number, text: string, isSelectedTemplate: boolean, }; @@ -10,10 +11,11 @@ export const TemplateSelectorChipContent = (props: Props) => { const { currentListIsModified, text, + maxCharacters, isSelectedTemplate, } = props; - const truncatedText = text.length > 30 ? `${text.substring(0, 27)}...` : text; + const truncatedText = text.length > maxCharacters ? `${text.substring(0, maxCharacters - 3)}...` : text; const content = isSelectedTemplate && currentListIsModified ? `${truncatedText} *` : truncatedText; return content; From 4c340670723cbfbbe8c2cecc3d64da67eb3063a5 Mon Sep 17 00:00:00 2001 From: eirikhaugstulen Date: Wed, 6 Dec 2023 10:14:43 +0100 Subject: [PATCH 6/7] chore: rename component --- .../TemplateSelector/TemplateSelectorChip.component.js | 6 +++--- .../components/Tooltips/ConditionalTooltipForChip/index.js | 2 -- .../TooltipForChip.component.js} | 4 ++-- .../components/Tooltips/TooltipForChip/index.js | 2 ++ .../WorkingListsBase/TemplateSelectorChip.component.js | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) delete mode 100644 src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/index.js rename src/core_modules/capture-core/components/Tooltips/{ConditionalTooltipForChip/ConditionalTooltipForChip.component.js => TooltipForChip/TooltipForChip.component.js} (90%) create mode 100644 src/core_modules/capture-core/components/Tooltips/TooltipForChip/index.js diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js index bf9ad7006f..64392dbca2 100644 --- a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js @@ -2,7 +2,7 @@ import React, { useCallback } from 'react'; import { Chip } from '@dhis2/ui'; import type { WorkingListTemplate } from './workingListsBase.types'; -import { ConditionalTooltipForChip } from '../Tooltips/ConditionalTooltipForChip'; +import { TooltipForChip } from '../Tooltips/TooltipForChip'; type Props = { template: WorkingListTemplate, @@ -20,7 +20,7 @@ export const TemplateSelectorChip = (props: Props) => { const text = displayName.length > 30 ? `${displayName.substring(0, 27)}...` : displayName; return ( - { > {text} - + ); }; diff --git a/src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/index.js b/src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/index.js deleted file mode 100644 index f946f28ea1..0000000000 --- a/src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { ConditionalTooltipForChip } from './ConditionalTooltipForChip.component'; diff --git a/src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js b/src/core_modules/capture-core/components/Tooltips/TooltipForChip/TooltipForChip.component.js similarity index 90% rename from src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js rename to src/core_modules/capture-core/components/Tooltips/TooltipForChip/TooltipForChip.component.js index 0007249e88..01c539b3af 100644 --- a/src/core_modules/capture-core/components/Tooltips/ConditionalTooltipForChip/ConditionalTooltipForChip.component.js +++ b/src/core_modules/capture-core/components/Tooltips/TooltipForChip/TooltipForChip.component.js @@ -25,7 +25,7 @@ const styles = { }, }, }; -const ConditionalTooltipForChipPlain = (props: Props) => { +const TooltipForChipPlain = (props: Props) => { const { enabled, children, classes, onClick, ...passOnProps } = props; return enabled ? @@ -57,4 +57,4 @@ const ConditionalTooltipForChipPlain = (props: Props) => { ); }; -export const ConditionalTooltipForChip = withStyles(styles)(ConditionalTooltipForChipPlain); +export const TooltipForChip = withStyles(styles)(TooltipForChipPlain); diff --git a/src/core_modules/capture-core/components/Tooltips/TooltipForChip/index.js b/src/core_modules/capture-core/components/Tooltips/TooltipForChip/index.js new file mode 100644 index 0000000000..8894bd8888 --- /dev/null +++ b/src/core_modules/capture-core/components/Tooltips/TooltipForChip/index.js @@ -0,0 +1,2 @@ +// @flow +export { TooltipForChip } from './TooltipForChip.component'; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js index 801432fa56..c0f7255377 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js @@ -3,7 +3,7 @@ import * as React from 'react'; import { Chip } from '@dhis2/ui'; import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component'; import type { WorkingListTemplate } from './workingListsBase.types'; -import { ConditionalTooltipForChip } from '../../Tooltips/ConditionalTooltipForChip'; +import { TooltipForChip } from '../../Tooltips/TooltipForChip'; type PassOnProps = { currentListIsModified: boolean, @@ -35,7 +35,7 @@ export const TemplateSelectorChip = (props: Props) => { ]); return ( - { isSelectedTemplate={id === currentTemplateId} /> - + ); }; From 664b4df2a0dc6c1a8d8d2acde4561554a9a9820f Mon Sep 17 00:00:00 2001 From: eirikhaugstulen Date: Wed, 6 Dec 2023 10:35:39 +0100 Subject: [PATCH 7/7] chore: change margins to correct propType --- .../TemplateSelector/TemplateSelectorChip.component.js | 8 ++++---- .../WorkingListsBase/TemplateSelectorChip.component.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js index 64392dbca2..5b9b05cfb0 100644 --- a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js @@ -28,10 +28,10 @@ export const TemplateSelectorChip = (props: Props) => { onClick={selectTemplateHandler} > {text} diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js index c0f7255377..238423ef2c 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js @@ -43,10 +43,10 @@ export const TemplateSelectorChip = (props: Props) => { onClick={selectTemplateHandler} >