From 6ae9ad619c548989abcd3c83b76737a334e145eb Mon Sep 17 00:00:00 2001 From: soupette Date: Mon, 29 Mar 2021 18:46:15 +0200 Subject: [PATCH 1/4] Fix tabs border radius Signed-off-by: soupette --- packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js | 3 +++ packages/strapi-admin/admin/src/components/Roles/Tabs/index.js | 2 ++ 2 files changed, 5 insertions(+) diff --git a/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js b/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js index e95bb921be..5fdc8b033f 100644 --- a/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js +++ b/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js @@ -5,6 +5,9 @@ const Tab = styled.div` flex: 1; padding: 1rem; text-align: center; + border-top-left-radius: ${({ isFirst, theme }) => + isFirst ? theme.main.sizes.borderRadius : '0'}; + border-top-right-radius: ${({ isLast, theme }) => (isLast ? theme.main.sizes.borderRadius : '0')}; ${({ isActive, theme }) => isActive ? { diff --git a/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js b/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js index fb465d1d5e..3606485c18 100644 --- a/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js +++ b/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js @@ -32,6 +32,8 @@ const Tabs = ({ children, isLoading, tabsLabel }) => { isActive={index === selectedTabIndex} key={tab.id} onClick={() => handleSelectedTab(index)} + isFirst={index === 0} + isLast={index === tabsLabel.length - 1} > {formatMessage({ id: tab.labelId, defaultMessage: tab.defaultMessage })} From d28c184daff232e27cdb33846662fb56aa858e33 Mon Sep 17 00:00:00 2001 From: soupette Date: Mon, 29 Mar 2021 19:00:17 +0200 Subject: [PATCH 2/4] Use similar dropdown indicator as in the CM Signed-off-by: soupette --- .../components/CMEditViewCopyLocale/index.js | 2 +- .../CMEditViewLocalePicker/index.js | 3 +- .../src/components/DropdownIndicator/index.js | 40 +++++++++++++++++++ 3 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 packages/strapi-plugin-i18n/admin/src/components/DropdownIndicator/index.js diff --git a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js index b6a95978d8..26e410f89c 100644 --- a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js +++ b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js @@ -10,11 +10,11 @@ import { BaselineAlignment, ModalConfirm, selectStyles, - DropdownIndicator, useContentManagerEditViewDataManager, request, } from 'strapi-helper-plugin'; import { getTrad } from '../../utils'; +import DropdownIndicator from '../DropdownIndicator'; import { cleanData, generateOptions } from './utils'; const CMEditViewCopyLocale = ({ appLocales, currentLocale, localizations, readPermissions }) => { diff --git a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js index 8c11242d92..5ba4b6d3ed 100644 --- a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js +++ b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js @@ -5,12 +5,13 @@ import get from 'lodash/get'; import Select, { components } from 'react-select'; import { useIntl } from 'react-intl'; import { useTheme } from 'styled-components'; -import { BaselineAlignment, selectStyles, DropdownIndicator } from 'strapi-helper-plugin'; +import { BaselineAlignment, selectStyles } from 'strapi-helper-plugin'; import { useHistory } from 'react-router-dom'; import { stringify } from 'qs'; import { getTrad } from '../../utils'; import { addStatusColorToLocale, createLocalesOption } from './utils'; import CMEditViewCopyLocale from '../CMEditViewCopyLocale'; +import DropdownIndicator from '../DropdownIndicator'; import OptionComponent from './Option'; import Wrapper from './Wrapper'; diff --git a/packages/strapi-plugin-i18n/admin/src/components/DropdownIndicator/index.js b/packages/strapi-plugin-i18n/admin/src/components/DropdownIndicator/index.js new file mode 100644 index 0000000000..2a6b7a8d5a --- /dev/null +++ b/packages/strapi-plugin-i18n/admin/src/components/DropdownIndicator/index.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Flex } from '@buffetjs/core'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; + +const Wrapper = styled(Flex)` + height: 100%; + width: 32px; + justify-content: space-around; + background: #fafafb; + > svg { + align-self: center; + font-size: 11px; + color: #b3b5b9; + } +`; + +const DropdownIndicator = ({ selectProps: { menuIsOpen } }) => { + const icon = menuIsOpen ? 'caret-up' : 'caret-down'; + + return ( + + + + ); +}; + +DropdownIndicator.propTypes = { + selectProps: PropTypes.shape({ + menuIsOpen: PropTypes.bool.isRequired, + }).isRequired, +}; + +Wrapper.defaultProps = { + flexDirection: 'column', + justifyContent: 'center', +}; + +export default DropdownIndicator; From 48ab9bff466c20f236e798531ba4abc455be096c Mon Sep 17 00:00:00 2001 From: soupette Date: Tue, 30 Mar 2021 10:05:59 +0200 Subject: [PATCH 3/4] Fix dropdown indicator Signed-off-by: soupette --- .../components/Select/DropdownIndicator.js} | 0 .../lib/src/components/Select/index.js | 17 ++++---- .../strapi-helper-plugin/lib/src/index.js | 2 + packages/strapi-helper-plugin/package.json | 5 +++ .../SelectWrapper/DropdownIndicator.js | 39 ------------------- .../src/components/SelectWrapper/index.js | 2 +- .../components/CMEditViewCopyLocale/index.js | 2 +- .../CMEditViewLocalePicker/index.js | 3 +- 8 files changed, 19 insertions(+), 51 deletions(-) rename packages/{strapi-plugin-i18n/admin/src/components/DropdownIndicator/index.js => strapi-helper-plugin/lib/src/components/Select/DropdownIndicator.js} (100%) delete mode 100644 packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/DropdownIndicator.js diff --git a/packages/strapi-plugin-i18n/admin/src/components/DropdownIndicator/index.js b/packages/strapi-helper-plugin/lib/src/components/Select/DropdownIndicator.js similarity index 100% rename from packages/strapi-plugin-i18n/admin/src/components/DropdownIndicator/index.js rename to packages/strapi-helper-plugin/lib/src/components/Select/DropdownIndicator.js diff --git a/packages/strapi-helper-plugin/lib/src/components/Select/index.js b/packages/strapi-helper-plugin/lib/src/components/Select/index.js index 2fee9184c8..d1594530a4 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Select/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/Select/index.js @@ -3,17 +3,18 @@ import ReactSelect, { components } from 'react-select'; import PropTypes from 'prop-types'; import Carret from '../Carret'; import { useTheme } from 'styled-components'; +import DropdownIndicator from './DropdownIndicator'; import getStyles from './styles'; -export const DropdownIndicator = props => { - const theme = useTheme(); +// export const DropdownIndicator = props => { +// const theme = useTheme(); - return ( - - - - ); -}; +// return ( +// +// +// +// ); +// }; export const Select = ({ children, onChange, selectedValue, ...props }) => { const theme = useTheme(); diff --git a/packages/strapi-helper-plugin/lib/src/index.js b/packages/strapi-helper-plugin/lib/src/index.js index dd44516667..7bdad8d27f 100644 --- a/packages/strapi-helper-plugin/lib/src/index.js +++ b/packages/strapi-helper-plugin/lib/src/index.js @@ -28,6 +28,8 @@ export { default as InputAddon } from './components/InputAddon'; export { default as EmptyState } from './components/EmptyState'; export * from './components/Tabs'; export * from './components/Select'; + +export { default as DropdownIndicator } from './components/Select/DropdownIndicator'; export * from './components/InjectionZone'; export { default as InputAddonWithErrors } from './components/InputAddonWithErrors'; diff --git a/packages/strapi-helper-plugin/package.json b/packages/strapi-helper-plugin/package.json index 5f4bb2d121..f3de8b7663 100644 --- a/packages/strapi-helper-plugin/package.json +++ b/packages/strapi-helper-plugin/package.json @@ -56,6 +56,11 @@ "@buffetjs/icons": "3.3.5-next.1", "@buffetjs/styles": "3.3.5-next.1", "@buffetjs/utils": "3.3.5-next.1", + "@fortawesome/fontawesome-free": "^5.15.2", + "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-brands-svg-icons": "^5.15.2", + "@fortawesome/free-solid-svg-icons": "^5.15.3", + "@fortawesome/react-fontawesome": "^0.1.14", "bootstrap": "^4.6.0", "classnames": "^2.2.5", "immutable": "^3.8.2", diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/DropdownIndicator.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/DropdownIndicator.js deleted file mode 100644 index 628b29aa46..0000000000 --- a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/DropdownIndicator.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Flex } from '@buffetjs/core'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; - -const Wrapper = styled(Flex)` - height: 100%; - width: 32px; - background: #fafafb; - > svg { - align-self: center; - font-size: 11px; - color: #b3b5b9; - } -`; - -const DropdownIndicator = ({ selectProps: { menuIsOpen } }) => { - const icon = menuIsOpen ? 'caret-up' : 'caret-down'; - - return ( - - - - ); -}; - -DropdownIndicator.propTypes = { - selectProps: PropTypes.shape({ - menuIsOpen: PropTypes.bool.isRequired, - }).isRequired, -}; - -Wrapper.defaultProps = { - flexDirection: 'column', - justifyContent: 'center', -}; - -export default DropdownIndicator; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js index d9cee36cf4..a7db810b81 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js @@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl'; import { Link, useLocation } from 'react-router-dom'; import { findIndex, get, isArray, isEmpty, set } from 'lodash'; import { + DropdownIndicator, LabelIconWrapper, NotAllowedInput, request, @@ -16,7 +17,6 @@ import pluginId from '../../pluginId'; import SelectOne from '../SelectOne'; import SelectMany from '../SelectMany'; import ClearIndicator from './ClearIndicator'; -import DropdownIndicator from './DropdownIndicator'; import IndicatorSeparator from './IndicatorSeparator'; import Option from './Option'; import { A, BaselineAlignment } from './components'; diff --git a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js index 26e410f89c..c15453342c 100644 --- a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js +++ b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js @@ -8,13 +8,13 @@ import { useTheme } from 'styled-components'; import { useIntl } from 'react-intl'; import { BaselineAlignment, + DropdownIndicator, ModalConfirm, selectStyles, useContentManagerEditViewDataManager, request, } from 'strapi-helper-plugin'; import { getTrad } from '../../utils'; -import DropdownIndicator from '../DropdownIndicator'; import { cleanData, generateOptions } from './utils'; const CMEditViewCopyLocale = ({ appLocales, currentLocale, localizations, readPermissions }) => { diff --git a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js index 5ba4b6d3ed..9a70c98f73 100644 --- a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js +++ b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js @@ -5,13 +5,12 @@ import get from 'lodash/get'; import Select, { components } from 'react-select'; import { useIntl } from 'react-intl'; import { useTheme } from 'styled-components'; -import { BaselineAlignment, selectStyles } from 'strapi-helper-plugin'; +import { DropdownIndicator, BaselineAlignment, selectStyles } from 'strapi-helper-plugin'; import { useHistory } from 'react-router-dom'; import { stringify } from 'qs'; import { getTrad } from '../../utils'; import { addStatusColorToLocale, createLocalesOption } from './utils'; import CMEditViewCopyLocale from '../CMEditViewCopyLocale'; -import DropdownIndicator from '../DropdownIndicator'; import OptionComponent from './Option'; import Wrapper from './Wrapper'; From 176e589db4374eb797f68217211e0c592ed76087 Mon Sep 17 00:00:00 2001 From: soupette Date: Tue, 30 Mar 2021 10:11:15 +0200 Subject: [PATCH 4/4] Fix PR feedback Signed-off-by: soupette --- .../admin/src/components/Roles/Tabs/Tab.js | 4 +--- .../admin/src/components/Roles/Tabs/TabsWrapper.js | 8 ++++++++ .../admin/src/components/Roles/Tabs/index.js | 2 -- .../lib/src/components/Select/index.js | 13 +------------ 4 files changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js b/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js index 5fdc8b033f..e9bf4ded63 100644 --- a/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js +++ b/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js @@ -5,9 +5,7 @@ const Tab = styled.div` flex: 1; padding: 1rem; text-align: center; - border-top-left-radius: ${({ isFirst, theme }) => - isFirst ? theme.main.sizes.borderRadius : '0'}; - border-top-right-radius: ${({ isLast, theme }) => (isLast ? theme.main.sizes.borderRadius : '0')}; + ${({ isActive, theme }) => isActive ? { diff --git a/packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js b/packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js index d91e491929..915e5b5262 100644 --- a/packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js +++ b/packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js @@ -1,9 +1,17 @@ import styled from 'styled-components'; +import Tab from './Tab'; const TabsWrapper = styled.div` display: block; border-radius: ${({ theme }) => theme.main.sizes.borderRadius}; box-shadow: ${({ theme }) => `0px 2px 4px 0px ${theme.main.colors.darkGrey}`}; + + ${Tab}:first-of-type { + border-top-left-radius: ${({ theme }) => theme.main.sizes.borderRadius}; + } + ${Tab}:last-of-type { + border-top-right-radius: ${({ theme }) => theme.main.sizes.borderRadius}; + } `; export default TabsWrapper; diff --git a/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js b/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js index 3606485c18..fb465d1d5e 100644 --- a/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js +++ b/packages/strapi-admin/admin/src/components/Roles/Tabs/index.js @@ -32,8 +32,6 @@ const Tabs = ({ children, isLoading, tabsLabel }) => { isActive={index === selectedTabIndex} key={tab.id} onClick={() => handleSelectedTab(index)} - isFirst={index === 0} - isLast={index === tabsLabel.length - 1} > {formatMessage({ id: tab.labelId, defaultMessage: tab.defaultMessage })} diff --git a/packages/strapi-helper-plugin/lib/src/components/Select/index.js b/packages/strapi-helper-plugin/lib/src/components/Select/index.js index d1594530a4..6380d3bb6f 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Select/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/Select/index.js @@ -1,21 +1,10 @@ import React from 'react'; -import ReactSelect, { components } from 'react-select'; +import ReactSelect from 'react-select'; import PropTypes from 'prop-types'; -import Carret from '../Carret'; import { useTheme } from 'styled-components'; import DropdownIndicator from './DropdownIndicator'; import getStyles from './styles'; -// export const DropdownIndicator = props => { -// const theme = useTheme(); - -// return ( -// -// -// -// ); -// }; - export const Select = ({ children, onChange, selectedValue, ...props }) => { const theme = useTheme(); const selectStyles = getStyles(theme);