yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-27 15:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add status bullet to locale picker

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-09-21 05:59:09 +02:00
parent 646e9f220d
commit 9096a86b91
9 changed files with 69 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/admin/package.json
View File

@ -40,8 +40,8 @@
"@fortawesome/react-fontawesome": "^0.1.14",
"@strapi/babel-plugin-switch-ee-ce": "1.0.0",
"@strapi/helper-plugin": "3.6.8",
"@strapi/icons": "0.0.1-alpha.33",
"@strapi/parts": "0.0.1-alpha.33",
"@strapi/icons": "0.0.1-alpha.34",
"@strapi/parts": "0.0.1-alpha.34",
"@strapi/utils": "3.6.8",
"axios": "^0.21.1",
"babel-loader": "8.2.2",

4
packages/core/helper-plugin/package.json
View File

@ -57,8 +57,8 @@
"@storybook/builder-webpack5": "^6.3.7",
"@storybook/manager-webpack5": "^6.3.7",
"@storybook/react": "^6.3.7",
"@strapi/icons": "0.0.1-alpha.33",
"@strapi/parts": "0.0.1-alpha.33",
"@strapi/icons": "0.0.1-alpha.34",
"@strapi/parts": "0.0.1-alpha.34",
"babel-loader": "^8.2.2",
"cross-env": "^7.0.3",
"enzyme": "^3.8.0",

49
packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewLocalePicker/Bullet.js
View File

@ -1,6 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
// import { useIntl } from 'react-intl';
import styled from 'styled-components';
// import { Tooltip } from '@strapi/parts/Tooltip';
import { pxToRem } from '@strapi/helper-plugin';
// import { getTrad } from '../../../utils';
// TODO
// const CustomBullet = styled(Bullet)`
@ -11,12 +15,49 @@ import { pxToRem } from '@strapi/helper-plugin';
// }
// `;
const Bullet = styled.div`
const statusMap = {
'did-not-create-locale': {
backgroundColor: 'neutral0',
borderColor: 'neutral500',
},
draft: {
backgroundColor: 'secondary700',
},
published: {
backgroundColor: 'success700',
},
};
// TODO
// const statusToTitleMap = {
// draft: 'content-manager.components.Select.draft-info-title',
// published: 'content-manager.components.Select.publish-info-title',
// 'did-not-create-locale': getTrad('components.Select.locales.not-available'),
// };
const StyledBullet = styled.div`
width: ${pxToRem(6)};
height: ${pxToRem(6)};
border: ${({ theme, borderColor }) => `1px solid ${theme.colors[borderColor]}`};
background: ${({ theme, $bulletColor }) => theme.colors[$bulletColor]};
border: ${({ theme, status }) => `1px solid ${theme.colors[statusMap[status].borderColor]}`};
background: ${({ theme, status }) => theme.colors[statusMap[status].backgroundColor]};
border-radius: 50%;
`;
const Bullet = ({ status }) => {
// const { formatMessage } = useIntl();
return <StyledBullet status={status} />;
// FIXME
// return (
// <Tooltip description={formatMessage({ id: statusToTitleMap[status] })}>
// <StyledBullet status={status} />
// </Tooltip>
// );
};
Bullet.propTypes = {
status: PropTypes.oneOf(['draft', 'published', 'did-not-create-locale']).isRequired,
};
export default Bullet;

66
packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewLocalePicker/Option.js
View File

@ -1,66 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import { components } from 'react-select';
import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import { Flex, Text } from '@buffetjs/core';
import { RelationDPState } from '@strapi/helper-plugin';
import { getTrad } from '../../../utils';
const TextGrow = styled(Text)`
flex-grow: 2;
`;
const statusToTitleMap = {
draft: 'content-manager.components.Select.draft-info-title',
published: 'content-manager.components.Select.publish-info-title',
'did-not-create-locale': getTrad('components.Select.locales.not-available'),
};
const Option = props => {
const { formatMessage } = useIntl();
const Component = components.Option;
const options = get(props, ['selectProps', 'options'], {});
const currentOption = options.find(option => option.value === props.value);
const titleLabelID = statusToTitleMap[currentOption.status];
const title = formatMessage({ id: titleLabelID });
const fontWeight = props.isFocused ? 'bold' : 'regular';
return (
<Component {...props}>
<Flex>
<RelationDPState
{...currentOption}
marginLeft="0"
marginTop="1px"
marginRight="10px"
marginBottom="0"
title={title}
/>
<TextGrow ellipsis as="div" fontWeight={fontWeight} title={props.label}>
{props.label}&nbsp;
</TextGrow>
</Flex>
</Component>
);
};
Option.defaultProps = {};
Option.propTypes = {
label: PropTypes.string.isRequired,
isFocused: PropTypes.bool.isRequired,
selectProps: PropTypes.shape({
options: PropTypes.arrayOf(
PropTypes.shape({
status: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
}).isRequired
).isRequired,
}).isRequired,
value: PropTypes.string.isRequired,
};
export default Option;

8
packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewLocalePicker/Wrapper.js
View File

@ -1,8 +0,0 @@
import styled from 'styled-components';
const Wrapper = styled.div`
padding-bottom: ${({ paddingBottom }) => paddingBottom};
border-top: 1px solid rgba(14, 22, 34, 0.04);
`;
export default Wrapper;

41
packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewLocalePicker/index.js
View File

@ -6,14 +6,11 @@ import { Divider } from '@strapi/parts/Divider';
import { Select, Option } from '@strapi/parts/Select';
import { TableLabel } from '@strapi/parts/Text';
import { Stack } from '@strapi/parts/Stack';
import { Row } from '@strapi/parts/Row';
import { useIntl } from 'react-intl';
import { useTheme } from 'styled-components';
import { useHistory } from 'react-router-dom';
import { stringify } from 'qs';
import { getTrad } from '../../../utils';
import { addStatusColorToLocale, createLocalesOption } from './utils';
import { statusMap } from './utils/addStatusColorToLocale';
import { createLocalesOption } from './utils';
import CMEditViewCopyLocale from '../CMEditViewCopyLocale';
import Bullet from './Bullet';
@ -31,7 +28,7 @@ const CMEditViewLocalePicker = ({
slug,
}) => {
const { formatMessage } = useIntl();
const theme = useTheme();
const currentLocale = get(query, 'plugins.i18n.locale', false);
const { push } = useHistory();
@ -78,10 +75,7 @@ const CMEditViewLocalePicker = ({
});
};
const options = addStatusColorToLocale(
createLocalesOption(appLocales, localizations),
theme
).filter(({ status, value }) => {
const options = createLocalesOption(appLocales, localizations).filter(({ status, value }) => {
if (status === 'did-not-create-locale') {
return createPermissions.find(({ properties }) =>
get(properties, 'locales', []).includes(value)
@ -90,6 +84,7 @@ const CMEditViewLocalePicker = ({
return readPermissions.find(({ properties }) => get(properties, 'locales', []).includes(value));
});
const filteredOptions = options.filter(({ value }) => value !== currentLocale);
const value = options.find(({ value }) => {
return value === currentLocale;
@ -115,30 +110,18 @@ const CMEditViewLocalePicker = ({
<Option
value={value.value}
disabled
startIcon={hasDraftAndPublishEnabled ? 'todo' : null}
startIcon={hasDraftAndPublishEnabled ? <Bullet status={currentLocaleStatus} /> : null}
>
<Row>
{hasDraftAndPublishEnabled && (
<Bullet
$bulletColor={statusMap[currentLocaleStatus].backgroundColor}
borderColor={statusMap[currentLocaleStatus].borderColor}
/>
)}
{value.label}
</Row>
{value.label}
</Option>
{filteredOptions.map(option => {
return (
<Option key={option.value} value={option.value}>
<Row>
{hasDraftAndPublishEnabled && (
<Bullet
$bulletColor={option.backgroundColor}
borderColor={option.borderColor}
/>
)}
{option.label}
</Row>
<Option
key={option.value}
value={option.value}
startIcon={hasDraftAndPublishEnabled ? <Bullet status={option.status} /> : null}
>
{option.label}
</Option>
);
})}

26
packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewLocalePicker/utils/addStatusColorToLocale.js
View File

@ -1,26 +0,0 @@
const statusMap = {
'did-not-create-locale': {
backgroundColor: 'neutral0',
borderColor: 'neutral500',
},
draft: {
backgroundColor: 'secondary700',
},
published: {
backgroundColor: 'success700',
},
};
const addStatusColorToLocale = locales =>
locales.map(({ status, ...rest }) => {
const props = statusMap[status];
return {
...props,
status,
...rest,
};
});
export default addStatusColorToLocale;
export { statusMap };

1
packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewLocalePicker/utils/index.js
View File

@ -1,2 +1 @@
export { default as addStatusColorToLocale } from './addStatusColorToLocale';
export { default as createLocalesOption } from './createLocalesOption';

16
yarn.lock
View File

@ -4921,15 +4921,15 @@
resolve-from "^5.0.0"
store2 "^2.12.0"
"@strapi/icons@0.0.1-alpha.33":
version "0.0.1-alpha.33"
resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.33.tgz#42948b6c0f8b9e9053edb1258ee5d3b3b582e0be"
integrity sha512-b7n9yU4PQE/q66eJ1Gg8z2t04Q8ZZmtFSlFD52B9UkAt9YM5CpVBigyOOWUD0v9h3NMkp/bS+rrcZFOxOOZqnA==
"@strapi/icons@0.0.1-alpha.34":
version "0.0.1-alpha.34"
resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.34.tgz#4a4d3414f155580c2c3d0877ef0acb993c80c9f8"
integrity sha512-MFroflKEm39zsbO29v83zL5UWUoMbYAgcwID9wRhk5/9DySQ5KXpswSeNbK6OlUraTBJ0SJy2IjIcZMmQMsVuw==
"@strapi/parts@0.0.1-alpha.33":
version "0.0.1-alpha.33"
resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.33.tgz#445d4ce2f27a39273e00bf1399deb522f4801d1c"
integrity sha512-BdFrdjwhnLxZ1vPhmyuT5PUh9YM25mjiEh9QiQckX548yXV08ZnHOuIN5RkjfcYrDhBq0JKhgO4XnZFvx9KkXg==
"@strapi/parts@0.0.1-alpha.34":
version "0.0.1-alpha.34"
resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.34.tgz#a622eddfb134502d29c74dc35bd6d8e783a1a774"
integrity sha512-vl4ITWDDoQ55qBAC1VfELSCQ83/WwcYvMMM9YSOp28w1QmTnZmHNjZMrq9VOsgGznfejdSlLw4pERpQpf7ffOg==
dependencies:
"@internationalized/number" "^3.0.2"
compute-scroll-into-view "^1.0.17"