yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-03 03:17:11 +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 { Row } from '@strapi/parts/Row';
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 { Popover } from '@strapi/parts/Popover';
import { SortIcon, stopPropagation } from '@strapi/helper-plugin';
import get from 'lodash/get';
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 {
height: ${4 / 16}rem;
}
`;
const mapToLocaleName = (locales, localeCode) =>
get(
locales.find(({ code }) => code === localeCode),
'name',
localeCode
);
get(locales.find(({ code }) => code === localeCode), 'name', localeCode);
const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
const locales = useSelector(selectI18NLocales);
@ -67,38 +94,41 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
return (
<Row {...stopPropagation}>
<Text
style={{ maxWidth: '252px', cursor: 'pointer' }}
data-for={elId}
data-tip={localesNames}
textColor="neutral800"
ellipsis
<Tooltip
label={formatMessage({
id: getTrad('CMListView.popover.display-locales.label'),
defaultMessage: 'Display translated locales',
})}
>
{localesNames}
</Text>
<ActionWrapper>
<IconButton
onClick={handleTogglePopover}
ref={buttonRef}
noBorder
label={formatMessage({
id: 'CMListView.popover.display-locales.label',
defaultMessage: 'Display translated locales',
})}
icon={<SortIcon />}
/>
{visible && (
<Popover source={buttonRef} spacing={16} centered>
<ul>
{localesArray.map(name => (
<Box key={name} padding={3} as="li">
<Text>{name}</Text>
</Box>
))}
</ul>
</Popover>
)}
</ActionWrapper>
<Button type="button" onClick={handleTogglePopover} ref={buttonRef}>
<Row>
<Text
style={{ maxWidth: '252px', cursor: 'pointer' }}
data-for={elId}
data-tip={localesNames}
textColor="neutral800"
ellipsis
>
{localesNames}
</Text>
<ActionWrapper>
<SortIcon />
{visible && (
<Popover source={buttonRef} spacing={16} centered>
<ul>
{localesArray.map(name => (
<Box key={name} padding={3} as="li">
<Text>{name}</Text>
</Box>
))}
</ul>
</Popover>
)}
</ActionWrapper>
</Row>
</Button>
</Tooltip>
</Row>
);
};