yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-02 10:55:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

import Tooltip and Separator from buffet

Browse Source 
Signed-off-by: HichamELBSI <elabbassih@gmail.com>
This commit is contained in:
HichamELBSI 2020-12-24 15:07:35 +01:00 committed by Convly
parent d8a57fe207
commit 4ec79afa9d
9 changed files with 13 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/strapi-admin/admin/src/components/Tooltip/index.js
View File

@ -1,23 +0,0 @@
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
// TODO : replace by the buffet tooltip component when it will be released
// Add !important to customize CSS is recommended by react-tooltip in the official readme
const Tooltip = styled(ReactTooltip).attrs(({ delayShow = 500, theme }) => ({
// Pre set the tooltip static props.
place: 'bottom',
effect: 'solid',
delayShow,
arrowColor: 'transparent',
backgroundColor: theme.main.colors.greyDark,
}))`
padding: 0.5rem 0.7rem !important;
opacity: 1 !important;
border-radius: ${({ theme }) => theme.main.sizes.borderRadius} !important;
max-width: 400px;
max-height: 400px;
overflow: hidden;
text-overflow: ellipsis;
`;
export default Tooltip;

2
packages/strapi-admin/ee/admin/components/ProviderButton/index.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Text } from '@buffetjs/core';
import Tooltip from '../../../../admin/src/components/Tooltip';
import { Tooltip } from '@buffetjs/styles';
import { ProviderButtonWrapper, ProviderLink } from './ProviderButtonStyles';
const ProviderButton = ({ provider }) => {

33
packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/Separator.js
View File

@ -1,33 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Flex, Padded, Text } from '@buffetjs/core';
const BorderTop = styled.div`
border-top: 1px solid ${({ theme }) => theme.main.colors.border};
width: 100%;
`;
// TODO : replace by the buffet component when it is released
const Separator = ({ label }) => {
return label ? (
<Flex justifyContent="center" alignItems="center">
<BorderTop />
<Padded left right size="sm">
<Text color="grey">{label}</Text>
</Padded>
<BorderTop />
</Flex>
) : (
<BorderTop />
);
};
Separator.defaultProps = {
label: null,
};
Separator.propTypes = {
label: PropTypes.string,
};
export default Separator;

6
packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/index.js
View File

@ -2,13 +2,11 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useIntl } from 'react-intl';
import { Flex, Padded, Text } from '@buffetjs/core';
import { LoadingIndicator } from '@buffetjs/styles';
import { Flex, Padded, Text, Separator } from '@buffetjs/core';
import { LoadingIndicator, Tooltip } from '@buffetjs/styles';
import { BaselineAlignment } from 'strapi-helper-plugin';
import BaseLogin from '../../../../../../admin/src/containers/AuthPage/components/Login/BaseLogin';
import Tooltip from '../../../../../../admin/src/components/Tooltip';
import Separator from './Separator';
import ProviderButton from '../../../../components/ProviderButton';
import {
ProviderButtonWrapper,

10
packages/strapi-admin/ee/admin/containers/AuthPage/components/Providers/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Button, Flex, Padded } from '@buffetjs/core';
import { Button, Flex, Padded, Separator } from '@buffetjs/core';
import { LoadingIndicator } from '@buffetjs/styles';
import { Redirect, useHistory } from 'react-router-dom';
import styled from 'styled-components';
@ -11,7 +11,6 @@ import Logo from '../../../../../../admin/src/containers/AuthPage/components/Log
import Section from '../../../../../../admin/src/containers/AuthPage/components/Section';
import ProviderButton from '../../../../components/ProviderButton';
import { useAuthProviders } from '../../../../hooks';
import Separator from '../Login/Separator';
const ProviderWrapper = styled.div`
padding: 5px 4px;
@ -51,7 +50,12 @@ const Providers = () => {
)}
<Padded top size="sm" />
<Padded top bottom size="smd">
<Separator />
<Separator
label={formatMessage({
id: 'or',
defaultMessage: 'OR',
})}
/>
</Padded>
<Button style={{ width: '100%' }} onClick={handleClick} type="submit" color="secondary">
{formatMessage({

2
packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row/Cell.js
View File

@ -1,10 +1,10 @@
import React, { memo, useState } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from '@buffetjs/styles';
import MediaPreviewList from '../../MediaPreviewList';
import RelationPreviewList from '../../RelationPreviewList';
import Truncate from '../../Truncate';
import Truncated from '../../Truncated';
import Tooltip from '../../Tooltip';
const Cell = ({ options }) => {
const [tooltipIsDisplayed, setDisplayTooltip] = useState(false);

3
packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/RelationPreviewTooltip.js
View File

@ -1,10 +1,9 @@
import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
import { Text, Padded } from '@buffetjs/core';
import { request } from 'strapi-helper-plugin';
import { LoadingIndicator } from '@buffetjs/styles';
import { LoadingIndicator, Tooltip } from '@buffetjs/styles';
import PropTypes from 'prop-types';
import { getDisplayedValue, getRequestUrl } from '../../utils';
import Tooltip from '../Tooltip';
const RelationPreviewTooltip = ({
tooltipId,

2
packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/index.js
View File

@ -1,6 +1,7 @@
import React, { memo, useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { Flex, Padded, Count } from '@buffetjs/core';
import { Tooltip } from '@buffetjs/styles';
import { useIntl } from 'react-intl';
import { getTrad } from '../../utils';
@ -8,7 +9,6 @@ import Truncate from '../Truncate';
import Truncated from '../Truncated';
import CountWrapper from './CountWrapper';
import RelationPreviewTooltip from './RelationPreviewTooltip';
import Tooltip from '../Tooltip';
const RelationPreviewList = ({
options: {

22
packages/strapi-plugin-content-manager/admin/src/components/Tooltip/index.js
View File

@ -1,22 +0,0 @@
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
// Add !important to customize CSS is recommended by react-tooltip in the official readme
const Tooltip = styled(ReactTooltip).attrs(({ theme }) => ({
// Pre set the tooltip static props.
place: 'bottom',
effect: 'solid',
delayShow: 500,
arrowColor: 'transparent',
backgroundColor: theme.main.colors.greyDark,
}))`
padding: 0.5rem 0.7rem !important;
opacity: 1 !important;
border-radius: ${({ theme }) => theme.main.sizes.borderRadius} !important;
max-width: 400px;
max-height: 400px;
overflow: hidden;
text-overflow: ellipsis;
`;
export default Tooltip;