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

64
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,6 +94,14 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
return ( return (
<Row {...stopPropagation}> <Row {...stopPropagation}>
<Tooltip
label={formatMessage({
id: getTrad('CMListView.popover.display-locales.label'),
defaultMessage: 'Display translated locales',
})}
>
<Button type="button" onClick={handleTogglePopover} ref={buttonRef}>
<Row>
<Text <Text
style={{ maxWidth: '252px', cursor: 'pointer' }} style={{ maxWidth: '252px', cursor: 'pointer' }}
data-for={elId} data-for={elId}
@ -77,16 +112,8 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
{localesNames} {localesNames}
</Text> </Text>
<ActionWrapper> <ActionWrapper>
<IconButton <SortIcon />
onClick={handleTogglePopover}
ref={buttonRef}
noBorder
label={formatMessage({
id: 'CMListView.popover.display-locales.label',
defaultMessage: 'Display translated locales',
})}
icon={<SortIcon />}
/>
{visible && ( {visible && (
<Popover source={buttonRef} spacing={16} centered> <Popover source={buttonRef} spacing={16} centered>
<ul> <ul>
@ -100,6 +127,9 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
)} )}
</ActionWrapper> </ActionWrapper>
</Row> </Row>
</Button>
</Tooltip>
</Row>
); );
}; };