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/TemplateSelector.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js index 5ffa6dd1a8..43a48240be 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, @@ -80,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 24e3ddc79f..5b9b05cfb0 100644 --- a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js @@ -2,6 +2,7 @@ import React, { useCallback } from 'react'; import { Chip } from '@dhis2/ui'; import type { WorkingListTemplate } from './workingListsBase.types'; +import { TooltipForChip } from '../Tooltips/TooltipForChip'; type Props = { template: WorkingListTemplate, @@ -19,8 +20,23 @@ export const TemplateSelectorChip = (props: Props) => { const text = displayName.length > 30 ? `${displayName.substring(0, 27)}...` : displayName; return ( - - {text} - + 30} + onClick={selectTemplateHandler} + > + + {text} + + + ); }; 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/Tooltips/TooltipForChip/TooltipForChip.component.js b/src/core_modules/capture-core/components/Tooltips/TooltipForChip/TooltipForChip.component.js new file mode 100644 index 0000000000..01c539b3af --- /dev/null +++ b/src/core_modules/capture-core/components/Tooltips/TooltipForChip/TooltipForChip.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 TooltipForChipPlain = (props: Props) => { + const { enabled, children, classes, onClick, ...passOnProps } = props; + + return enabled ? + ( + + {({ ref, onMouseOver, onMouseOut }) => ( + + )} + + ) : ( + + ); +}; + +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/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 5ce7331edf..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 @@ -3,6 +3,7 @@ import * as React from 'react'; import { Chip } from '@dhis2/ui'; import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component'; import type { WorkingListTemplate } from './workingListsBase.types'; +import { TooltipForChip } from '../../Tooltips/TooltipForChip'; type PassOnProps = { currentListIsModified: boolean, @@ -13,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(() => { @@ -27,16 +35,29 @@ export const TemplateSelectorChip = (props: Props) => { ]); return ( - 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;