yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-09 14:51:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11118 from strapi/fix/i18n-available-content

Browse Source 
Make the content available cell clickable
This commit is contained in:
ELABBASSI Hicham 2021-09-29 10:34:30 +02:00 committed by GitHub
commit 012b46c16a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 68 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
packages/plugins/i18n/admin/src/components/LocaleListCell/LocaleListCell.js
View File

@ -5,25 +5,52 @@ import { useIntl } from 'react-intl';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { Row } from '@strapi/parts/Row'; import { Row } from '@strapi/parts/Row';
import { Box } from '@strapi/parts/Box'; import { Box } from '@strapi/parts/Box';
import { IconButton } from '@strapi/parts/IconButton'; import { Tooltip } from '@strapi/parts/Tooltip';
import { Text } from '@strapi/parts/Text'; import { Text } from '@strapi/parts/Text';
import { Popover } from '@strapi/parts/Popover'; import { Popover } from '@strapi/parts/Popover';
import { SortIcon, stopPropagation } from '@strapi/helper-plugin'; import { SortIcon, stopPropagation } from '@strapi/helper-plugin';
import get from 'lodash/get'; import get from 'lodash/get';
import selectI18NLocales from '../../selectors/selectI18nLocales'; import selectI18NLocales from '../../selectors/selectI18nLocales';
import { getTrad } from '../../utils';
const ActionWrapper = styled.span` const Button = styled.button`
svg {
> g,
path {
fill: ${({ theme }) => theme.colors.neutral500};
}
}
&:hover {
svg {
> g,
path {
fill: ${({ theme }) => theme.colors.neutral600};
}
}
}
&:active {
svg {
> g,
path {
fill: ${({ theme }) => theme.colors.neutral400};
}
}
}
`;
const ActionWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
height: ${32 / 16}rem;
width: ${32 / 16}rem;
svg { svg {
height: ${4 / 16}rem; height: ${4 / 16}rem;
} }
`; `;
const mapToLocaleName = (locales, localeCode) => const mapToLocaleName = (locales, localeCode) =>
get( get(locales.find(({ code }) => code === localeCode), 'name', localeCode);
locales.find(({ code }) => code === localeCode),
'name',
localeCode
);
const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => { const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
const locales = useSelector(selectI18NLocales); const locales = useSelector(selectI18NLocales);
@ -67,38 +94,41 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
return ( return (
<Row {...stopPropagation}> <Row {...stopPropagation}>
<Text <Tooltip
style={{ maxWidth: '252px', cursor: 'pointer' }} label={formatMessage({
data-for={elId} id: getTrad('CMListView.popover.display-locales.label'),
data-tip={localesNames} defaultMessage: 'Display translated locales',
textColor="neutral800" })}
ellipsis
> >
{localesNames} <Button type="button" onClick={handleTogglePopover} ref={buttonRef}>
</Text> <Row>
<ActionWrapper> <Text
<IconButton style={{ maxWidth: '252px', cursor: 'pointer' }}
onClick={handleTogglePopover} data-for={elId}
ref={buttonRef} data-tip={localesNames}
noBorder textColor="neutral800"
label={formatMessage({ ellipsis
id: 'CMListView.popover.display-locales.label', >
defaultMessage: 'Display translated locales', {localesNames}
})} </Text>
icon={<SortIcon />} <ActionWrapper>
/> <SortIcon />
{visible && (
<Popover source={buttonRef} spacing={16} centered> {visible && (
<ul> <Popover source={buttonRef} spacing={16} centered>
{localesArray.map(name => ( <ul>
<Box key={name} padding={3} as="li"> {localesArray.map(name => (
<Text>{name}</Text> <Box key={name} padding={3} as="li">
</Box> <Text>{name}</Text>
))} </Box>
</ul> ))}
</Popover> </ul>
)} </Popover>
</ActionWrapper> )}
</ActionWrapper>
</Row>
</Button>
</Tooltip>
</Row> </Row>
); );
}; };